Welcome Guest Search | Active Topics |

RangeBar Chart Issue need help
Options
Previous Topic Next Topic
evangels
#1 Posted : Friday, July 03, 2015 2:43:59 AM(UTC)
Rank: Member

Groups: ExpiredLicense, Registered
Joined: 7/30/2013(UTC)
Posts: 15

Thanks: 6 times
Was thanked: 0 time(s) in 0 post(s)
hi team,

would you pls. kindly check below code, why there's two ADWSB02 bar, and no ADWSB01 bar?

thank you very much

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>
</title>
    <link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />
    <link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.8.21.css" />
    <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="../js/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
    <script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>
     <!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
    <script lang="javascript" type="text/javascript">
        $(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Range Bar Chart' },
                axes: [
                    {
                        type: 'dateTime',
                        location: 'bottom',
                        minimum: new Date(2015, 6, 2),
                        maximum: new Date(2015, 6, 4),
                        interval: 120,
                        intervalType: 'minutes' // 'years' |  'months' | 'weeks' | 'days' | 'minutes' | 'seconds' | 'millisecond'
                    }
                ],
                series: [
                    {
                        type: 'rangeBar',
                        title: 'LOST',
                        lineWidth:50,
                        data: [
                                ['ADWSB02',new Date('2015-07-02 19:54:29'), new Date('2015-07-02 19:56:46')]]
                    },
                    {
                        type: 'rangeBar',
                        title: 'MON',
                        lineWidth:50,
                        data: [
                                ['ADWSB01',new Date('2015-07-02 19:28:45'), new Date('2015-07-02 20:29:58')],['ADWSB02',new Date('2015-07-02 07:30:00'), new Date('2015-07-02 08:03:12')],['ADWSB02',new Date('2015-07-02 08:25:02'), new Date('2015-07-02 08:41:55')],['ADWSB02',new Date('2015-07-02 10:42:08'), new Date('2015-07-02 10:42:22')],['ADWSB02',new Date('2015-07-02 13:03:27'), new Date('2015-07-02 13:03:50')],['ADWSB03',new Date('2015-07-02 19:27:29'), new Date('2015-07-02 20:53:16')]]
                    },
                    {
                        type: 'rangeBar',
                        title: 'RUN',
                        lineWidth:50,
                        data: [
                                ['ADWSB01',new Date('2015-07-02 07:30:00'), new Date('2015-07-02 19:28:45')],['ADWSB01',new Date('2015-07-02 20:29:58'), new Date('2015-07-02 22:18:38')],['ADWSB01',new Date('2015-07-02 22:25:19'), new Date('2015-07-03 03:04:10')],['ADWSB01',new Date('2015-07-03 03:22:29'), new Date('2015-07-03 07:30:00')],['ADWSB02',new Date('2015-07-02 08:03:12'), new Date('2015-07-02 08:25:02')],['ADWSB02',new Date('2015-07-02 08:41:55'), new Date('2015-07-02 10:35:55')],['ADWSB02',new Date('2015-07-02 10:42:22'), new Date('2015-07-02 13:03:27')],['ADWSB02',new Date('2015-07-02 13:03:50'), new Date('2015-07-02 19:54:29')],['ADWSB02',new Date('2015-07-02 19:56:46'), new Date('2015-07-02 22:17:03')],['ADWSB02',new Date('2015-07-02 22:20:03'), new Date('2015-07-03 07:30:00')],['ADWSB03',new Date('2015-07-02 07:30:00'), new Date('2015-07-02 19:27:29')],['ADWSB03',new Date('2015-07-02 20:53:16'), new Date('2015-07-03 07:16:06')],['ADWSB03',new Date('2015-07-03 07:24:25'), new Date('2015-07-03 07:30:00')]]
                    },
                    {
                        type: 'rangeBar',
                        title: 'T_MD',
                        lineWidth:50,
                        data: [
                                ['ADWSB01',new Date('2015-07-02 22:18:38'), new Date('2015-07-02 22:25:19')],['ADWSB01',new Date('2015-07-03 03:04:10'), new Date('2015-07-03 03:22:29')],['ADWSB02',new Date('2015-07-02 22:17:03'), new Date('2015-07-02 22:20:03')],['ADWSB03',new Date('2015-07-03 07:16:06'), new Date('2015-07-03 07:24:25')]]
                    },
                    {
                        type: 'rangeBar',
                        title: 'W_EN',
                        lineWidth:50,
                        data: [
                                ['ADWSB02',new Date('2015-07-02 10:35:55'), new Date('2015-07-02 10:41:21')]]
                    },
                    {
                        type: 'rangeBar',
                        title: 'W_MF',
                        lineWidth:50,
                        data: [
                                ['ADWSB02',new Date('2015-07-02 10:41:21'), new Date('2015-07-02 10:42:08')]]
                    }
                ]
            });
        });
    </script>

