CODEWITHSUNDEEP
javascriptgraphhighcharts
Waqas
Waqas

Reputation: 639

Date Vs. Time Graph With HighCharts

I dont know if this is possible. Here is my data

  x-axis      y-axis    BarColor(1-5)
2013-09-23   05:49:31     1 Or Section A
2013-09-24   01:57:09     2 Or Section B
2013-09-26   01:23:25     3 Or Section C
2013-09-28   11:21:03     2
2013-09-28   00:27:40     4 Or section D
2013-09-28   05:45:08     5
2013-09-29   07:31:58     2
2013-09-29   01:56:07     1
2013-09-30   01:38:08     2
2013-09-30   NULL         5 Or Section E
2013-10-01   01:41:03     5
2013-10-02   02:13:46     4
2013-10-03   01:54:02     1

This is the fiddle i've created http://jsfiddle.net/GN3Qm/

I want to draw a bar graph with date Vs. Time. Legends should color that used for bar eg. for 1 = red, 2 = blue etc

Basically barcolor represent section. This way user can easily recognize which section this bar belong to.

Just an rough idea of graph

If possible onhover i want to show a Name field like (adam, tim, etc) onhover

2013-09-23   05:49:31    1  Adam
2013-09-23   05:49:31    1  tim

Upvotes: 0

Views: 405

Answers (1)

SteveP
SteveP

Reputation: 19093

You've asked a lot of different questions there, but I can help with some of it.

For your data, you need to specify it as a valid javascript datetime. You can do it like this:

series: [{
        name: 'Time',
        data: [
            Date.UTC(1970,0,1,1,41,3,0),
            Date.UTC(1970,0,1,2,13,46,0),
            Date.UTC(1970,0,1,1,54,2,0)]
    }]

This specifies a date of 1st jan 1970 with various times. In addition, you can make the chart y axis start where you want:

  yAxis: {
        type: 'datetime',
        min:Date.UTC(1970,0,1,1,0,0,0),

In this case, 1 o'clock.

One way to colour your points is to specify a colour in each data points. This example makes the first point red

series: [{
        name: 'Time',
        data: [
           {y:Date.UTC(1970,0,1,1,41,3,0),color:'red'},
           Date.UTC(1970,0,1,2,13,46,0),
           Date.UTC(1970,0,1,1,54,2,0)]
    }]

To get each point in the legend, you may be better off experimenting with separate series for each point.

http://jsfiddle.net/RcSDc/

Upvotes: 1

Related Questions