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/

Answer 1

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