Google charts secondary axis line charts
Question
I'm currently learning a bit of google charts with web editting to broaden my knowledge and I'm having a issue I can't 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's data on the secondary axis (the right axis), but looking through the API I cant see how to implement it.
1 answers
solution1
6 ACCPTED 2012-07-06 08:36:01
To use multi 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 what series goes to which axis. The code to make this happen is to replace your options 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 are doing this you need to make sure that the graph is an honest one, the change from one axis to two axis seriously changes the impression that the graph can give to the audience and can be used as a way of lying with statistics.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.