Develop Reference

Double Y axis ticks for Google Charts

I am trying to set ticks for a double y-axis line graph but either the graph wont load, it it loads exactly the same. Any help will be greatly appreciated
Goal is to set Price ticks: [0.002, 0.004. 0.006. 0.008], and Volume increment by lets say 1000
Also having issues with prices for instance being: 0.00242, 0.00521 all showing up as 0.1
<?php
$sql = "SELECT Timestamp, LastPrice, Volume FROM vol";
$result = $dbconnect->query($sql);
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Timestamp','LastPrice','Volume'],
<?php
while($row = mysqli_fetch_assoc($result)){
echo "[ '".$row["Timestamp"]."', ".$row["LastPrice"].", ".$row["Volume"].", ],";
}
echo $row["LastPrice"];
?>
]);
var materialOptions = {
chart: {
},
width: 600,
height: 300,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'LastPrice' },
1: {axis: 'BaseVolume'}
},
vAxis: {1: {ticks:[0, 0.002, 0.004, 0.006]} },
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
LastPrice: {label: 'Price'},
BaseVolume: {label: 'Volume'}
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
button.innerText = 'Classic';
button.onclick = drawClassicChart;
}
drawMaterialChart();
}
</script>

there are several configuration options that aren't supported by Material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.ticks
see --> Tracking Issue for Material Chart Feature Parity
instead, recommend using a Classic chart with the following option...
theme: 'material'
for dual y-axis charts, use the series option to specify the target axis
series: {
1: {
targetAxisIndex: 1,
}
},
use option vAxes, with an e, to specify ticks for each y-axis
vAxes: {
0: {
ticks:[0, 1000, 2000, 3000],
title: 'Last Price'
},
1: {
ticks:[0, 0.002, 0.004, 0.006],
title: 'Base Volume'
}
}
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'string'},
{label: 'y0', type: 'number'},
{label: 'y1', type: 'number'}
],
rows: [
{c:[{v: 'row 0'}, {v: 1800}, {v: 0.00242}]},
{c:[{v: 'row 1'}, {v: 2200}, {v: 0.00521}]},
{c:[{v: 'row 2'}, {v: 2800}, {v: 0.00343}]},
{c:[{v: 'row 3'}, {v: 2800}, {v: 0.00441}]},
{c:[{v: 'row 4'}, {v: 2300}, {v: 0.00532}]}
]
});
var container = document.getElementById('chart');
var chart = new google.visualization.LineChart(container);
chart.draw(data, {
width: 600,
height: 300,
series: {
1: {
targetAxisIndex: 1,
}
},
theme: 'material',
vAxes: {
0: {
ticks:[0, 1000, 2000, 3000],
title: 'Last Price'
},
1: {
ticks:[0, 0.002, 0.004, 0.006],
title: 'Base Volume'
}
}
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Charts Legend Position Not Working

This is driving me nuts. I can't get the legend to move at all. This produces a chart with the legend in it's default location on the right.
I clearly have legend position declared as "bottom" but it's not working. Yet this is exactly what the docs say.
google.charts.load('current',{'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
['Smith', 35, {v: -.1126, f: '-11.26%'} ],
['Chalk', 53, {v: -.0126, f: '-1.26%'} ],
['Hank', 84, {v: -.0252, f: '-2.52%'} ],
['Jordan', 46, {v: .0688, f: '6.88%'} ],
['Bernie', 1, {v: 0, f: '-'} ],
['Ralph', 105, {v: -.0548, f: '-5.48%'} ]
]);
var options = {
series: {
0: {axis: 'Quotes'},
1: {axis: 'Percent'}
},
axes: {
y: {
Quotes: {label: 'Subdmission Count'},
Percent: {label: '% Percent'}
}
},
legend: {
position : 'bottom'
}
};
var table = new google.charts.Bar(document.getElementById('table1'));
table.draw(data, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id='table1'></div>
</body>
</html>

legend.position: ['top', 'bottom'] -- are just a couple of the many options that don't work on material charts
see Tracking Issue for Material Chart Feature Parity #2143 for an extensive list
however, these options will work on a core chart...
core --> google.visualization.ColumnChart -- using --> packages: ['corechart']
material --> google.charts.Bar -- using --> packages: ['bar']
there is also an option to get a core chart close to the look & feel of material
theme: 'material'
see following working snippet using core chart instead...
google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Count');
data.addColumn('number', 'Variance');
data.addRows([
['Smith', 35, {v: -.1126, f: '-11.26%'} ],
['Chalk', 53, {v: -.0126, f: '-1.26%'} ],
['Hank', 84, {v: -.0252, f: '-2.52%'} ],
['Jordan', 46, {v: .0688, f: '6.88%'} ],
['Bernie', 1, {v: 0, f: '-'} ],
['Ralph', 105, {v: -.0548, f: '-5.48%'} ]
]);
var options = {
chartArea: {
height: '56%'
},
series: {
1: {
targetAxisIndex: 1
}
},
hAxis: {
title: 'Name'
},
vAxes: {
0: {
title: 'Submission Count'
},
1: {
title: '% Percent'
}
},
theme: 'material',
legend: {
position : 'bottom'
}
};
var table = new google.visualization.ColumnChart(document.getElementById('table1'));
table.draw(data, options);
}
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id='table1'></div>
</body>
</html>

{position: 'left'} works fine in your example, so the only option left is that 'bottom' this is not supported.
Similar discussion on guthub mentions that it is not supported for another chart type and not planned to be implemented: https://github.com/google/google-visualization-issues/issues/1964

Easiest Way to AutoRefresh Google Charts embeded within a page

I have two files, one outputting data from a MySQL database and one drawing a Google Graph within a page with other metrics:
grab_twitter_stats.php Output:
[15, 32], [14, 55], [13, 45], [12, 52], [11, 57], [10, 55], [9, 58], [8, 42], [7, 44], [6, 40], [5, 54], [4, 52], [3, 60], [2, 71], [1, 43],
index.php Output:
<div id="curve_chart" style="width: 900px; height: 500px">
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Minutes', 'Tweets'],
<?php require('grab_twitter_stats.php');?>
]);
var options = {
title: 'Tweets in last 15 Minutes',
curveType: 'function',
hAxis: {
title: 'Last 15 Minutes',
direction: '-1'
},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</div>
This draws a graph that shows tweets in the last 15 minutes. I can get the graph to appear once, but upon trying to load a SetInterval, it does not refresh the Google Graph on the interval. I have tried wrapping the entire drawChart() function in it, and it doesn't seem to be working. I tried using AJAX but it is not formatted in JSON so ajax doesn't like it. Any suggestions on the easiest way to make this graph auto refresh?

although not JSON, you can still use ajax, even with plain text
something like this should get you close...
google.charts.load('current', {
callback: function () {
drawChart();
setInterval(drawChart, (15 * 60 * 1000));
function drawChart() {
$.ajax({
url: 'grab_twitter_stats.php',
type: 'get',
success: function (txt) {
// check for trailing comma
if (txt.slice(-1) === ',') {
txt = txt.substring(0, txt.length - 1);
}
var txtData = JSON.parse('[["Minutes", "Tweets"],' + txt + ']');
var data = google.visualization.arrayToDataTable(txtData);
var options = {
title: 'Tweets in last 15 Minutes',
curveType: 'function',
hAxis: {
title: 'Last 15 Minutes',
direction: '-1'
},
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
});
}
},
packages: ['corechart']
});

How to format a "target" line in a google combo chart to go across the whole chart area

I have a simple google combo chart like this
https://jsfiddle.net/bxd6ngd1/
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'target'],
['2013', 1000, 1100],
['2014', 1170, 1100],
['2015', 660, 1100]
]);
var options = {
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Can I format the red "target" line to go across the whole chart from right to left and NOT start in the middle of the first column and end in the middle of the last one?

Google Pie Charts Label

http://j1309.hizliresim.com/1f/v/t1ux0.png
Thats my chart and my code;
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
how can i make my labels like that picture. i want it shows values outside of chart
http://o1309.hizliresim.com/1f/v/t1uy7.png

Use in your options:
var options = {
title: 'My Daily Activities',
legend: {position: 'labeled'}
};
More Information here:
https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart