Welcome Guest Search | Active Topics |

Range Bar Chart and DateTime
Options
Previous Topic Next Topic
Serg
#1 Posted : Wednesday, November 9, 2016 7:42:05 AM(UTC)
Rank: Newbie

Groups: jQueryDV, Registered
Joined: 11/9/2016(UTC)
Posts: 3

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
I would like to make the following chart:

Code:
$(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Range Bar Chart' },
                animation: { duration: 0.1 },
                shadows: {
                    enabled: true
                },
                series: [
                    {
                        type: 'rangeBar',
                        title: 'Rest',
                        data: [['Rest', 0, 12], ['Rest', 30, 62],
                               ['Rest', 110, 150], ['Rest', 180, 200]]
                    },
                    {
                        type: 'rangeBar',
                        title: 'Ready',
                        data: [['Ready', 12, 30], ['Ready', 62, 80], ['Ready', 90, 110],
                               ['Ready', 150, 170], ['Ready', 175, 180]]
                    },
                    {
                        type: 'rangeBar',
                        title: 'Work',
                        data: [['Work', 80, 90], ['Work', 170, 175]]
                    }
                ]
            });
        });


but instead of numbers (integer) I need to put in the time (DateTime) for time intervals.

Like so:

Code:

.......
['Rest', new Date(2013,01,30,0,0,0), new Date(2013,01,30,2,50,0)],
['Rest', new Date(2013,01,30,5,14,0), new Date(2013,01,30,5,21,0)],
.......

['Ready', new Date(2013,01,30,2,50,0), new Date(2013,01,30,4,11,0)],
['Ready', new Date(2013,01,30,5,23,0), new Date(2013,01,30,5,26,0)],
....
and so on


But it does not work. Although in docs written that:
Quote:
Data can be plotted using either a date and time or numerical scale.


It's possible to solve this problem?

Thanks in advance.
Back to top
 |  Edit by user
Dragan
#2 Posted : Wednesday, November 9, 2016 7:43:40 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

You can use our Gantt chart:
http://www.jqchart.com/j...t/GanttCharts/GanttChart
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
Serg on 11/9/2016(UTC)
Serg
#3 Posted : Wednesday, November 9, 2016 8:16:34 AM(UTC)
Rank: Newbie

Groups: jQueryDV, Registered
Joined: 11/9/2016(UTC)
Posts: 3

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Thanks a lot, it's worked.


How can I change Y-label (and in tooltip too) from 'Rest' to 'Activity'?

And by zooming and visibleMinimum - shows first time the chart with X-axis start position at 00:00:00, but after zooming shows chart with X-axis start position from yesterday.

Code:
$(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Project Schedule' },
                animation: { duration: 0.01 },
                shadows: {
                    enabled: true
                },
                axes: [
                    {
                        type: 'dateTime',
                        interval: 60,
                        intervalType: 'minutes',
                        location: 'bottom',
                        visibleMinimum: new Date(2013, 01, 30, 0, 0, 0),
                        visibleMaximum: new Date(2013, 01, 30, 23,59,59),
                        labels: {
                            fillStyle: 'red',
                            stringFormat: 'HH:mm'
                        },
                        zoomEnabled: true
                    }
                ],
                series: [
                    {
                        type: 'gantt',
                        title: 'Rest',
                        data: [
                            ['Rest', new Date(2013,01,30,0,0,0), new Date(2013,01,30,2,50,0)],
                            ['Rest', new Date(2013,01,30,8,32,0), new Date(2013,01,30,9,17,0),],
                            ['Rest', new Date(2013,01,30,10,41,0), new Date(2013,01,30,11,9,0)],
                            ['Rest', new Date(2013,01,30,4,11,0), new Date(2013,01,30,5,14,0)],
                            ['Rest', new Date(2013,01,30,5,26,0), new Date(2013,01,30,8,32,0)]
                        ]
                    },
                    {
                        type: 'gantt',
                        title: 'Ready',
                        data: [
                            ['Ready', new Date(2013,01,30,2,50,0), new Date(2013,01,30,4,11,0)],
                            ['Ready', new Date(2013,01,30,5,23,0), new Date(2013,01,30,5,26,0)],
                            ['Ready', new Date(2013,01,30,11,11,0), new Date(2013,01,30,11,22,0)]
                        ]
                    },
                    {
                        type: 'gantt',
                        title: 'Work',
                        data: [
                            ['Work', new Date(2013,01,30,5,14,0), new Date(2013,01,30,5,21,0)],
                            ['Work', new Date(2013,01,30,10,29,0), new Date(2013,01,30,10,31,0)],
                            ['Work', new Date(2013,01,30,5,21,0), new Date(2013,01,30,5,23,0)]
                        ]
                    }
                ]
            });
        });
Back to top
 |  Edit by user
Dragan
#4 Posted : Wednesday, November 9, 2016 10:02:51 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

You can check out other Gantt example how you can organize the chart like a project schedule:
http://www.jqchart.com/jquery/chart/GanttCharts/ProjectSchedule

The tooltips can be customized completely:
http://www.jqchart.com/docs/jquery/#!/guide/Tooltips

You can use "minimum" instead of "visibleMinimum" property as well.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Users browsing this topic
Guest (3)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.078 seconds.