Mark February 2016

Prevent rounding of datetime column in Google graphs X axis

I have a working google chart that shows data for the last 24 hours, one data set for each hour (ex 01:00 to 01:59...etc). Now I am trying to modify it to make it show data for the last 24 hours but in 60 minutes chuncks starting from the current time (ex 17:20 to 18:19... etc). This is the code I am working on (https://jsfiddle.net/70boo2ss/):

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Hours');
    data.addColumn('number', 'Col 1');
    data.addColumn('number', 'Col 2');
    data.addColumn('number', 'Percentage');

    data.addRows([
        [new Date(1454963244*1000),329,35,10.64],
        [new Date(1454959644*1000),17,1,5.88],
        [new Date(1454956044*1000),60,24,40.00],
        [new Date(1454952444*1000),60,24,40.00],
        [new Date(1454948844*1000),60,24,40.00],
        [new Date(1454945244*1000),60,24,40.00],
        [new Date(1454941644*1000),60,24,40.00],
        [new Date(1454938044*1000),60,24,40.00],
        [new Date(1454934444*1000),60,24,40.00],
        [new Date(1454930844*1000),60,24,40.00],
        [new Date(1454927244*1000),60,24,40.00],
        [new Date(1454923644*1000),60,24,40.00],
        [new Date(1454920044*1000),60,24,40.00],
        [new Date(1454916444*1000),60,24,40.00],
        [new Date(1454912844*1000),60,24,40.00],
        [new Date(1454909244*1000),60,24,40.00],
        [new Date(1454905644*1000),60,24,40.00],
        [new Date(1454902044*1000),60,24,40.00],
        [new Date(1454898444*1000),60,24,40.00],
        [new Date(1454894844*1000),60,24,40.00],
        [new Date(1454891244*1000),60,24,40.00],
        [new Date(1454887644*1000),60,24,40.00],
        [new Date(1454884044*1000),60,24,40.00],
        [new Date(1454880444*1000),60,24,40.00],
    ]);

    var formatter = n        

Answers


WhiteHat February 2016

You can set your own ticks and viewWindow: {min: lowest_date_in_data} for the hAxis.

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('datetime', 'Hours');
	data.addColumn('number', 'Col 1');
	data.addColumn('number', 'Col 2');
	data.addColumn('number', 'Percentage');

	data.addRows([
		[new Date(1454963244*1000),329,35,10.64],
		[new Date(1454959644*1000),17,1,5.88],
		[new Date(1454956044*1000),60,24,40.00],
		[new Date(1454952444*1000),60,24,40.00],
		[new Date(1454948844*1000),60,24,40.00],
		[new Date(1454945244*1000),60,24,40.00],
		[new Date(1454941644*1000),60,24,40.00],
		[new Date(1454938044*1000),60,24,40.00],
		[new Date(1454934444*1000),60,24,40.00],
		[new Date(1454930844*1000),60,24,40.00],
		[new Date(1454927244*1000),60,24,40.00],
		[new Date(1454923644*1000),60,24,40.00],
		[new Date(1454920044*1000),60,24,40.00],
		[new Date(1454916444*1000),60,24,40.00],
		[new Date(1454912844*1000),60,24,40.00],
		[new Date(1454909244*1000),60,24,40.00],
		[new Date(1454905644*1000),60,24,40.00],
		[new Date(1454902044*1000),60,24,40.00],
		[new Date(1454898444*1000),60,24,40.00],
		[new Date(1454894844*1000),60,24,40.00],
		[new Date(1454891244*1000),60,24,40.00],
		[new Date(1454887644*1000),60,24,40.00],
		[new Date(1454884044*1000),60,24,40.00],
		[new Date(1454880444*1000),60,24,40.00],
	]);

    // build ticks
    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      ticks.push(data.getValue(i, 0));
    }

	var formatter = new google.visualization.NumberFormat({
			fractionDigits: 2,
			suffix: '%'
	});
	formatter.format(data, 3);

	var options = {
		wi 

Post Status

Asked in February 2016
Viewed 1,067 times
Voted 14
Answered 1 times

Search




Leave an answer