CODEWITHSUNDEEP
chartsplotvisualization
Steve Brown
Steve Brown

Reputation: 1416

What HTML5 chart tool can I use to present change over time with different x values?

Google offers a charting / graphing API and has a graph that I would like to use to present change over time, and the graph / chart is called the "Annotated Timeline", and an example of it is here:

Picture.png http://img198.imageshack.us/img198/1160/pictureea.png

The coolest feature is that you don't have to plot out all the same "x coordinate" points with each y value, so the data points don't have to all line up vertically. This is good because I don't have values for all points at every time interval:

Picture 1.png http://img843.imageshack.us/img843/5814/picture1ye.png

This would be the end of my needs except that I can't print this out without taking a screenshot of it because this particular Google Visualization is flash based.

What tool can I use to plot data with different x values for the y data points that is HTML5 compatible / not flash?

ps: Google also offers the line chart api but I don't believe it offers x axis points which are not parallel.

Upvotes: 1

Views: 891

Answers (2)

cwd
cwd

Reputation: 54776

Highcharts also has an irregular time data example which can do this:

charts.png http://img269.imageshack.us/img269/8963/chartsf.png

Upvotes: 1

zeroin
zeroin

Reputation: 6025

You can do this with amCharts. Here is an example of date-based chart which looks quite similar to google charts: http://amcharts.com/stock/events/ Another one with multiple lines: http://amcharts.com/javascript/line-chart-with-multiple-value-axes/

This example has data points at the same dates, however the chart can display data like you need too. The data provider should include all the dates you have, but it's not necessary that the data item should have values for all the graphs. Here is sample data:

{date: new Date(2010,1,2), graph1:54, graph2:2},
{date: new Date(2010,1,3), graph1:53},
{date: new Date(2010,1,4), graph1:55},
{date: new Date(2010,1,5), graph2:2}

I hope this helps. Antanas (author of amCharts)

Upvotes: 1

Related Questions