Search code examples
jquerychartsrenderingjqplotaxis-labels

jqplot line chart with date

Hi i am trying to create simple line chart in jqplot with date in x axis and value in y axis everything working fine but the graph is not drawn correctly my code is below

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>Chart</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
</head>
<body>
  <div id="test_chart" style="width:880px; height:350px;margin-top: 30px;"></div>  
     <script>
        $.jqplot ('test_chart',[[10,20,12]],
        {
         title: 'Example',
            axesDefaults: {
             labelRenderer: $.jqplot.CanvasAxisLabelRenderer
            },
            seriesDefaults: {
            showMarker:true,
            pointLabels: { show:true } ,
            rendererOptions: {
             smooth: true
            }
            },
        axes: {
               xaxis: {
                        renderer:$.jqplot.DateAxisRenderer,
                        tickRenderer:$.jqplot.CanvasAxisTickRenderer,
                        tickOptions:
                          { 
                        angle: -90,
                         formatString:'%d-%m-%Y'
                          },                       
                        label: 'Date',
                        ticks : ['2016-10-01','2016-10-02','2016-10-03'],
                        pad:2
                       },
                yaxis: {
                label: 'value',
                ticks : ['0','5','10','15','20','25','30','35']                 
                }
                }                               
        }); 
      </script>
</body>     
</html>

Please guide me to draw graph using jqplot

Solution

  • First of all...
    To recreate the problem on CodePen, I had to use libraries from cdnjs.com because nothing was going on except red lines in console.

    So maybe you should use these too(!).
    Notice that I also used lastest jQuery and jQuery-UI.

    Only then, I saw a graph background appear... But without any line or anything.

    So, looking at some examples here, I found that you are absolutely wrong on the way to provide data to the beast.

    Your data input is :

    $.jqplot ('test_chart',[[10,20,12]],

    And what's needed is:

    var arr = [['2016-10-01',10],['2016-10-02',20],['2016-10-03',12]];

$.jqplot ('test_chart',[arr],

    OR (If you really don't like to define data in an array first...): 

    $.jqplot ('test_chart',[[['2016-10-01',10],['2016-10-02',20],['2016-10-03',12]]],

    Do you notice the bracket amount ?
    Moreover, do you notice that each X-axis value is associated to a Y-axis value in this array?

    That was your main problem.
    Plus the odd cdns and the missing $(document).ready({ wrapper.

    So now, have a look at your working graph in this codePen
    And have fun ploting graphs...
    ;)