The codes below works for dual-y scatter (left and right y-scales). What I
want to do is dual-y and dual-x (input 2 x series and 2 y series like this
/* var data = new google.visualization.arrayToDataTable([
['Depth_m', 'Depth_ft', 'TempC', 'TempF'],
[2500, 8202, 0, 32],
[3250, 10663, 150, 302],
[3750, 12303, 180, 356],
[4000, 13123, 220, 428],
[4250, 13944, 350, 662]
]); */
Observation - it seems series 0 and 1 refer to respective y values.
Q: is there a way to take 2 x-series into Google chart for x-axis labels
at the top and bottom accordingly?
Thanks.
// codes for dual-y scatter chart
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js";></script>
<script type="text/javascript">
google.charts.load("current", {packages: ["scatter"]});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['TempC', 'Depth_m', 'Depth_ft'],
[0, 2500, 8202],
[150, 3250, 10663],
[180, 3750, 12303],
[220, 4000, 13123],
[350, 4250, 13944]
]);
var options = {
width: 800,
chart: {
title: 'Temperature vs Depth',
subtitle: 'Metric unit on the left, Imperial on the right'
},
series: {
0: { axis: 'Depth_m'}, // refer to y-values
1: { axis: 'Depth_ft'}
//2: { axis: 'TempC' },
//3: { axis: 'TempF' }
},
axes: {
x: {
Depth_m: {label: 'meter'},
Depth_ft: {label: 'feet'},
}
/* y: {
TempC: {label: 'Celsius'} // Bottom x-axis.
//TempF: {label: 'Fahrenheit'} // Top x-axis.
} */
}
};
var
chart = new google.charts.Scatter(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
On Saturday, May 18, 2019 at 3:46:27 AM UTC-5 Erez V. wrote:
> Problem after following similar example of dual y axis in google
> documantation
>
> I copied a working example in google documentation and replaced the
> relevant code to my chart. I got an error :
> Data column(s) for axis #0 cannot be of type string
>
> HHere is the code
> Here is the code:
>
> $items_b = get_balance_of_all_couples();
> $items_c = count_trades_of_all_couples();
>
>
> foreach($items_b as $key => $val_b){
> $data[$key][0] = $val_b['item'];
>
> $data[$key][1] = (float)$val_b['profit'];
> }
>
>
> foreach($items_c as $key => $val_c){
> $data[$key][2] = (float)$val_c['trades'];
> }
>
>
> $data[0] = array('item', 'profit', 'trades');
>
>
> // website with solution
>
>
> ///https://blog.programster.org/php-converting-data-for-google-charts
>
>
> ?><html>
> <head>
> <script type="text/javascript" src="
> https://www.gstatic.com/charts/loader.js";></script>
> <script src="
> https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js";></script
> >
> <script type="text/javascript">
>
>
> //////// Convert PhP $data array to JavaScript array //////////
>
> var datum = <?php echo json_encode($data); ?>;
>
>
>
> google.charts.load("current", {packages:['corechart']});
> google.charts.setOnLoadCallback(drawVisualization);
>
>
>
>
>
>
> //////////////////////// Drawing the graph //////////////////////
> function drawVisualization() {
>
>
>
> var data = google.visualization.arrayToDataTable([datum]);
>
> var Options = {
>
> title:'Profit / Loss (left) and trades count (right) of all
> traded couples',
>
> series: {
> 0: {targetAxisIndex: 0},
> 1: {targetAxisIndex: 1}
> },
>
> vAxes: {
> 0: {title: 'Profit', textStyle: {color: 'DodgerBlue', bold: true}},
> 1: {title: 'Trades', textStyle: {color: 'Tomato', bold: true}}
> },
>
>
> hAxis: { title: 'Traded Couples',
>
> slantedText: true,
> slantedTextAngle: 45
> },
>
>
>
> };
>
> var chart = new google.visualization.ColumnChart(document.
> getElementById('chart_div'));
> chart.draw(data, Options);
> }//END CHART
>
> On Saturday, May 11, 2019 at 6:21:44 PM UTC+3, Erez V. wrote:
>>
>> Hello,
>> I created a dual y-axis
>> Ireceived a chart with dual y-axis but with 2 separate x axes.
>> Here is the code:
>>
>> google.charts.load('current', {'packages':['corechart']});
>> google.charts.setOnLoadCallback(drawVisualization);
>>
>>
>>
>>
>>
>>
>> //////////////////////// Drawing the graph //////////////////////
>> function drawVisualization() {
>>
>> var data = new google.visualization.DataTable();
>> data.addColumn('string', 'Couple');
>> data.addColumn('number', 'profit');
>> data.addColumn('number','trades');
>>
>> for(var i = 0; i < datum_b.length; i++){
>> datum_b[i].profit=parseFloat(datum_b[i].profit);
>> datum_c[i].trades=parseFloat(datum_c[i].trades);
>> var obj_b = datum_b[i];
>> var obj_c = datum_c[i];
>> data.addRow([obj_b.item, obj_b.profit, obj_c.trades]);
>> }
>>
>> var Options = {
>>
>> series: {
>> 0: {targetAxisIndex: 0},
>> 1: {targetAxisIndex: 1}
>> },
>> title:'Profit / Loss (left) and trades count (right) of all
>> traded couples',
>> vAxes: {
>>
>> 0: {title: 'Profit', textStyle: {color: 'DodgerBlue', bold:
>> true}},
>> 1: {title: 'Trades', textStyle: {color: 'Tomato', bold: true
>> }}
>> },
>>
>>
>>
>>
>>
>> hAxis: {title: 'Traded Couples ', direction: 1,
>> slantedText: true,
>> slantedTextAngle: 45
>> }
>>
>>
>> };
>>
>>
>>
>>
>> var chart = new google.visualization.ColumnChart(document.
>> getElementById('chart_div'));
>> chart.draw(data, Options);
>> }//END CHART 1
>>
>> Here is a print screen of the result:
>>
>> [image: dual y.png]
>>
>>
>> how do I change it to a single 0 x-axis
>>
>>
>> Can I change the title of the y-axes color to the legend color?
>>
>>
>> Thanks
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/c9dc5f7e-9e39-4176-8bd7-88b1a6801a44n%40googlegroups.com.
