-2

See this jsFiddle example, the data series 

series: [{
    name: 'John',
    data: [5, 3, 4, 7, 2]  // the right most part
}, {
    name: 'Jane',
    data: [2, 2, 3, 2, 1]  // the middle part
}, {
    name: 'Joe',
    data: [3, 4, 4, 2, 5]  // the left most part
}]

creates the chart from right to left, I am looking for a way so that the chart can be done from left to right. Thanks!

my data: 

[
    {
        "day": "2009-07-13",
        "work": ["11:16:35-12:03:12", "12:32:48-13:26:28", "13:39:09-13:39:12", "13:41:03-13:41:05", "14:18:09-24:00:00"]
    }, {
        "day": "2009-07-14",
        "work": ["00:00:00-07:22:25", "07:22:25-07:22:28", "10:10:04-10:10:31", "10:10:32-10:15:33", "10:18:07-10:21:19", "11:04:49-11:06:15", "11:12:50-11:19:05", "11:19:11-11:19:19", "11:45:50-11:51:42", "11:51:43-11:53:55", "14:03:13-14:13:04", "14:23:55-14:31:28", "14:31:28-14:38:00", "14:38:00-14:49:04", "16:34:56-16:44:33", "16:46:37-16:48:10", "16:48:11-24:00:00"]
    }, {
        "day": "2009-07-15",
        "work": ["00:00:00-08:16:23", "09:57:57-10:15:05"]
    }
]

EDIT: Sorry about my English and confusion, another jsFiddle example can better explain what I am talking about. I want to create a chart to represent my engine switch on/off status so that the fed in data for bar chart is from left to right, instead of right to left in the give fiddle. Thanks!

sozhen
  • 7,627
  • 14
  • 36
  • 53

1 Answers1

1

Big assumption but I think you are looking for a Gantt chart. See this post on HighCharts forum for ideas.

wergeld
  • 14,332
  • 8
  • 51
  • 81
  • That actually was my post....Looks like I have to go with line type chart. You have any ideas how create line type chart like in [this question](http://stackoverflow.com/questions/11500211/javascript-jquery-library-for-gantt-like-chart) (suppose it is a bar type chart after 90 degree rotation)? – sozhen Jul 16 '12 at 15:52
  • Ha. Sorry to link you to your own post. Well, I have used http://jsfiddle.net/jlbriggs/2qfgg/7/ as a template for Gantt charts when I needed them. Why can't you apply this? Is there some particular error you are getting? – wergeld Jul 16 '12 at 15:57
  • Thanks I am just about to go with this one since indeed bar type chart for gantt needs a lot data tweaking. I will get back to you soon after I play around with this. Thanks so much! – sozhen Jul 16 '12 at 16:00
  • After first view of this chart, would that be possible to remove the points on the side of the bar and show tooltip on the body of the bar instead of side points? Thank you! – sozhen Jul 16 '12 at 16:05
  • Yes, you can use events to fire off when the mouse hovers/clicks on the span of the data. – wergeld Jul 16 '12 at 16:08
  • Thanks, but since its a scatter type chart, so the scatter points cannot be removed or set invisible, is that right? – sozhen Jul 16 '12 at 16:12
  • That I am not sure of but it seems that ou could of course set each series to on/off and even down to a particular point. – wergeld Jul 16 '12 at 16:14
  • Thank you very much for your time. One more concern for me now is: Do I have to convert the datetime data (I have updated in my question) to number of milliseconds from midnight of January 1, 1970, like in the example? `"start" : 1331127220000, "end" : 1331128050000`. Thanks! – sozhen Jul 16 '12 at 16:20
  • You can use Date.parse("date string") as far as I can tell (we parse it to js time before hand in SQL). – wergeld Jul 16 '12 at 16:36
  • Thanks. Clarified my concern. Now still a long way for me to tweak my data. :( – sozhen Jul 16 '12 at 16:38
  • just find one problem, I actually trying to plot engine on/off for different days as this [**link**](http://stackoverflow.com/questions/11475957/any-suggestion-on-charting-plugin-for-time-stacked-bar-chart) shows. So x-axis would be different days and y-axis would be the time stamp. If I go for that example, I couldn't plot my data into the same chart. Because all the data for each day will have increasing time stamps.. – sozhen Jul 16 '12 at 19:55
  • Why not make you xAxis a categor (each day)? If possible can you put up a jsFiddle with what you have currently. – wergeld Jul 16 '12 at 20:10
  • here is my current [**jsFiddle**](http://jsfiddle.net/993n4/). Yes, I want to make the category for each day. But the problem is: in the scatter chart options setting you can see that `xAxis : { min : 1331121600000, max : 1331157600000,`, and all their data is setting as unix timestamp, so if I convert all my data (you can refer to my quesion) to unix, then they will not be in the same scale, because every different day they have different `min` and `max` for x-aixs, that's the different from the original example. I have no idea how to plot those bars in the same chart..Thanks a lot – sozhen Jul 16 '12 at 20:32
  • Convert your timestamp to just hour/min/sec/whatever that is under one day in length. – wergeld Jul 16 '12 at 20:34
  • sorry I did not get it. Say for "2009-07-13", and "2009-07-14", the unix `min` value of "2009-07-14" more than the unix `max` value of "2009-07-13", so I can still plot them in the same chart? – sozhen Jul 16 '12 at 20:42
  • I think I get your point know and start work on it again. Thanks – sozhen Jul 17 '12 at 05:57
  • Looks like there is no solution to show tooltip when mouse hovering the body of the bar? If you happen to get a solution for that, please let me know or answer the question [**here**](http://stackoverflow.com/questions/11530051/highcharts-tooltip-issue-for-scatter-chart). The marker has removed by `marker: {enabled: false}`. Thank you – sozhen Jul 18 '12 at 05:50