</head>
<body>
    <div>
        <div id="jqChart" style="width: 900px; height: 400px;">
        </div>
    </div>
</body>
</html>
Back to top
Dragan
#2 Posted : Tuesday, July 14, 2015 3:19:29 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 need to use 'gantt' chart in your case. Try using this code:

Code:
$(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Range Bar Chart' },
                //axes: [
                //    {
                //        type: 'dateTime',
                //        location: 'bottom',
                //        minimum: new Date(2015, 6, 2),
                //        maximum: new Date(2015, 6, 4),
                //        interval: 120,
                //        intervalType: 'minutes' // 'years' |  'months' | 'weeks' | 'days' | 'minutes' | 'seconds' | 'millisecond'
                //    }
                //],
                series: [
                    {
                        type: 'gantt',
                        title: 'LOST',
                        
                        data: [ ['ADWSB01'],
                                ['ADWSB02', new Date('2015/07/02 19:54:29'), new Date('2015/07/02 19:56:46')],
                                ['ADWSB03']]
                    }
                    ,
                    {
                        type: 'gantt',
                        title: 'MON',
                        
                        data: [
                                ['ADWSB01', new Date('2015/07/02 19:28:45'), new Date('2015/07/02 20:29:58')], ['ADWSB02', new Date('2015/07/02 07:30:00'), new Date('2015/07/02 08:03:12')], ['ADWSB02', new Date('2015/07/02 08:25:02'), new Date('2015/07/02 08:41:55')], ['ADWSB02', new Date('2015/07/02 10:42:08'), new Date('2015/07/02 10:42:22')], ['ADWSB02', new Date('2015/07/02 13:03:27'), new Date('2015/07/02 13:03:50')], ['ADWSB03', new Date('2015/07/02 19:27:29'), new Date('2015/07/02 20:53:16')]]
                    },
                    {
                        type: 'gantt',
                        title: 'RUN',
                        
                        data: [
                                ['ADWSB01', new Date('2015/07/02 07:30:00'), new Date('2015/07/02 19:28:45')], ['ADWSB01', new Date('2015/07/02 20:29:58'), new Date('2015/07/02 22:18:38')], ['ADWSB01', new Date('2015/07/02 22:25:19'), new Date('2015/07/03 03:04:10')], ['ADWSB01', new Date('2015/07/03 03:22:29'), new Date('2015/07/03 07:30:00')], ['ADWSB02', new Date('2015/07/02 08:03:12'), new Date('2015/07/02 08:25:02')], ['ADWSB02', new Date('2015/07/02 08:41:55'), new Date('2015/07/02 10:35:55')], ['ADWSB02', new Date('2015/07/02 10:42:22'), new Date('2015/07/02 13:03:27')], ['ADWSB02', new Date('2015/07/02 13:03:50'), new Date('2015/07/02 19:54:29')], ['ADWSB02', new Date('2015/07/02 19:56:46'), new Date('2015/07/02 22:17:03')], ['ADWSB02', new Date('2015/07/02 22:20:03'), new Date('2015/07/03 07:30:00')], ['ADWSB03', new Date('2015/07/02 07:30:00'), new Date('2015/07/02 19:27:29')], ['ADWSB03', new Date('2015/07/02 20:53:16'), new Date('2015/07/03 07:16:06')], ['ADWSB03', new Date('2015/07/03 07:24:25'), new Date('2015/07/03 07:30:00')]]
                    },
                    {
                        type: 'gantt',
                        title: 'T_MD',
                        
                        data: [
                                ['ADWSB01', new Date('2015/07/02 22:18:38'), new Date('2015/07/02 22:25:19')], ['ADWSB01', new Date('2015/07/03 03:04:10'), new Date('2015/07/03 03:22:29')], ['ADWSB02', new Date('2015/07/02 22:17:03'), new Date('2015/07/02 22:20:03')], ['ADWSB03', new Date('2015/07/03 07:16:06'), new Date('2015/07/03 07:24:25')]]
                    },
                    {
                        type: 'gantt',
                        title: 'W_EN',
                        
                        data: [['ADWSB01'],
                               ['ADWSB02', new Date('2015/07/02 10:35:55'), new Date('2015/07/02 10:41:21')],
                               ['ADWSB03']]
                    },
                    {
                        type: 'gantt',
                        title: 'W_MF',
                        
                        data: [ ['ADWSB01'],
                                ['ADWSB02', new Date('2015/07/02 10:41:21'), new Date('2015/07/02 10:42:08')],
                                ['ADWSB03']]
                    }
                ]
            });
        });


if '2015/07/02 19:54:29' formatting doesn't work, change it to '2015-07-02 19:54:29'
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
evangels on 7/14/2015(UTC)
evangels
#3 Posted : Tuesday, July 14, 2015 3:29:44 AM(UTC)
Rank: Member

Groups: ExpiredLicense, Registered
Joined: 7/30/2013(UTC)
Posts: 15

