Google Charts API - Column patterns and "TimeOfDay" data type

Question

I'm working with the Google Charts API to create a graph of a student's test-taking performance. On the X axis, the graph shows the days of the week. On the Y axis, the graph shows how long the student spent taking the exam. (The goal is for teachers to see if the student speeds up). However, I have a problem:

My data is in the timeofday format, and I'm providing values to the chart as time durations using the Google Charts [HH,MM,SS,MSEC] format. When the chart renders, the Y axis is printed as "HH:MM:SS". I'd really like to customize that because the seconds are pretty useless and it looks messier than I'd like.

The Charts API says you can specify a "pattern" for a column, and I've specified "HH:MM". However, that doesn't seem to take effect at all. Anybody have experience formatting timeofday in Google Charts and know how to do this?

Secretariat

I'm stuck with the same problem. Additionally, I'd also want to show the legend values in the custom format but haven't found a way yet. – Crin

Answer 1

The format is buried deep in the API documentation. (http://code.google.com/apis/chart/interactive/docs/reference.html). It is about quarter way down, it says:

If the column type is 'timeofday', the value is an array of four numbers: [hour, minute, second, milliseconds].

Exchange

The OP has already mentioned that he is passing the time values in an array – Crin

Answer 2

More than words can say: The followingURL is a full working version for Stockprices during the days, and can be found at 'http://www.harmfrielink.nl/Playgarden/GoogleCharts-Tut-07.html' Since a complete listing can not be posted correctly I only give the important parts:

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
     // Create the data table.
     var dataTable = new google.visualization.DataTable();
     dataTable.addColumn('datetime', 'Time');
     dataTable.addColumn('number', 'Price (Euro)');
     dataTable.addRows([
        [new Date(2014, 6, 2,  9,  0, 0, 0), 21.40],
        [new Date(2014, 6, 2, 11,  0, 0, 0), 21.39],
        [new Date(2014, 6, 2, 13,  0, 0, 0), 21.20],
        [new Date(2014, 6, 2, 15,  0, 0, 0), 21.22],
        [new Date(2014, 6, 2, 17,  0, 0, 0), 20.99],
        [new Date(2014, 6, 2, 17, 30, 0, 0), 21.03],
        [new Date(2014, 6, 3,  9,  0, 0, 0), 21.05],
        [new Date(2014, 6, 3, 11,  0, 0, 0), 21.07],
        [new Date(2014, 6, 3, 13,  0, 0, 0), 21.10],
        [new Date(2014, 6, 3, 15,  0, 0, 0), 21.08],
        [new Date(2014, 6, 3, 17,  0, 0, 0), 21.05],
        [new Date(2014, 6, 3, 17, 30, 0, 0), 21.00],
        [new Date(2014, 6, 4,  9,  0, 0, 0), 21.15],
        [new Date(2014, 6, 4, 11,  0, 0, 0), 21.17],
        [new Date(2014, 6, 4, 13,  0, 0, 0), 21.25],
        [new Date(2014, 6, 4, 15,  0, 0, 0), 21.32],
        [new Date(2014, 6, 4, 17,  0, 0, 0), 21.35],
        [new Date(2014, 6, 4, 17, 30, 0, 0), 21.37],
     ]);

     // Instantiate and draw our chart, passing in some options.
     // var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
     var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

     var options = {
        title    : 'AEX Stock: Nationale Nederlanden (NN)',
        width    : 1400,
        height   : 540,
        legend   : 'true',
        pointSize: 5,
        vAxis: { title: 'Price (Euro)', maxValue: 21.50, minValue: 20.50 },
        hAxis: { title: 'Time of day (Hours:Minutes)', format: 'HH:mm', gridlines: {count:9} }
     };

     var formatNumber = new google.visualization.NumberFormat(
        {prefix: '', negativeColor: 'red', negativeParens: true});

     var formatDate = new google.visualization.DateFormat(
        { prefix: 'Time: ', pattern: "dd MMM HH:mm", });

     formatDate.format(dataTable, 0);
     formatNumber.format(dataTable, 1);

     chart.draw(dataTable, options);
  }  // drawChart

</script>
</head>
<body>
   <!--Div that will hold the pie chart-->
   <div id="chart_div" style="width:400; height:300"></div>
 </body>

The example will:

• Make a formatted hAxis with format HH:mm i.e. 18:00 for 6:00 PM.
• Formats the data in the graph (hover over the data-plots) with day and time and the stock price.
• Gives the graph gridlines.

I hope this example makes it clear how to handle the data in a correct way.

Robbirobbia

Answer 3

In chart the options object you could set the vAxis object with the field format and provide a string with the pattern you want to use here's an example:

new google.visualization.BarChart(document.getElementById('visualization'));
  draw(data,
       {title:"Yearly Coffee Consumption by Country",
        width:600, height:400,
        vAxis: {title: "Year", format: "yy"},
        hAxis: {title: "Cups"}}
  );

Look at the vAxis object.

For the string format you should look to http://userguide.icu-project.org/formatparse/datetime to build you the pattern you prefer.

Cowes

Answer 4

You can use the hAxis.format or vAxis.format option. This allows you to specify a format string, where you use placeholder letters for different parts of your timeofday

To get rid of the seconds, you can set the format of the Y Axis like this:

  var options = {
    vAxis: { format: 'hh:mm' }
  };

Brieta