Geek Answers Handbook

Secondary Axis Chart Graphs

I am currently studying some web-editing Google charts to expand my knowledge, and I am having a problem that I cannot get around.

<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Derby', 'Bristol', 'Warrington', 'Indianapolis', 'Dahlewitz', 'Montreal'], ['2012', 143754.00 , 7607.59, 958.51, 6029.12 , 13605.12, 586.00], //continue here!!!!! ['2013', 186065.32, 1674.50, 1823.93, 9574.24, 23935.14, 743.43], ['2014', 251238.53, 0, 0, 10154.41, 19926.63, 363.71], ['2015', 323134.57, 0, 0, 10400.66, 12002.84, 555.86], ['2016', 467058.18, 0, 0, 10529.27, 5844.90, 0] , ['2017', 391209.43, 0, 0, 11072.43, 3603.65, 0] , ['2018', 460257.40, 0, 0, 12031.69, 1833.52, 0] , ['2019', 744114.34, 0, 0, 13012.83, 1517.89, 0] , ['2020', 1484193.59,0, 0, 14274.78, 1292.55, 0] ]); var options = { title: 'Total CPU Hours Per Year By Site', hAxis: {title: 'Year', titleTextStyle: {color: 'black'}} }; var chart = new google.visualization.AreaChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>

What I'm trying to do is get Derby data on the secondary axis (right axis), but looking at the API, I can’t see how to implement it.

+4
source share
1 answer

To use a multi-axis axis, you need to set the Axes values ​​in your options to declare that there is more than one axis, and the Series property to indicate which series go to any axis. The code for this is to replace your parameters with

  var options = { title: 'Total CPU Hours Per Year By Site', hAxis: {title: 'Year', titleTextStyle: {color: 'black'}} , series:[ {targetAxisIndex:1}, {targetAxisIndex:0}, {targetAxisIndex:0}, {targetAxisIndex:0}, {targetAxisIndex:0}, {targetAxisIndex:0} ], vAxes:[ {}, // Left axis {} // Right axis ] };

If you do this, you need to make sure that the graph is honest, changing from one axis to two axes seriously changes the impression the graph can give the audience, and can be used as a way of lying with statistics.

+6
source

More articles:


All Articles