Welcome Guest Search | Active Topics |

Vertical Lines on Date Time Axis
Options
Previous Topic Next Topic
Krupa
#1 Posted : Tuesday, October 30, 2012 12:39:24 AM(UTC)
Rank: Member

Groups: Registered
Joined: 10/30/2012(UTC)
Posts: 26

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
My current requirement is to draw 2 vertical lines with Date time on the Y- axis and Numbers in the X- axis.

The coordinates for the two lines are as below:

Actual Coordinates:

Line 1 - [10/13 20:10,150],[10/14 19:30,130],[10/15 20:10,70],[10/16 20:10,150],[10/17 19:30,130]
Line 2 - [10/13 07:15,50],[10/14 09:15,76],[10/15 07:15,50],[10/16 09:15,30]


Issue Faced:

The line 1 gets plotted correctly based on the coordinates provided.

While drawing line 2, the X axis values are taken from the coordinates provided for line 2 and is plotted against the equivalent Y axis value for Line 1.


Plotted Coordinates

Line 1 - [10/13 20:10,150],[10/14 19:30,130],[10/15 20:10,70],[10/16 20:10,150],[10/17 19:30,130]
Line 2 - [10/13 20:10,50],[10/14 19:30,76],[10/15 20:10,50],[10/16 20:10,30]

I want both the vertical lines to be plotted with the actual coordinates:

Please help.
Back to top
Dragan
#2 Posted : Tuesday, October 30, 2012 3:21:39 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,

Recently we fixed some issue with vertical line on date time axis. The fix will be included in next jqChart version. In the meantime you can download a working version from:

www.jqchart.com/tests/jqChartJQueryPlugin_3_5_2_0.zip

Also you need to use Date values as x-values. Here is the code I’ve tried:

Code:
  $(document).ready(function () {
            var data1 = [['10/13/2012 20:10', 150], ['10/14/2012 19:30', 130], ['10/15/2012 20:10', 70], ['10/16/2012 20:10', 150], ['10/17/2012 19:30', 130]];
            var data2 = [['10/13/2012 07:15', 50], ['10/14/2012 09:15', 76], ['10/15/2012 07:15', 50], ['10/16/2012 09:15', 30]];

            for (var i = 0; i < data1.length; i++) {
                data1[i][0] = new Date(data1[i][0]);
            }

            for (var i = 0; i < data2.length; i++) {
                data2[i][0] = new Date(data2[i][0]);
            }

            $('#jqChart').jqChart({
                title: 'Title',
                series: [
                            {
                                type: 'verticalLine',
                                data: data1
                            },
                            {
                                type: 'verticalLine',
                                data: data2
                            }
                       ]
            });
        });


Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Krupa
#3 Posted : Tuesday, October 30, 2012 5:04:28 AM(UTC)
Rank: Member

Groups: Registered
Joined: 10/30/2012(UTC)
Posts: 26

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Thanks for the quick response.

But still it is not working for me. I need to display Date with Time in the Y- axis and Numbers between 0 & 300 in the X- axis.
Please provide me an example with 2 vertical lines having date and time in Y - axis.

Thanks in advance.
Back to top
Dragan
#4 Posted : Tuesday, October 30, 2012 6:52:38 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)
Try using this code:


Code:
  $(document).ready(function () {
        var data1 = [['10/13/2012 20:10', 150], ['10/14/2012 19:30', 130], ['10/15/2012 20:10', 70], ['10/16/2012 20:10', 150], ['10/17/2012 19:30', 130]];
        var data2 = [['10/13/2012 07:15', 50], ['10/14/2012 09:15', 76], ['10/15/2012 07:15', 50], ['10/16/2012 09:15', 30]];

        for (var i = 0; i < data1.length; i++) {
            data1[i][0] = new Date(data1[i][0]);
        }

        for (var i = 0; i < data2.length; i++) {
            data2[i][0] = new Date(data2[i][0]);
        }

        $('#jqChart').jqChart({
            title: 'Title',
            axes: [
                    {
                        type: 'dateTime',
                        location: 'left',
                        labels: { stringFormat: 'mm/dd hh:MM' }
                    },
                    {
                        type: 'linear',
                        location: 'bottom',
                        minimum: 0,
                        maximum: 300
                    }
                  ],
            series: [
                        {
                            type: 'verticalLine',
                            data: data1
                        },
                        {
                            type: 'verticalLine',
                            data: data2
                        }
                    ]
        });
    });
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Krupa
#5 Posted : Tuesday, October 30, 2012 7:45:51 AM(UTC)
Rank: Member

