jquery - How to set Axis step range in Google Chart? -
hello want create google chart getting problem ticks: add [0, -50000, -100000, -150000, -200000] ... it's working fine add range 500000 , set auto ticks... in advance.
google.load('visualization', '1', {packages: ['corechart', 'line']}); google.setonloadcallback(drawbackgroundcolor); function drawbackgroundcolor() { var data = new google.visualization.datatable(); var amount_array = []; //data.addcolumn('number', 'dogs'); data.addcolumn('date', 'product'); data.addcolumn('number', 'amount'); data.addrows([ [ new date(2015,4,20),-199525], [ new date(2015,4,27),-195930], [ new date(2015,5,17),-175720], [ new date(2015,7,05),-189725], [ new date(2015,8,11),-174875], [ new date(2015,8,30),-170819], [ new date(2015,9,07),-176488], [ new date(2015,9,21),-188950], [ new date(2015,9,28),-190418], [ new date(2015,10,05),-183461], [ new date(2015,10,12),-189215], [ new date(2015,10,18),-192451], [ new date(2015,10,26),-184334], [ new date(2015,11,03),-191307], [ new date(2015,11,09),-188478], [ new date(2015,11,16),-194779], [ new date(2016,0,06),-218751], [ new date(2016,0,20),-226485], ]); amount_array[0] = '-199.5k'; amount_array[1] = '-195.9k'; amount_array[2] = '-175.7k'; amount_array[3] = '-189.7k'; amount_array[4] = '-174.8k'; amount_array[5] = '-170.8k'; amount_array[6] = '-176.4k'; amount_array[7] = '-188.9k'; amount_array[8] = '-190.4k'; amount_array[9] = '-183.4k'; amount_array[10] = '-189.2k'; amount_array[11] = '-192.4k'; amount_array[12] = '-184.3k'; amount_array[13] = '-191.3k'; amount_array[14] = '-188.4k'; amount_array[15] = '-194.7k'; amount_array[16] = '-218.7k'; amount_array[17] = '-226.4k'; // custom format data values (var = 0; < data.getnumberofrows(); i++) { data.setformattedvalue(i, 1, amount_array[i]); } var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); var options = { haxis: { title: '', gridlinecolor: '#fff', textposition: 'none', }, vaxis: { title: '', textstyle: { color: '#a7b3bc', fontsize: 14, bold: true, }, ticks: [0, -50000, -100000, -150000, -200000], }, backgroundcolor: '#fff', series: { 0: { color: '#5cbd60' } }, pointsize: 2, baselinecolor: '#e6e6e6', legend: {position: 'none'}, chartarea: { backgroundcolor: { stroke: '#e6e6e6', strokewidth: 1 }, width: 330, height: 155, top:20, bottom:20 }, width: 430, height : 200 }; // axis values , reformat them var runonce = google.visualization.events.addlistener(chart, 'ready', function () { google.visualization.events.removelistener(runonce); var bb, val, formattedval, suffix, ticks = [], cli = chart.getchartlayoutinterface(); (var = 0; bb = cli.getboundingbox('vaxis#0#gridline#' + i); i++) { val = cli.getvaxisvalue(bb.top); if (val != parseint(val)) { val = cli.getvaxisvalue(bb.top + bb.height / 2); } // convert base-10 counting 2^10 counting (var n = 0; val >= 1000; n++) { //val /= 1000; val = val / 1000; } formattedval = val; val *= math.pow(1000, n); switch (n) { case 0: suffix = '$-'; break; case 1: suffix = 'k'; break; case 2: suffix = 'm'; break; case 3: suffix = 'g'; break; case 4: suffix = 't'; break; default: while (n > 4) { formattedval *= 1000; n--; } suffix = 'k' } if(formattedval >= 1){ ticks.push({v: val, f: math.round(formattedval) + suffix}); } else if(formattedval < 0){ var formattedval1 = formattedval / 1000; ticks.push({v: val, f: math.round(formattedval1) + 'k'}); } else{ ticks.push({v: val, f: suffix}); } } options.vaxis = options.vaxis || {}; options.vaxis.ticks = ticks; chart.draw(data, options); }); chart.draw(data, options); }<script src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
you generate ticks specifying min,max , interval parameters demonstrated below:
function calcintticks(datatable, options) { var min = options.hasownproperty("min") ? options.min : math.floor(datatable.getcolumnrange(1).min); var max = options.hasownproperty("max") ? options.max : math.ceil(datatable.getcolumnrange(1).max); var vals = []; (var cur = min; cur <= max; cur += options.interval) { vals.push(cur); } return vals; } modified example
google.load('visualization', '1', { packages: ['corechart', 'line'] }); google.setonloadcallback(drawbackgroundcolor); function drawbackgroundcolor() { var data = new google.visualization.datatable(); var amount_array = []; //data.addcolumn('number', 'dogs'); data.addcolumn('date', 'product'); data.addcolumn('number', 'amount'); data.addrows([ [new date(2015, 4, 20), -199525], [new date(2015, 4, 27), -195930], [new date(2015, 5, 17), -175720], [new date(2015, 7, 05), -189725], [new date(2015, 8, 11), -174875], [new date(2015, 8, 30), -170819], [new date(2015, 9, 07), -176488], [new date(2015, 9, 21), -188950], [new date(2015, 9, 28), -190418], [new date(2015, 10, 05), -183461], [new date(2015, 10, 12), -189215], [new date(2015, 10, 18), -192451], [new date(2015, 10, 26), -184334], [new date(2015, 11, 03), -191307], [new date(2015, 11, 09), -188478], [new date(2015, 11, 16), -194779], [new date(2016, 0, 06), -218751], [new date(2016, 0, 20), -226485], ]); amount_array[0] = '-199.5k'; amount_array[1] = '-195.9k'; amount_array[2] = '-175.7k'; amount_array[3] = '-189.7k'; amount_array[4] = '-174.8k'; amount_array[5] = '-170.8k'; amount_array[6] = '-176.4k'; amount_array[7] = '-188.9k'; amount_array[8] = '-190.4k'; amount_array[9] = '-183.4k'; amount_array[10] = '-189.2k'; amount_array[11] = '-192.4k'; amount_array[12] = '-184.3k'; amount_array[13] = '-191.3k'; amount_array[14] = '-188.4k'; amount_array[15] = '-194.7k'; amount_array[16] = '-218.7k'; amount_array[17] = '-226.4k'; // custom format data values (var = 0; < data.getnumberofrows() ; i++) { data.setformattedvalue(i, 1, amount_array[i]); } var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); var options = { haxis: { title: '', gridlinecolor: '#fff', textposition: 'none', }, vaxis: { title: '', textstyle: { color: '#a7b3bc', fontsize: 14, bold: true, }, //ticks: [0, -50000, -100000, -150000, -200000], ticks: calcintticks(data, { min: -200000, max: 0, interval: 50000 }) }, backgroundcolor: '#fff', series: { 0: { color: '#5cbd60' } }, pointsize: 2, baselinecolor: '#e6e6e6', legend: { position: 'none' }, chartarea: { backgroundcolor: { stroke: '#e6e6e6', strokewidth: 1 }, width: 330, height: 155, top: 20, bottom: 20 }, width: 430, height: 200 }; // axis values , reformat them var runonce = google.visualization.events.addlistener(chart, 'ready', function () { google.visualization.events.removelistener(runonce); var bb, val, formattedval, suffix, ticks = [], cli = chart.getchartlayoutinterface(); (var = 0; bb = cli.getboundingbox('vaxis#0#gridline#' + i) ; i++) { val = cli.getvaxisvalue(bb.top); if (val != parseint(val)) { val = cli.getvaxisvalue(bb.top + bb.height / 2); } // convert base-10 counting 2^10 counting (var n = 0; val >= 1000; n++) { //val /= 1000; val = val / 1000; } formattedval = val; val *= math.pow(1000, n); switch (n) { case 0: suffix = '$-'; break; case 1: suffix = 'k'; break; case 2: suffix = 'm'; break; case 3: suffix = 'g'; break; case 4: suffix = 't'; break; default: while (n > 4) { formattedval *= 1000; n--; } suffix = 'k' } if (formattedval >= 1) { ticks.push({ v: val, f: math.round(formattedval) + suffix }); } else if (formattedval < 0) { var formattedval1 = formattedval / 1000; ticks.push({ v: val, f: math.round(formattedval1) + 'k' }); } else { ticks.push({ v: val, f: suffix }); } } options.vaxis = options.vaxis || {}; options.vaxis.ticks = ticks; chart.draw(data, options); }); chart.draw(data, options); } function calcintticks(datatable, options) { var min = options.hasownproperty("min") ? options.min : math.floor(datatable.getcolumnrange(1).min); var max = options.hasownproperty("max") ? options.max : math.ceil(datatable.getcolumnrange(1).max); var vals = []; (var cur = min; cur <= max; cur += options.interval) { vals.push(cur); } return vals; }<script src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
Comments
Post a Comment