Welcome Guest Search | Active Topics |

how to activate vertical grid lines for time-based data ?
Options
Previous Topic Next Topic
ssc
#1 Posted : Sunday, February 19, 2012 2:01:32 AM(UTC)
Rank: Member

Groups: Registered
Joined: 2/19/2012(UTC)
Posts: 10

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
I display time-based data in a chart and I would like to have vertical grid lines in there, analog to the horizontal lines that are drawn by default. I see in the documentation how to customize vertical line width, color, interval, etc. - but I would like to leave all these settings for jqChart to automatically figure out - just like for horizontal lines.
So I basically just would like to 'activate' vertical grid lines.

Is that possible ? Maybe a 'visible' config item ?
Back to top
 |  Edit by user
Dragan
#2 Posted : Sunday, February 19, 2012 3:27:07 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)
Hi,

You can just set:

Code:
$('#jqChart').jqChart({
            axes: [
                        {
                            type: 'dateTime',
                            location: 'bottom',
                            majorGridLines: { visible: true }, ...
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
ssc
#3 Posted : Monday, February 20, 2012 10:47:54 PM(UTC)
Rank: Member

Groups: Registered
Joined: 2/19/2012(UTC)
Posts: 10

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Thanks. If I add your code, I do get vertical grid lines, but I also get two axis at the bottom - one with the correct date & time as before, one with 10:00:00 AM printed for every vertical line. Also, it seems the vertical lines are not aligned in any way with the data displayed, they are just drawn at arbitrary intervals.
Back to top
Dragan
#4 Posted : Tuesday, February 21, 2012 2:19:39 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)
Hi,

Can you send me your jqChart JavaScript code, so we can look at it?
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
ssc
#5 Posted : Tuesday, February 21, 2012 9:07:29 PM(UTC)
Rank: Member

Groups: Registered
Joined: 2/19/2012(UTC)
Posts: 10

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Sure can, nothing fancy here, though:
Code:
// global chart object
var g_chart = null;

function updateChart(jsonData)
{
    // NOTE: jsonData is a simple JavaScript array
    // TODO: jqChart does not seem to clear its div
    $('#chart').empty();

    g_chart = $('#chart').jqChart
    ({
        width  : window.innerWidth,
        height : window.innerHeight,

        // TODO: this does create vertical grid lines,
        // but it also creates a second x axis with wrong labels
        // axes:
        // [
        //     {
        //         type     : 'dateTime',
        //         location : 'bottom',
        //         majorGridLines: { visible: true }
        //     }
        // ],

        border:
        {
            lineWidth : 0,
            padding   : 0
        },
        legend: { visible: false },
        series: [
                    {
                        type: 'spline',
                        data: jsonData,
                        markers:
                        {
                            size      : 5,
                            lineWidth : 6
                        }
                    }
                ],
        title: { text: '' }
    });
}
Back to top
Dragan
#6 Posted : Wednesday, February 22, 2012 12:09:41 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)
Hi,

Can you debug what the jsonData looks like?
Is it in format [[‘2000/01/01’, 3], [‘2000/01/02’, 7], …]?

I believe in your case the first value is a string value, which creates a spline chart on a category axis. If this is the case you can change the "type: 'category',” in the axis definition.

Code:
axes: [
              {
                    type: 'category',
                    location: 'bottom',




If you want to work with true date time data, you can convert the string values to dates. Something like this one:

Code:
function convertData(jsonData) {
            var data = [];
            for (var i = 0; i < jsonData.length; i++) {
                var item = jsonData[i];
                data.push([new Date(item[0]), item[1]]);
            }

            return data;
        }
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
ssc on 2/23/2012(UTC)
ssc
#7 Posted : Thursday, February 23, 2012 1:49:25 AM(UTC)
Rank: Member

Groups: Registered
Joined: 2/19/2012(UTC)
Posts: 10

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
dragan wrote:
Code:
axes: [{ type: 'category', ...
Great, that does this trick! Looking good now :-)

dragan wrote:
If you want to work with true date time data, you can convert the string values to dates.
I ran your code, seems to work fine, it changes the x-axis intervals to somewhat weird values though. However, I don't really have a need for true time data at the moment as I'm still working with dumb test values, but I reckon I'll get back to this once I display real world data stretching over a longer timespan.

Thank you very much for your help! :-)

cheers,

ssc
Back to top
Users browsing this topic
Guest (6)
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.118 seconds.