Prevent Google Charts from zooming in - javascript

I'm building a column chart using Google Charts. It's a chart that shows the amount of pageviews for a specific page over the last 30 days. I create it with the following JavaScript code (full uncut fiddle here):
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Visits');
data.addRows([
// These data rows come from my database (timestamp + hits)
[new Date(1458691200 * 1000),null],
[new Date(1458777600 * 1000),null],
// This keeps repeating for each day, all with null value
[new Date(1461283200 * 1000),2],
[new Date(1461369600 * 1000),null]
]);
var options = {
chartArea: {
width: '70%',
height: '70%'
},
hAxis: {
format: 'd',
gridlines: {
count: 15
},
title: 'Day'
},
vAxis: {
baseline: 0,
format: '#',
gridlines: {
count: -1
},
title: 'Views',
viewWindowMode:'explicit',
viewWindow: {
max: 10,
min: 0
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
This works pretty well, it comes up with a chart that is close to what I need, but the graph is "zoomed in" on the only not-null data:
This way, it looks like the 2 views of April 22 are actually covering the period of April 12 until April 22, which is not the case.
How do I make the chart prevent from zooming in? Ideally, it should fit itself between the gridlines of the period it is about.


I don't think it is a zoom issue.
Looks like a bug / problem with the 'current' version.
Version '43' renders the expected chart...
google.charts.load('43', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'Visits');
data.addRows([
[new Date(1458691200 * 1000),null],
[new Date(1458777600 * 1000),null],
[new Date(1458864000 * 1000),null],
[new Date(1458950400 * 1000),null],
[new Date(1459036800 * 1000),null],
[new Date(1459123200 * 1000),null],
[new Date(1459209600 * 1000),null],
[new Date(1459296000 * 1000),null],
[new Date(1459382400 * 1000),null],
[new Date(1459468800 * 1000),null],
[new Date(1459555200 * 1000),null],
[new Date(1459641600 * 1000),null],
[new Date(1459728000 * 1000),null],
[new Date(1459814400 * 1000),null],
[new Date(1459900800 * 1000),null],
[new Date(1459987200 * 1000),null],
[new Date(1460073600 * 1000),null],
[new Date(1460160000 * 1000),null],
[new Date(1460246400 * 1000),null],
[new Date(1460332800 * 1000),null],
[new Date(1460419200 * 1000),null],
[new Date(1460505600 * 1000),null],
[new Date(1460592000 * 1000),null],
[new Date(1460678400 * 1000),null],
[new Date(1460764800 * 1000),null],
[new Date(1460851200 * 1000),null],
[new Date(1460937600 * 1000),null],
[new Date(1461024000 * 1000),null],
[new Date(1461110400 * 1000),null],
[new Date(1461196800 * 1000),null],
[new Date(1461283200 * 1000),2],
[new Date(1461369600 * 1000),null]
]);
var options = {
chartArea: {
width: '70%',
height: '70%'
},
hAxis: {
format: 'd',
gridlines: {
count: 15
},
title: 'Day'
},
vAxis: {
baseline: 0,
format: '#',
gridlines: {
count: -1
},
title: 'Views',
viewWindowMode:'explicit',
viewWindow: {
max: 10,
min: 0
}
}
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

Google Chart - negative/positive values annotation position

I've got the following column chart and I'd like to position annotations for positive values above and for negative ones bellow columns. How to do that?
Additional question for values and annotation formatting - how to achieve the formatting of annotations (values above and bellow columns) like vAxis?
google.charts.load('current',{callback:drawChart,'packages':['corechart'],'language':'hr'});
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('date','Datum');
data.addColumn('number','Vrijednost');
data.addColumn('number','Pred. prema preth. 5 dana');
data.addColumn('number','Pred. prema preth. 10 dana');
data.addColumn('number','Relativna promjena');
data.addRows([
[new Date('2017-08-03'),12.10260,12.09797,12.148753333333,0.3199602122016],
[new Date('2017-08-02'),12.06400,12.16005,12.176186666667,-0.69882870054079],
[new Date('2017-08-01'),12.14890,12.12988,12.160606666667,0.3129386508133],
[new Date('2017-07-31'),12.11100,12.13091,12.14988,-0.001651364026678],
[new Date('2017-07-28'),12.11120,12.1175,12.116093333333,0.11821210392746],
[new Date('2017-07-27'),12.09690,12.10942,12.079293333333,0.24113757271416],
[new Date('2017-07-26'),12.06780,12.10184,12.040733333333,0],
[new Date('2017-07-25'),12.06780,12.06525,11.992986666667,0.28753781205331],
[new Date('2017-07-24'),12.03320,12.02595,11.95908,0.18983547592086],
[new Date('2017-07-21'),12.01040,11.95357,11.932006666667,0.41468798073707],
[new Date('2017-07-20'),11.96080,11.9183,11.9194,0.1951832460733],
[new Date('2017-07-19'),11.93750,11.89151,11.914186666667,0.21154604904174],
[new Date('2017-07-18'),11.91230,11.89439,11.937766666667,0.1235543302851],
[new Date('2017-07-17'),11.89760,11.93811,11.967046666667,-0.36595680537295],
[new Date('2017-07-14'),11.94130,11.95136,11.972373333333,0.068716427416171],
[new Date('2017-07-13'),11.93310,11.96335,11.975713333333,-0.1848567987152],
[new Date('2017-07-12'),11.95520,11.94968,11.96142,-0.070212979370754],
[new Date('2017-07-11'),11.96360,11.95871,11.944226666667,0.19429834846403],
[new Date('2017-07-10'),11.94040,11.9698,11.93224,0.099761076413629],
[new Date('2017-07-07'),11.92850,11.96977,11.934313333333,-0.13478894228354],
[new Date('2017-07-06'),11.94460,11.93426,11.931026666667,-0.10036297944233],
[new Date('2017-07-05'),11.95660,11.86036,11.91198,0.66342251932174],
[new Date('2017-07-04'),11.87780,11.86771,11.918093333333,0.048011724968622],
[new Date('2017-07-03'),11.87210,11.88418,11.919446666667,-0.078273604120727],
[new Date('2017-06-30'),11.88140,11.92094,11.907506666667,-0.076531684958581]
]);
var ColumnOpt = {
height: 300,
title: 'Relativna promjena vrijednosti [%]',
annotations: {textStyle: {fontName: 'Tahoma', fontSize: 9}},
vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, format: "#.#'%'",
viewWindow: {min: data.getColumnRange(4).min-0.5}},
hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, showTextEvery: 5},
chartArea: {width: '80%', height: '80%'},
legend: {position: 'none'},
colors: ['purple']
};
var view2 = new google.visualization.DataView(data);
view2.setColumns([0,4,{calc:'stringify',sourceColumn:4,type:'string',role:'annotation'}]);
var container = document.getElementById('Chart2');
var chart2=new google.visualization.ColumnChart(container);
var observer = new MutationObserver(function () {
$.each($('text[text-anchor="start"]'), function (index, label) {
var labelValue = parseFloat($(label).text());
if (labelValue < 0 && $(label).attr('font-height') !== 'bold') {
var bounds = label.getBBox();
var chartLayout = container.getChartLayoutInterface();
$(label).attr('y',chartLayout.getYLocation(labelValue) - bounds.height - 8);
}
});
});
observer.observe(container,{childList: true,subtree: true});
chart2.draw(view2,ColumnOpt);
}
<div id="Chart2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

several issues to deal with here
on this chart, the annotations have attribute --> text-anchor="middle"
vs. text-anchor="start" on the other
to format the annotations, use a number formatter
var formatAnnotation = new google.visualization.NumberFormat({
pattern: ColumnOpt.vAxis.format
});
use a custom function on the view, vs. predefined "stringify" function
var view2 = new google.visualization.DataView(data);
view2.setColumns([0,4,{
calc: function (dt, row) {
return formatAnnotation.formatValue(dt.getValue(row, 4));
},
type: 'string',
role: 'annotation'
}]);
this poses a problem with commas in the number
need to replace with decimal for parseFloat to handle ok
there is also an issue with annotations overlapping
but this snippet should get you closer...
google.charts.load('current',{callback:drawChart,'packages':['corechart'],'language':'hr'});
function drawChart()
{
var data = new google.visualization.DataTable();
data.addColumn('date','Datum');
data.addColumn('number','Vrijednost');
data.addColumn('number','Pred. prema preth. 5 dana');
data.addColumn('number','Pred. prema preth. 10 dana');
data.addColumn('number','Relativna promjena');
data.addRows([
[new Date('2017-08-03'),12.10260,12.09797,12.148753333333,0.3199602122016],
[new Date('2017-08-02'),12.06400,12.16005,12.176186666667,-0.69882870054079],
[new Date('2017-08-01'),12.14890,12.12988,12.160606666667,0.3129386508133],
[new Date('2017-07-31'),12.11100,12.13091,12.14988,-0.001651364026678],
[new Date('2017-07-28'),12.11120,12.1175,12.116093333333,0.11821210392746],
[new Date('2017-07-27'),12.09690,12.10942,12.079293333333,0.24113757271416],
[new Date('2017-07-26'),12.06780,12.10184,12.040733333333,0],
[new Date('2017-07-25'),12.06780,12.06525,11.992986666667,0.28753781205331],
[new Date('2017-07-24'),12.03320,12.02595,11.95908,0.18983547592086],
[new Date('2017-07-21'),12.01040,11.95357,11.932006666667,0.41468798073707],
[new Date('2017-07-20'),11.96080,11.9183,11.9194,0.1951832460733],
[new Date('2017-07-19'),11.93750,11.89151,11.914186666667,0.21154604904174],
[new Date('2017-07-18'),11.91230,11.89439,11.937766666667,0.1235543302851],
[new Date('2017-07-17'),11.89760,11.93811,11.967046666667,-0.36595680537295],
[new Date('2017-07-14'),11.94130,11.95136,11.972373333333,0.068716427416171],
[new Date('2017-07-13'),11.93310,11.96335,11.975713333333,-0.1848567987152],
[new Date('2017-07-12'),11.95520,11.94968,11.96142,-0.070212979370754],
[new Date('2017-07-11'),11.96360,11.95871,11.944226666667,0.19429834846403],
[new Date('2017-07-10'),11.94040,11.9698,11.93224,0.099761076413629],
[new Date('2017-07-07'),11.92850,11.96977,11.934313333333,-0.13478894228354],
[new Date('2017-07-06'),11.94460,11.93426,11.931026666667,-0.10036297944233],
[new Date('2017-07-05'),11.95660,11.86036,11.91198,0.66342251932174],
[new Date('2017-07-04'),11.87780,11.86771,11.918093333333,0.048011724968622],
[new Date('2017-07-03'),11.87210,11.88418,11.919446666667,-0.078273604120727],
[new Date('2017-06-30'),11.88140,11.92094,11.907506666667,-0.076531684958581]
]);
var ColumnOpt = {
height: 300,
title: 'Relativna promjena vrijednosti [%]',
annotations: {alwaysOutside: true, textStyle: {fontName: 'Tahoma', fontSize: 9}, stem: {length: 4, color: 'transparent'}},
vAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, format: "#.#'%'",
viewWindow: {min: data.getColumnRange(4).min-0.5}},
hAxis: {textStyle: {fontName: 'Tahoma', fontSize: 9}, showTextEvery: 5},
chartArea: {width: '80%', height: '80%'},
legend: {position: 'none'},
colors: ['purple']
};
var formatAnnotation = new google.visualization.NumberFormat({
pattern: ColumnOpt.vAxis.format
});
var view2 = new google.visualization.DataView(data);
view2.setColumns([0,4,{
calc: function (dt, row) {
return formatAnnotation.formatValue(dt.getValue(row, 4));
},
type: 'string',
role: 'annotation'
}]);
var container = document.getElementById('Chart2');
var chart2=new google.visualization.ColumnChart(container);
var observer = new MutationObserver(function () {
$.each($('text[text-anchor="middle"]'), function (index, label) {
var labelValue = parseFloat($(label).text().replace(',', '.'));
if (labelValue < 0 && $(label).attr('fill') === '#800080') {
var bounds = label.getBBox();
var chartLayout = chart2.getChartLayoutInterface();
$(label).attr('y',chartLayout.getYLocation(labelValue) + bounds.height);
}
});
});
observer.observe(container,{childList: true,subtree: true});
chart2.draw(view2,ColumnOpt);
}
<div id="Chart2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>

