Column chart with date ranged

[VrushaliParticipant]

Hello,

I am trying to find out way to plot a chart which can show multiple tasks performed by 10 machines. Each task has a from date and to date. One machine would have multiple tasks scheduled one after that other.
E. g. Machine 1- Tasks 1(From 1-Jan to 25-Jan), Task 2(From 26-Jan to 5-Feb), Task 3(From 7-Feb to 24-Feb)
Machine 2- Tasks 1(From 4-Jan to 25-Jan), Task 2(From 26-Jan to 15-Feb), Task 3(From 16-Feb to 21-Feb)
I want to show the tasks as horizontal bars where the x-Axies would show dates. I am not able to figure out how to define the y-Axies for such task. Could you please help?

[HristoParticipant]

Hello Vrushali,

Please, take a look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_color_bands.htm?light

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[VrushaliParticipant]

Hi Hristo,

Thanks for your reply. However, I had already tried this demo.

Basically, I want to show the bars based on dates. This chart has data in the format,
{ Person: “Planning”, M1_From: 2, M1_To: 5, M2_From: 5, M2_To: 10 },
{ Person: “Dev 1”, M1_From: 5, M1_To: 7, M2_From: 9, M2_To: 17 },

What I want it, to present data in this format,
{ Person: “Planning”, M1_From:’1-Jan-17′ , M1_To: ’16-Jan-17′, M2_From: ’20-Jan-17′, M2_To: ‘5-Feb-17’ },
{ Person: “Dev 1”, M1_From: ‘4-Jan-17′, M1_To: ’12-Jan-17′, M2_From: ’12-Jan-17′, M2_To: ’31-Jan-17’ },

I am not able figure out how to change the range and axies values for the above kind of data. The end result is similar to what is shown in the sample chart. Please help.

[VrushaliParticipant]

Hi Hristo,

I have prepared example. I had some success. Still, I am not able to display the correct labels on the horizontal axies. I need the valueAxies to display the dates on the ticks. It is displaying some long values. Could you please check and help?

http://jsfiddle.net/vrushalivkb/883dnk41/3/

[HristoParticipant]

Hello Vrushali,

Thank you for this feedback.
As a workaround I would like to suggest you to use for that purpose to create such month or two months with simple numbers value and create it as in the previous demo.
You could create 1 month with 30 (for example) and the second one with 31 that is equal to 61 days totally.
With “formatFunction” you could add desired date format for this.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[VrushaliParticipant]

Thank you for the help Hristo.

The workaround seems enough for the current requirement. However, it is a very basic task. The next tasks would be to show the detailed timelines for each day and the min and max dates might not be fixed. It might just make it too complicated to use this chart then. Thanks for your prompt help anyways. You may think of adding the timeline charts going ahead!!!

[HristoParticipant]

Hello Vrushali,

I created a work item for this case.
Thank you for the understanding.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts