I'm having some trouble with Google charts. I have a Google area chart:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday','time');
data.addColumn('number','temp');
data.addRows([
[[8,0,0],7.875],
[[8,15,0],7.9399996],
[[8,30,0],8.1],
[[8,45,0],8.160001],
[[9,0,0],8.139999],
// data every quarter of an hour
[[7,15,0],9.26],
[[7,30,0],9.26],
[[7,45,0],9.18]
]);
var options = {
title: 'Title',
vAxis: {
title: 'AvgTemp',
titleTextStyle: {color: 'red'},
}
hAxis: {
title: 'Time',
titleTextStyle: {color: 'red'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
</script>
Now, when I load my page, the hAxis of the chart starts at 0:00 and ends at 24:00, and it destroys the chart. How can I make it so that the chart starts at 8:00 and ends at 7:45?
I've tried some things with view window but I can't seem to make it work.
Thanks.
The answer was to use a datetime instead of a time of the day, this way you need to add a date and thats how the api knows which time comes first.
like this:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime','time');
data.addColumn('number','temp');
data.addRows([
[new Date(2012,11,3,8,0,0),7.875],
[new Date(2012,11,3,8,15,0),7.9399996],
[new Date(2012,11,3,8,30,0),8.1],
[new Date(2012,11,3,8,45,0),8.160001],
[new Date(2012,11,3,9,0,0),8.139999],
//new data every quarter of an hour
[new Date(2012,11,4,7,0,0),9.42],
[new Date(2012,11,4,7,15,0),9.26],
[new Date(2012,11,4,7,30,0),9.26],
[new Date(2012,11,4,7,45,0),9.18]
]);
var options = {
title: 'Title',
vAxis: { title: 'AvgTemp',
titleTextStyle: {color: 'red'},
},
hAxis: { title: 'Time',
titleTextStyle: {color: 'red'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
</script>
#oaklodge
producerCountDatatable = new google.visualization.DataTable();
// producerCountDatatable.addColumn('timeofday', 'Timestamp');
producerCountDatatable.addColumn('datetime', 'Time of day(Hours:Minutes)');
producerCountDatatable.addColumn('number', 'ProducerCount');
for(var i = 0; i < hours.length; i++){
//If you use timeofday //producerCountDatatable.addRow([[parseInt(hours[i]),parseInt(minutes[i]),parseInt(seconds[i])],newProducerData[i]]);
//the following is for datetime
producerCountDatatable.addRow([new Date(timeStampData[i]),newProducerData[i]]);
}
Related
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 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']} // <-----
}
}
}
I've created a google chart and the data is pulled from a database and structured to meet the requirements of the chart, however, for some reason, whenever I try change the options for the chart it just wont work.
I need to move the legend to below the chart and make the point size on the chart 30 pixels.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility ', 11.5, 10, 11.5]]);
var options =
{
legend: { position: 'bottom' },
chart: {title: 'Student Results'},
legend:{position: 'bottom', textStyle: {color: 'black', fontSize: 16}},
pointSize:30,
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
<div id="line_chart" style='width:calc(100% - 80px); height:400px; margin:auto;'></div>
Any suggestions on why the legend wont move or point size wont change, the chart data can have many aspects (x axis value), I need to point-size to change so that it wont look blank with just a aspect (x axis value)
there are several options that simply don't work in Material charts
and it appears Line requires two data points per series before drawing anything
I would recommend using 'corechart' instead
there is an option for theme: 'material' to get the base look and feel close to a Material chart
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility 1', 11.5, 10, 11.5]]);
var options = {
chartArea: {
width: '90%'
},
height: 600,
legend: {
position: 'bottom',
textStyle: {
color: 'black',
fontSize: 16
}
},
pointSize: 30,
theme: 'material',
title: 'Student Results',
vAxis: {
viewWindow: {
min: 0,
max: 15
}
},
width: '100%'
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['line', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div"></div>
<div>Material Chart</div>
<div id="line_chart"></div>
Consider the following code:
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Leads');
data.addRow([Date.parse("2013-08-17 10:12:18"), 0]);
data.addRow([Date.parse("2013-08-17 09:13:42"), 14]);
data.addRow([Date.parse("2013-08-17 10:00:05"), 15]);
data.addRow([Date.parse("2013-08-17 11:12:18"), 3]);
var options = {
title: 'Company Performance',
fontSize: '12px',
curveType: 'function',
pointSize: 5,
hAxis: {
title: 'Daily Report',
titleTextStyle: {
color: '#FF0000'
}
},
vAxis: {
title: 'Leads',
titleTextStyle: {
color: '#FF0000'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Now, the above code is suppsed to load google chart api, defined a DataTable & generate a LineChart graph but it doesn't. Instead, I the following error when trying to add Columns
TypeError: data is undefined #at this line --> data.addColumn('datetime', 'Time')
Can anyone tell me what am I missing?
you did not use new while creating a new object of google.visualization.Datatable.
function drawChart() {
// var data = google.visualization.DataTable(); missed new keyword
var data = new google.visualization.DataTable();
//...
}