I'm trying to display a chart with 2 diferents Y-Axis but I always get a chart with 1 Y-axis. I was reading different solutions but nothing work... I think that the problem is that I have a JSON data table. The format of this data is :
{"cols":[{"label":null,"type":"number"},{"label":"I rated max","type":"number"},{"label":"Rdc max","type":"number"}],"rows":[{"c":[{"v":1},{"v":0.5},{"v":0.32}]},{"c":[{"v":1.5},{"v":0.63},{"v":0.76}]},...
I tried with the vAxes option but it didn't work...some idea?
thanks!
EDIT: my complete code is this:
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'I/R-L chart',
hAxis: {title: 'L value [µH]', titleTextStyle: {color: 'red'} },
//vAxis: {
// title: "I rated max/ Rdc max",
// maxValue:1.5
//},
vAxes: { 0: {logScale: false}, 1: {logScale: false}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:0}},
pointSize:8
}
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
The problem is twofold:
1) ScatterCharts don't support multiple vertical axes. Depending on the structure of your data (and yours looks fine for this if the sample DataTable above is representative of your data), you can emulate a ScatterChart using a LineChart. You just need to set the "lineWidth" option to 0. 2) You need to assign at least one data series to each axis, or the right vAxis won't draw.
Try this:
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(<?=$jsonTable?>);
var options = {
title: 'I/R-L chart',
hAxis: {title: 'L value [µH]', titleTextStyle: {color: 'red'} },
vAxes: { 0: {logScale: false}, 1: {logScale: false}},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1}
},
pointSize:8,
lineWidth: 0
}
// Instantiate and draw our chart, passing in some options.
// Do not forget to check your div ID
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments