CODEWITHSUNDEEP
javascripthighchartsscatter-plot
R2r
R2r

Reputation: 1647

Highcharts scatter plot with time only

I'm thinking about easiest way of doing scatter plot like here http://www.highcharts.com/demo/scatter which will have on xAxis only 24 hours, but each dot/triangle/sign will state about about data added that corresponding hour but the day/year will be different. "datetime" type of plot doesn't resolve problem. Is there another way than "hack" the data and change all years, months and days to be the same date? (I'll still have to know about original date, as period that I want to show dots from might be changed by some button).

To be more specific:

Lets say I want to show something like that: jsfiddle.net/Fishman/N6YZX (sugar level in blood at specific hour during the day in some period of time) - I had to change "data" dates to all be the same yyy-mm-dd to show it in scatter (user will be able to change the period that provides data). But the proper data will be like that: jsfiddle.net/Fishman/gPpSW/1 (look at data values). Is there any way to set the scatter plot to ignore date and take into account only time (hour, min, sec)?

Upvotes: 0

Views: 2795

Answers (1)

SteveP
SteveP

Reputation: 19103

You can plot them using separate x axis. (set xAxis: 0 in series 0, xAsix:1 in series 1 etc.) You can hide the extra axis. See show two different series with different start intervals with the same xAxis highcharts for some info on hiding the extra axis titles.

The alternative is to modify the x values to be all the same date. If you still want to display the date in the tooltip, you can add an extra date field to the point and use a custom tooltip to display it.

{x:Date.UTC(2013, 03, 05, 9), y:100, origdate:Date.UTC(2013, 03, 03, 9), 100},
{x:Date.UTC(2013, 03, 05, 9), y:100, origdate:Date.UTC(2013, 03, 04, 9), 100},
{x:Date.UTC(2013, 03, 05, 9), y:100, origdate:Date.UTC(2013, 03, 05, 9), 100},

Upvotes: 2

Related Questions