I have a Google Chart (column-chart) showing a single dated (Jan-2010 = 2010-01-01) column - but the resulting column seems to run from 1-Jul-09 through to 1-Jul-10 (note this seems to change depending on the width of the screen); how can I fix this so that the column sits only on the 01-Jan-2010 date? (**Note, the dates/values are variable and can include one or hundreds of column values so we CANNOT simply hard code this or change the column type from 'date' to 'string').
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
A demonstrator for this can be found on https://jsfiddle.net/Abeeee/d5fojtp2/34/
you can add custom ticks to ensure each column "sits" on the correct date.
the ticks option expects an array of values.
we can use DataTable method --> getDistinctValue(colIndex)
to return the date values from the data table.
var xTicks = data.getDistinctValues(0);
hAxis: {
slantedText: false,
format: 'd.MMM.yy', <---- changed from 'd/MMM/yy' to avoid line breaks
ticks: xTicks
},
see following working snippet...
function doTest() {
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var xTicks = data.getDistinctValues(0);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
ticks: xTicks
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
}
window.addEventListener('resize', doTest);
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(doTest);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Google Charts</h1>
<div id="chart_div"></div>
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>
I have a CSV file with datetime timestamps (in milliseconds from 1970) as X axis separed tis a comma ',' and an associated Temperature value as Y axis.
ie :
1485097200000,22.5
1485098100000,23.8
1485099000000,24.2
etc ...
From that kind of CSV file i would like to generate a google graph code like this :
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
google.load('visualization', '1', {'packages':['annotatedtimeline']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperatures');
data.addRows([
[new Date(1485097200000), 22.5],
[new Date(1485098100000), 23.8],
[new Date(1485099000000), 24.2]
]);
var options = {
title: 'Temperature measured every 15 minutes',
width: 900,
height: 500,
hAxis: {
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'MMM dd, yyyy' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change">Click to change the format</button>
<div id="chart_div"></div>
Would you please tell if it is possible and how i could do it so , i'm newbie.
Regards,
Here is an example for how to get the get the data from a CSV file (in this case come from a string but the principal is the same.
The CSV file should look like this:
1486727700000,5\n1486728600000,7\n1486729200000,3\n1486729800000,1\n1486730400000,3\n1486731000000,4\n1486731600000,3\n1486732200000,4\n1486732800000,4
Also you need to extract the data from the file so here is the function.
function getData(csv) {
var output = [];
csv.split(/\n/).forEach(function(row) {
var cells = row.split(','),
date = new Date(parseInt(cells[0])),
value = parseFloat(cells[1]);
output.push([date, value]);
});
return output;
}
And live demo here:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// google.load('visualization', '1', {'packages':['annotatedtimeline']});
// google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperatures');
// data.addRows([
// [new Date(2017, 1, 10, 13, 55), 5], [new Date(2017, 1, 10, 14, 10), 7], [new Date(2017,1, 10,14,20), 3],
// [new Date(2017, 1, 10, 14, 30), 1], [new Date(2017, 1, 10, 14,40), 3], [new Date(2017, 1, 10, 14,50), 4],
// [new Date(2017, 1, 10,15,00), 3], [new Date(2017, 1, 10,15,10), 4], [new Date(2017, 1, 10,15,20), 2]
// ]);
data.addRows(getData(csvFile));
var options = {
title: 'Temperature measured every 15 minutes',
width: 900,
height: 500,
hAxis: {
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ? options.hAxis.format = 'MMM dd, yyyy' : options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
var csvFile = '1486727700000,5\n1486728600000,7\n1486729200000,3\n1486729800000,1\n1486730400000,3\n1486731000000,4\n1486731600000,3\n1486732200000,4\n1486732800000,4';
function getData(csv) {
var output = [];
csv.split(/\n/).forEach(function(row) {
var cells = row.split(','),
date = new Date(parseInt(cells[0])),
value = parseFloat(cells[1]);
output.push([date, value]);
});
return output;
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change">Click to change the format</button>
<div id="chart_div"></div>
http://output.jsbin.com/coxemay
Update
How to get the CSV from file using ajax
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(csvData) {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperatures');
getData(function(csvData) {
data.addRows(csvData);
var options = {
title: 'Temperature measured every 15 minutes',
width: 900,
height: 500,
hAxis: {
gridlines: {count: 15}
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
var button = document.getElementById('change');
button.onclick = function () {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ? options.hAxis.format = 'MMM dd, yyyy' : options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
function getData(callback) {
$.get('https://gist.githubusercontent.com/moshfeu/e3fd00cb57ae5b5cffbda44422dff112/raw/bcadcdfb5a532cc5711949a60cce639b2da235e6/csv-file', function(csv) {
var output = [];
csv.split(/\n/).forEach(function(row) {
var cells = row.split(','),
date = new Date(parseInt(cells[0])),
value = parseFloat(cells[1]);
output.push([date, value]);
});
callback(output);
});
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="change">Click to change the format</button>
<div id="chart_div"></div>
http://jsbin.com/coxemay/3/edit?html,js,console
I have a Google Graph that shows Temperatures values / Epoch Datetime
I would like to toggle with a button the dates in X axis in 24h format like this : 'dd/MM/yyyy HH:mm' instead of current AM / PM format.
For some reasons, I can't get it working, dates stay in AM PM.
Can you tell me what is wrong ?
https://jsfiddle.net/lcoulon/ds7vgLvd/
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Temperatures');
data.addRows([
[new Date(1485320400000), 22.5],
[new Date(1485342000000), 23.8],
[new Date(1485360000000), 24.2],
[new Date(1485363600000), 21.0],
[new Date(1485410400000), 25.5],
[new Date(1485439200000), 23.0],
]);
var options = {
title: 'X Axis datetime epoch (ms) / Y Axis Temperature (°C)',
width: 900,
height: 500,
hAxis: {
gridlines: {
count: 15
}
},
vAxis: {
gridlines: {
color: 'none'
},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var button = document.getElementById('change');
button.onclick = function() {
// If the format option matches, change it to the new option,
// if not, reset it to the original format.
options.hAxis.format === 'M/d/yy' ?
options.hAxis.format = 'dd/MM/yyyy HH:mm' :
options.hAxis.format = 'M/d/yy';
chart.draw(data, options);
};
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<button id="change">Click to change the format</button>
<div id="chart_div"></div>
It seems that according to the docs, the date and time format is set separately (go to the very bottom of the page):
hAxis: {
viewWindow: {
min: new Date(2014, 11, 31, 18),
max: new Date(2015, 0, 3, 1)
},
gridlines: {
count: -1,
units: {
days: {format: ['MMM dd']}, // <-----
hours: {format: ['HH:mm', 'ha']}, // <-----
}
},
minorGridlines: {
units: {
hours: {format: ['HH:mm', 'ha']}, // <-----
minutes: {format: ['HH:mm a Z', ':mm']} // <-----
}
}
}