Error Date type (Google visualization)

This is my code for displaying the chart
$scope.course_chart = function(response){
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'pv_date');
data2.addColumn('string', 'pageviews');
_.each(response.result.rows, function(item){
var formattedDate = item[0].slice(0, 4) + ", " + item[0].slice(4, 6) + ", " + item[0].slice(6, 8);
var date_format = new Date(formattedDate);
date_format = $filter('date')(date_format);
data2.addRow([
date_format,
item[1]
]);
});
var chart = new google.visualization.AreaChart(document.querySelector('#course_chart'));
chart.draw(data2, options2);
};
google.load('visualization', '1', {packages:['corechart'], callback: $scope.course_chart});
My date_format value is Sep 27, 2016
what is the requirement output for this data type "date" in google visualization?

if you have column with data type: 'date'
then you must pass a date object --> new Date()
you can use any of the javascript date contructors
such as...
new Date(2016, 8, 26)
remember in javascript, months are zero based (8 = Sept)
or...
new Date('09/26/2016')
this creates the date from a string and does not set the format when displayed
adding rows to the data table...
data2.addColumn('date', 'pv_date');
data2.addRow(new Date(2016, 8, 26));
if you already have the date formatted, you can use object notation when adding rows
(v = value, f = formatted value)...
data2.addRow({
v: new Date(2016, 8, 26)
f: 'Sep 26, 2016'
});
you can also use the DateFormat provided by google
data2.addRow(new Date(2016, 8, 26));
var formatDate = new google.visualization.DateFormat({
pattern: 'MMM d, yyyy'
});
formatDate.format(data2, 0);
finally, you can provide raw dates and let the axis format the dates
i.e. hAxis.format: 'MMM d, yyyy'...
here are a few examples using each scenario...
1. use hAxis.format
google.charts.load('current', {
callback: function () {
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'pv_date');
data2.addColumn('number', 'pageviews');
data2.addRows([
[new Date(2016, 8, 26), 100],
[new Date(2016, 8, 27), 101]
]);
var options = {
hAxis: {
format: 'MMM d, yyyy'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data2, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
2. use DateFormat
google.charts.load('current', {
callback: function () {
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'pv_date');
data2.addColumn('number', 'pageviews');
data2.addRows([
[new Date(2016, 8, 26), 100],
[new Date(2016, 8, 27), 101]
]);
var formatDate = new google.visualization.DateFormat({
pattern: 'MMM d, yyyy'
});
formatDate.format(data2, 0);
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data2);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
3. use Object notation {v: , f:}
google.charts.load('current', {
callback: function () {
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'pv_date');
data2.addColumn('number', 'pageviews');
data2.addRows([
[{v: new Date(2016, 8, 26), f: 'Sep 26, 2016'}, 100],
[{v: new Date(2016, 8, 27), f: 'Sep 27, 2016'}, 101]
]);
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data2);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
also, for AreaChart, the columns after the first should be of type: 'number' -- not 'string'

Google Charts range filter control for date format

I have a page that displays data using LineChart with a ChartRangeFilter control.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['controls', 'charteditor']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
for (var i = 0; i < 12; i++) {
data.addRow([new Date(2016, i,1), Math.floor(Math.random() * 200), Math.floor(Math.random() * 200)]);
}
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
}
},
chartView: {
columns: [0, 1]
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div'
});
function setOptions (wrapper) {
wrapper.setOption('width', 620);
wrapper.setOption('chartArea.width', '80%');
}
setOptions(chart);
dash.bind([control], [chart]);
dash.draw(data);
google.visualization.events.addListener(control, 'statechange', function () {
var v = control.getState();
document.getElementById('dbgchart').innerHTML = v.range.start+ ' to ' +v.range.end;
return 0;
});
}
</script>
<div id="dashboard">
<div id="chart_div"></div>
<div id="control_div"></div>
<p><span id='dbgchart'></span></p>
</div>
And here's a working JSFiddle.
Here the control starts from Jan 1. When I change start range to Jan 2, the graph date starts to show from Feb. I could not identify the reason for this. Can anyone help me in this? In the end range it is working fine it seems.

In this example, on 'statechange' -- the value for the begin and end months, for the selected chart range, are modified to ensure data points are plotted.
The chart is then redrawn with updated options.
google.charts.load('44', {
callback: drawChart,
packages: ['controls', 'corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'Y1');
data.addColumn('number', 'Y2');
data.addRow([new Date(2016, 0, 1), 1,123]);
data.addRow([new Date(2016, 1, 1), 6,42 ]);
data.addRow([new Date(2016, 2, 1), 4,49 ]);
data.addRow([new Date(2016, 3, 1), 23,486 ]);
data.addRow([new Date(2016, 4, 1), 89,476 ]);
data.addRow([new Date(2016, 5, 1), 46,444 ]);
data.addRow([new Date(2016, 6, 1), 178,442 ]);
data.addRow([new Date(2016, 7, 1), 12,274 ]);
data.addRow([new Date(2016, 8, 1), 123,4934 ]);
data.addRow([new Date(2016, 9, 1), 144,4145 ]);
data.addRow([new Date(2016, 10, 1), 135,946 ]);
data.addRow([new Date(2016, 11, 1), 178,747 ]);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 620,
chartArea: {
width: '80%'
},
hAxis: {
format: 'MMM',
slantedText: false,
maxAlternation: 1
}
}
});
function setOptions() {
var firstDate;
var lastDate;
var v = control.getState();
if (v.range) {
document.getElementById('dbgchart').innerHTML = v.range.start + ' to ' + v.range.end;
firstDate = new Date(v.range.start.getTime() + 1);
lastDate = new Date(v.range.end.getTime() - 1);
data.setValue(v.range.start.getMonth(), 0, firstDate);
data.setValue(v.range.end.getMonth(), 0, lastDate);
} else {
firstDate = data.getValue(0, 0);
lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
}
var ticks = [];
for (var i = firstDate.getMonth(); i <= lastDate.getMonth(); i++) {
ticks.push(data.getValue(i, 0));
}
chart.setOption('hAxis.ticks', ticks);
chart.setOption('hAxis.viewWindow.min', firstDate);
chart.setOption('hAxis.viewWindow.max', lastDate);
if (dash) {
chart.draw();
}
}
setOptions();
google.visualization.events.addListener(control, 'statechange', setOptions);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([control], [chart]);
dash.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart_div"></div>
<div id="control_div"></div>
<p><span id='dbgchart'></span></p>
</div>

It is because you only have one value for January (1st the jan) and when you set the start range to jan 2 the next value in your data if for Feb 1st.
The month value for month in the data object is zero-based.

Google charts formatter not modifying tooltip

i am trying to create a line chart using google charts libraries.
The data contains, date (x axis), number (col 1), number (col 2), float (col 3).
I want to display two decimals on the 3rd column tooltip while keeping its y axis 0 to 100, this is my current code (running here https://jsfiddle.net/uqh56hsu/1/):
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Hours');
data.addColumn('number', 'col1');
data.addColumn('number', 'col2');
data.addColumn('number', 'percent');
data.addRows([
[new Date(1454950800*1000),0,0,0],[new Date(1454947200*1000),0,0,0],[new Date(1454943600*1000),2,0,0.00],[new Date(1454940000*1000),24,1,4.17],[new Date(1454936400*1000),12,1,8.33],[new Date(1454932800*1000),64,4,6.25],[new Date(1454929200*1000),176,11,6.25],[new Date(1454925600*1000),142,7,4.93],[new Date(1454922000*1000),114,7,6.14],[new Date(1454918400*1000),0,0,0],[new Date(1454914800*1000),0,0,0],[new Date(1454911200*1000),0,0,0],[new Date(1454907600*1000),0,0,0],[new Date(1454904000*1000),0,0,0],[new Date(1454900400*1000),0,0,0],[new Date(1454896800*1000),0,0,0],[new Date(1454893200*1000),0,0,0],[new Date(1454889600*1000),0,0,0],[new Date(1454886000*1000),0,0,0],[new Date(1454882400*1000),0,0,0],[new Date(1454878800*1000),0,0,0],[new Date(1454875200*1000),0,0,0],[new Date(1454871600*1000),180,10,5.56], ]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 3);
var options = {
width: 900,
height: 500,
backgroundColor: '#f1f1f1',
colors: ['#ff851b', '#03a9f4', '#8dc859'],
dateFormat: 'H',
vAxes:[
{ titleTextStyle: {color: '#FF0000'}},
{ titleTextStyle: {color: '#FF0000'}, minValue: 0, maxValue: 100, format: '#\'%\'', viewWindowMode : 'explicit', viewWindow:{
max:100,
min:0
}}
],
series:[
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:1}
]
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
I've tried adding the formatter code earlier and later in the code, trying to apply it to other columns, etc, nothing seem to work. The 3rd column tooltip always gets the decimals removed.
What am I doing wrong?

The format is being set in the vAxes option, which was overriding the formatter...
Just set the format to --> format: '#,##0.00\'%\''
No need for a formatter here...
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Hours');
data.addColumn('number', 'col1');
data.addColumn('number', 'col2');
data.addColumn('number', 'percent');
data.addRows([
[new Date(1454950800*1000),0,0,0],
[new Date(1454947200*1000),0,0,0],
[new Date(1454943600*1000),2,0,0.00],
[new Date(1454940000*1000),24,1,4.17],
[new Date(1454936400*1000),12,1,8.33],
[new Date(1454932800*1000),64,4,6.25],
[new Date(1454929200*1000),176,11,6.25],
[new Date(1454925600*1000),142,7,4.93],
[new Date(1454922000*1000),114,7,6.14],
[new Date(1454918400*1000),0,0,0],
[new Date(1454914800*1000),0,0,0],
[new Date(1454911200*1000),0,0,0],
[new Date(1454907600*1000),0,0,0],
[new Date(1454904000*1000),0,0,0],
[new Date(1454900400*1000),0,0,0],
[new Date(1454896800*1000),0,0,0],
[new Date(1454893200*1000),0,0,0],
[new Date(1454889600*1000),0,0,0],
[new Date(1454886000*1000),0,0,0],
[new Date(1454882400*1000),0,0,0],
[new Date(1454878800*1000),0,0,0],
[new Date(1454875200*1000),0,0,0],
[new Date(1454871600*1000),180,10,5.56]
]);
var options = {
width: 900,
height: 500,
backgroundColor: '#f1f1f1',
colors: ['#ff851b', '#03a9f4', '#8dc859'],
dateFormat: 'H',
vAxes:[
{
titleTextStyle: {color: '#FF0000'}
},
{
titleTextStyle: {
color: '#FF0000'
},
minValue: 0,
maxValue: 100,
format: '#,##0.00\'%\'', // set format here -- formatter not needed
viewWindowMode : 'explicit',
viewWindow: {
max:100,
min:0
}
}
],
series:[
{targetAxisIndex:0},
{targetAxisIndex:0},
{targetAxisIndex:1}
]
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="linechart_material"></div>

Dual y axes in Google charts

I am trying to use dual y axes with Google charts.I understand the basics and how it works.
On one y axis, I want BMI values and on other Weight Values.
I am taking out data from SQL database. However, BMI and Weight are itself values in a column called ReadingName.
So, if I use the query,
select * from table where ReadingName = 'BMI' or ReadingName = Weight
I get the result set which is serialized into JSON and then forwarded to render charts which again would be retrieved using column Name only.
Now, to have observation values for BMI on one yaxis and Weight on other, as per the example on GoogleCharts website, I need to have them as columns.
But I have them only as different values of same column called ReadingType.Is there a work around possible ?
This is how it should look like :

Unfortunately, you'll have to massage the data into a format it understands. The DataTable class provides lots of methods for populating but here is an example:
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
// Start with long data
var rawData = [
[new Date(2014, 8, 1), "Weight", 140],
[new Date(2014, 8, 1), "BMI", 5],
[new Date(2014, 8, 15), "Weight", 130],
[new Date(2014, 8, 15), "BMI", 4],
[new Date(2014, 9, 1), "Weight", 120],
[new Date(2014, 9, 1), "BMI", 3],
[new Date(2014, 9, 15), "Weight", 120],
[new Date(2014, 9, 15), "BMI", 3]
];
// Create a wide table from the long data
var data = new google.visualization.DataTable();
data.addColumn("date", "Date");
data.addColumn("number", "BMI");
data.addColumn("number", "Weight");
var lastDate = null;
var currentRow = null;
for (var i=0; i < rawData.length; i++) {
var date=rawData[i][0];
var col=rawData[i][1];
var value=rawData[i][2];
if (lastDate == null) {
// First pass
currentRow = [date, null, null];
}
else if (lastDate != date) {
data.addRow(currentRow);
currentRow = [date, null, null];
}
if (col=="BMI") currentRow[1] = value;
else if (col=="Weight") currentRow[2] = value;
lastDate = date;
}
if (currentRow != null) data.addRow(currentRow);
var options = {
title: 'Wight & BMI',
vAxes: [{
title: "Weight",
minValue: 0
}, {
title: "BMI",
minValue: 0
}],
series: {
0: { targetAxisIndex:0 },
1: { targetAxisIndex:1 }
},
interpolateNulls: true
}
var chart = new google.visualization.LineChart(document.getElementById("chart"));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart" style="width: 900px; height: 300px;"></div>

Categories