Visualize date specific data with a line chart in browser with javascript

Question

I want to visualize some data in the browser with a line chart. At the x-axis there should be the date, at the y-axis there should be the value.

I know that there are some javascript plotting solutions out there. But especially for date-specific data it is difficult to find a suitable solution.

Here is the scheme, how i have the data:

[
   [
      startTimestamp,
      endTimestamp,
      value
   ],
   [
      startTimestamp,
      endTimestamp,
      value
   ]
]

Here with some example values:

[
   [
      1365163327,
      1365163339,
      0
   ],
   [
      1365163339,
      1365163360,
      1
   ]
]

See js-fiddle here, with some better sample data:

http://jsfiddle.net/JWhmQ/1992/

Have you seen [NVD3](http://nvd3.org/)? – Lars Kotthoff Jun 01 '13 at 16:17 — Lars Kotthoff, Jun 01 '13 at 16:17

score 2 · Answer 1 · answered Jun 01 '13 at 16:25

My personal preference is for the Google Chart API's. They have good date format support: see Chart API Date Format Docs. The good thing about the API, is once you have it in a JavaScript date format, the google chart API knows how to sort, and also can change the date format for localization / formatting preference.

The only required addition to your source JSON is converting the timestamps to a Date Object. In PHP, I'd do a date('Y', $timestamp), etc. for each part of the date object. See W3 Schools for Date Object format

score 1 · Accepted Answer · answered Jun 17 '13 at 20:06

1

Have a look at this flot - example, it can be feeded with unix-timestamps:

http://www.flotcharts.org/flot/examples/visitors/index.html

answered Jun 17 '13 at 20:06

Michael Meier

650
2
9
20

Visualize date specific data with a line chart in browser with javascript

2 Answers2