CODEWITHSUNDEEP
jqueryjqplot
M99
M99

Reputation: 1907

JQPlot Multi line Chart - Hourly data comparison

I am trying to create a JQ Plot with 2 lines. First line has data from day 1 for each hour and the second line is for day 2 with hourly data. When I create a chart with these 2 lines, I want one line on top of the second to show the hourly data comparison. But I see these two lines next to each other on the chart.

I have the sample here

Please let me know how I can adjust the chart options to display one line on top of the other. Thank you.

Here is my Code:

<html>
<head>
    <script src="http://www.jqplot.com/deploy/dist/jquery.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
    <script src=""></script>
    <link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.css" />
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.cursor.min.js"></script>
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.logAxisRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script type="text/javascript">
$(document).ready(function(){
    line1 = [["6/22/2009 10:00",425.32], ["6/22/2009 11:00",424.84], ["6/22/2009 12:00",417.23], ["6/22/2009 13:00",390], 
    ["6/22/2009 14:00",393.69], ["6/22/2009 15:00",392.24], ["6/22/2009 16:00",369.78], ["6/22/2009 17:00",330.16], ["6/22/2009 18:00",308.57], 
    ["6/22/2009 19:00",346.45], ["6/22/2009 20:00",371.28], ["6/22/2009 21:00",324.7]];

        line2 = [["6/23/2009 10:00",325.32], ["6/23/2009 11:00",324.84], ["6/23/2009 12:00",217.23], ["6/23/2009 13:00",190], 
    ["6/23/2009 14:00",593.69], ["6/23/2009 15:00",292.24], ["6/23/2009 16:00",369.78], ["6/23/2009 17:00",330.16], ["6/23/2009 18:00",308.57], 
    ["6/23/2009 19:00",446.45], ["6/23/2009 20:00",241.28], ["6/23/2009 21:00",624.7]];

    var plot1 = $.jqplot('chart1', [line1,line2], { 
        title: 'XYZ, Inc.', 
        series: [{ 
            label: 'XYZ, Inc.', 
            neighborThreshold: -1 
        }], 
        axes: { 
            xaxis: { 
                renderer:$.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                  angle: -30
                } 
            }, 
            yaxis: {  
                renderer: $.jqplot.LogAxisRenderer,
                tickOptions:{ prefix: '$' } 
            } 
        }, 
        cursor:{
            show: true, 
            zoom: true
        } 
    });
});
</script>

</head>
<body>
    <div id="chart1" style="height:200px; width:600px;"></div>
</body>
</html>​

Upvotes: 3

Views: 7931

Answers (3)

Naga Penmetsa
Naga Penmetsa

Reputation: 384

It Worked for me.

Example: 

var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
var line2=[['2008-06-30 8:00AM',6], ['2008-7-14 8:00AM',8.5], ['2008-7-28 8:00AM',8.7], ['2008-8-11 8:00AM',12], ['2008-8-25 8:00AM',8.2]];

var plot2 = $.jqplot('chart3', [line1,line2], {
    title:'Customized Date Axis', 
    axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer, 
          tickOptions:{formatString:'%b %#d, %#I %p'},
          min:'June 16, 2008 8:00AM', 
          tickInterval:'2 weeks'
        }
    },
    series:[{lineWidth:4, markerOptions:{style:'square'}}]
});

Upvotes: 2

philip_kobernik
philip_kobernik

Reputation: 436

I struggled with this same problem.

The solution is to define a 2nd x-axis that we'll name x2axis.

Then in your series config, specify that one of your series will use the 2nd x-axis.

var plot1 = $.jqplot('chart1', [line1,line2], { 
    title: 'XYZ, Inc.', 
    series: [{ 
        label: 'primary series', 
        neighborThreshold: -1,
        xaxis: 'xaxis'
    }, {
        label: 'comparative series',
        xaxis: 'x2axis'
    }], 
    axes: { 
        xaxis: { 
            renderer:$.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
              angle: -30
            } 
        },
        x2axis: {
            renderer:$.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
              angle: -30
            } 
        },
        yaxis: {  
            renderer: $.jqplot.LogAxisRenderer,
            tickOptions:{ prefix: '$' } 
        } 
    }, 
    cursor:{
        show: true, 
        zoom: true
    } 
});

Here is a JS Fiddle demonstrating the solution

If your data sets have different lengths, there will be additional problems to solve. Check out my blog post on the topic for more details.

Cheers!

Upvotes: 6

Arun P Johny
Arun P Johny

Reputation: 388436

I don't think it is possible if you are using dateAxisRenderer, a possible solution will be to use a line graph with out dateAxisRenderer

Ex:

line1 = [[10,425.32], [11,424.84], [12,417.23], [13,390], [14,393.69], [15,392.24], [16,369.78], [17,330.16], [18,308.57], [19,346.45], [20,371.28], [21,324.7]];

line2 = [[10,325.32], [11,324.84], [12,217.23], [13,190], [14,593.69], [15,292.24], [16,369.78], [17,330.16], [18,308.57], [19,446.45], [20,241.28], [21,624.7]];

var plot3 = $.jqplot('chart1', [line1, line2 ], { 
  title: 'XYZ, Inc.', 
    series: [{ 
        label: 'XYZ, Inc.', 
        neighborThreshold: -1 
    }], 
    axes: {
        xaxis: {
            min: 1,
            max: 24,
            tickInterval: 2,
            tickOptions:{ suffix: ':00' } 
        },
         yaxis: {  
            renderer: $.jqplot.LogAxisRenderer,
            tickOptions:{ prefix: '$' } 
        } 
    },
    cursor:{
        show: true, 
        zoom: true
    } 
});

Upvotes: 2

Related Questions