CODEWITHSUNDEEP
javascriptjqueryhtmld3.jsjqplot
mcknight
mcknight

Reputation: 615

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

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/

Upvotes: 5

Views: 613

Answers (2)

Michael Meier
Michael Meier

Reputation: 650

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

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

Upvotes: 1

Bob Gregor
Bob Gregor

Reputation: 1161

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

Upvotes: 2

Related Questions