Show time duration on Line Chart

[Dmitry Filimonov]

Hi!

Is there a way to display duration of time in the format HOURS:MINUTES:SECOND values on Google line chart (Y axis)?

My applications receives data from Google analytics and shows it using Google chart. For visit duration metric the data is a number of seconds. I would like to show it in format above, like Google Analytics service does.

Thanks!

Dmitry

[asgallant]

Yes, you can show time duration on the y-axis.  Use a "timeofday" column type for your duration data (each data point is an array [hour, minute, second, millisecond]).  I had an example done up, but jsfiddle decided to go down, so here's one based on the Visualization playground (just replace the code with this and hit "run"):

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'name');
  data.addColumn('timeofday', 'filler');
  data.addColumn('timeofday', 'duration');
  data.addRows([
    ['foo', [1, 25, 0, 0], [7, 23, 0, 0]],
    ['bar', [4, 36, 0, 0], [5, 56, 0, 0]],
    ['baz', [2, 48, 0, 0], [9, 20, 0, 0]],
    ['cad', [7, 10, 0, 0], [14, 45, 0, 0]]
  ]);
  
  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data, {
      width:600,
      height:400,
      isStacked: true,
      series: {
        0: {
          color: 'transparent',
          visibleInLegend: false
        }
      }
    });

[Dmitry Filimonov]

Thank you for answer, but timeofday is not good. It gives an error if you out more than 24 hours for example. My durations can be more than 24 hours :(

четверг, 31 января 2013 г., 18:58:49 UTC+3 пользователь asgallant написал:

[asgallant]

You can use a "datetime" column type, too, but there are limitations on them that don't apply to timeofday (chiefly, you can't stack them and the format of times > 24 hours will be messed up).  Drop this code into the playground to see:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'name');

  data.addColumn('datetime', 'duration');
  data.addRows([
    ['foo', new Date(0, 0, 0, 7, 23, 0, 0)],
    ['bar', new Date(0, 0, 0, 5, 56, 0, 0)],
    ['baz', new Date(0, 0, 0, 29, 20, 0, 0)],
    ['cad', new Date(0, 0, 0, 14, 45, 0, 0)]
  ]);
  
  var formatter = new google.visualization.DateFormat({pattern: 'hh:mm:ss'});
  formatter.format(data, 1);

  
  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data, {
      width:600,
      height:400

    });

[Dmitry Filimonov]

Yes, if I put 25h20min - shows 1h20min. 

I think there is a normal solution for this problem - Google somehow shows durations in the Google Analytics service. Looks like it is not documented :(

[Daniel LaLiberte]

Dmitry,

I'm thinking that timeofday should allow more than 24 hours.  I just had an example where I only wanted to plot times up to 24 hours, and I can't specify [24, 0, 0] (though I could fudge it with [23, 59, 59, 999]) or get it to show the '24' hour gridline.  Curiously, I could specify a viewWindow max of [25, 0, 0].   The best I could do was get another '0' gridline at the 24 hour point, with: 

       viewWindowMode: 'explicit',

       viewWindow: { max: [24, 30, 0] }

This also requires no explicit gridlines.count.

Anyway, I think it should be easy to allow larger positive values.  I wonder about negative values also, but there could be more complications.

dan

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   562D 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[asgallant]

If I recall correctly, Google Analytics doesn't use the Visualization API, so there aren't any conclusions to be drawn there.

[Dmitry Filimonov]

No chance. viewWindow.max didn't help.

It gives

Error: Type mismatch. Value 25,0,0,0 does not match type timeofday in column index 3

gives somewhere in corechart.js

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   562D 5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Dmitry Filimonov]

Oh, looks like it doesn't. Otherwise they couldnt show durations :)

[Daniel LaLiberte]

Dmitry,

I didn't mean that specifying the viewWindow.max would help with allowing values in your datatable greater than 24 hours.  Only that the value of [25, 0, 0] is allowed for the viewWindow.max.  It might be considered a bug that such a value is allowed, but I think I will push for the opposite, allowing larger values everywhere.

dan

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   562D 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Dmitry Filimonov]

Yes, it would be nice to have not a "timeofday" but a "timespan" type for column. I guess it much more usefull

dan

It gives

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   562D 5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Vagner Guilherme]

Hi, I I'm trying to work with duration of hours... but I gues it is not supported see link: http://stackoverflow.com/questions/41742517/sorted-duration-time-for-google-table-chart maybe you can find something usuful..