Thanks: 6 times
Was thanked: 0 time(s) in 0 post(s)
thank you so much, it works, so the point is gantt chart should be used when the x axis is datetime type, right?

dragan wrote:
Hi,

you need to use 'gantt' chart in your case. Try using this code:

Code:
$(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Range Bar Chart' },
                //axes: [
                //    {
                //        type: 'dateTime',
                //        location: 'bottom',
                //        minimum: new Date(2015, 6, 2),
                //        maximum: new Date(2015, 6, 4),
                //        interval: 120,
                //        intervalType: 'minutes' // 'years' |  'months' | 'weeks' | 'days' | 'minutes' | 'seconds' | 'millisecond'
                //    }
                //],
                series: [
                    {
                        type: 'gantt',
                        title: 'LOST',
                        
                        data: [ ['ADWSB01'],
                                ['ADWSB02', new Date('2015/07/02 19:54:29'), new Date('2015/07/02 19:56:46')],
                                ['ADWSB03']]
                    }
                    ,
                    {
                        type: 'gantt',
                        title: 'MON',
                        
                        data: [
                                ['ADWSB01', new Date('2015/07/02 19:28:45'), new Date('2015/07/02 20:29:58')], ['ADWSB02', new Date('2015/07/02 07:30:00'), new Date('2015/07/02 08:03:12')], ['ADWSB02', new Date('2015/07/02 08:25:02'), new Date('2015/07/02 08:41:55')], ['ADWSB02', new Date('2015/07/02 10:42:08'), new Date('2015/07/02 10:42:22')], ['ADWSB02', new Date('2015/07/02 13:03:27'), new Date('2015/07/02 13:03:50')], ['ADWSB03', new Date('2015/07/02 19:27:29'), new Date('2015/07/02 20:53:16')]]
                    },
                    {
                        type: 'gantt',
                        title: 'RUN',
                        
                        data: [
                                ['ADWSB01', new Date('2015/07/02 07:30:00'), new Date('2015/07/02 19:28:45')], ['ADWSB01', new Date('2015/07/02 20:29:58'), new Date('2015/07/02 22:18:38')], ['ADWSB01', new Date('2015/07/02 22:25:19'), new Date('2015/07/03 03:04:10')], ['ADWSB01', new Date('2015/07/03 03:22:29'), new Date('2015/07/03 07:30:00')], ['ADWSB02', new Date('2015/07/02 08:03:12'), new Date('2015/07/02 08:25:02')], ['ADWSB02', new Date('2015/07/02 08:41:55'), new Date('2015/07/02 10:35:55')], ['ADWSB02', new Date('2015/07/02 10:42:22'), new Date('2015/07/02 13:03:27')], ['ADWSB02', new Date('2015/07/02 13:03:50'), new Date('2015/07/02 19:54:29')], ['ADWSB02', new Date('2015/07/02 19:56:46'), new Date('2015/07/02 22:17:03')], ['ADWSB02', new Date('2015/07/02 22:20:03'), new Date('2015/07/03 07:30:00')], ['ADWSB03', new Date('2015/07/02 07:30:00'), new Date('2015/07/02 19:27:29')], ['ADWSB03', new Date('2015/07/02 20:53:16'), new Date('2015/07/03 07:16:06')], ['ADWSB03', new Date('2015/07/03 07:24:25'), new Date('2015/07/03 07:30:00')]]
                    },
                    {
                        type: 'gantt',
                        title: 'T_MD',
                        
                        data: [
                                ['ADWSB01', new Date('2015/07/02 22:18:38'), new Date('2015/07/02 22:25:19')], ['ADWSB01', new Date('2015/07/03 03:04:10'), new Date('2015/07/03 03:22:29')], ['ADWSB02', new Date('2015/07/02 22:17:03'), new Date('2015/07/02 22:20:03')], ['ADWSB03', new Date('2015/07/03 07:16:06'), new Date('2015/07/03 07:24:25')]]
                    },
                    {
                        type: 'gantt',
                        title: 'W_EN',
                        
                        data: [['ADWSB01'],
                               ['ADWSB02', new Date('2015/07/02 10:35:55'), new Date('2015/07/02 10:41:21')],
                               ['ADWSB03']]
                    },
                    {
                        type: 'gantt',
                        title: 'W_MF',
                        
                        data: [ ['ADWSB01'],
                                ['ADWSB02', new Date('2015/07/02 10:41:21'), new Date('2015/07/02 10:42:08')],
                                ['ADWSB03']]
                    }
                ]
            });
        });


if '2015/07/02 19:54:29' formatting doesn't work, change it to '2015-07-02 19:54:29'
Back to top
Dragan
#4 Posted : Tuesday, July 14, 2015 12:32:17 PM(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)
Yes, in your case you need to use gantt chart.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Users browsing this topic
Guest
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.622 seconds.