Groups: Registered
Joined: 10/30/2012(UTC)
Posts: 26

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Sorry even this code is not working.

The hours is defaulty getting displayed as 12:00. The values that we are entering is not being considered.

And also the graph is not getting plotted correctly based on the X axis values. On Mouse over of the plots, it shows the correct X axis value as provided in the series data. But the plotting is not correct.


Please help.
Back to top
Krupa
#6 Posted : Tuesday, October 30, 2012 11:52:34 PM(UTC)
Rank: Member

Groups: Registered
Joined: 10/30/2012(UTC)
Posts: 26

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
I tried the below two codes but still the exact hours and minutes are not getting displayed in the Y- axis.

Code 1:

<!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>
<title>HTML5 Chart jQuery Plugin - Multiple Axes</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.5.1.min.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 () {
var data1 = [['10/13/2012 20:10', 150], ['10/14/2012 19:30', 130], ['10/15/2012 20:10', 70], ['10/16/2012 20:10', 150], ['10/17/2012 19:30', 130]];
var data2 = [['10/13/2012 07:15', 50], ['10/14/2012 09:15', 76], ['10/15/2012 07:15', 50], ['10/16/2012 09:15', 30]];

for (var i = 0; i < data1.length; i++) {
data1[i][0] = new Date(data1[i][0]);
}

for (var i = 0; i < data2.length; i++) {
data2[i][0] = new Date(data2[i][0]);
}

$('#jqChart').jqChart({
title: 'Title',
axes: [
{
type: 'dateTime',
location: 'left',
labels: { stringFormat: 'mm/dd HH:MM' }
},
{
type: 'linear',
location: 'bottom',
minimum: 0,
interval: 50,
maximum: 300
}
],
series: [
{
type: 'verticalLine',
data: data1
},
{
type: 'verticalLine',
data: data2
}
]
});
});
</script>
</head>
<body>

<div>
<div id="jqChart" align="center" style="width: 800px; height: 600px;">
</div>
</div>
</body>
</html>




Code 2:

<!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>
<title>HTML5 Chart jQuery Plugin - Multiple Axes</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.5.1.min.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 () {
var data1 = [['10/13/2012 20:10', 150], ['10/14/2012 19:30', 130], ['10/15/2012 20:10', 70], ['10/16/2012 20:10', 150], ['10/17/2012 19:30', 130]];
var data2 = [['10/13/2012 07:15', 50], ['10/14/2012 09:15', 76], ['10/15/2012 07:15', 50], ['10/16/2012 09:15', 30]];

for (var i = 0; i < data1.length; i++) {
var year = data1[i][0].substring(6,10);
console.log(year);
var month = data1[i][0].substring(0,2);
console.log(month);
var day = data1[i][0].substring(3,5);
console.log(day);
var hours = data1[i][0].substring(11,13);
console.log(hours);
var minutes = data1[i][0].substring(14);
console.log(minutes);
console.log(new Date(data1[i][0]));
data1[i][0] = new Date(year,month-1,day,hours,minutes,'00','00');
console.log( data1[i][0]);
}

for (var i = 0; i < data2.length; i++) {
var year = data2[i][0].substring(6,10);
var month = data2[i][0].substring(0,2);
var day = data2[i][0].substring(3,5);
var hours = data2[i][0].substring(11,13);
var minutes = data2[i][0].substring(14);
data2[i][0] = new Date(year,month-1,day,hours,minutes,'00','00');
}

$('#jqChart').jqChart({
title: 'Title',
axes: [
{
type: 'dateTime',
location: 'left',
labels: { stringFormat: 'mm/dd HH:mm' }
},
{
type: 'linear',
location: 'bottom',
minimum: 0,
interval: 50,
maximum: 300
}
],
series: [
{
type: 'verticalLine',
data: data1
},
{
type: 'verticalLine',
data: data2
}
]
});
});
</script>
</head>
<body>

<div>
<div id="jqChart" align="center" style="width: 800px; height: 600px;">
</div>
</div>
</body>
</html>


Currently am getting the default Hours and minutes values as 05:10 and 17:10. The graph is getting plotted correctly considering this default hours and minutes.


Please help me in getting the exact hours and minutes in the Y- axis.

Thanks in advance.
Back to top
Dragan
#7 Posted : Thursday, November 1, 2012 9:00:30 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)
Back to top
Users browsing this topic
Guest (5)
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.247 seconds.