jqplot demo

by maxim75

HTML

<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/jquery.jqplot.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.dateAxisRenderer.js"></script>
<div id="chart1"></div>

CSS

#chart1
{
    width: 300px;
    height: 200px;
}

JavaScript

/*

https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/jquery.jqplot.js
https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.dateAxisRenderer.js
*/


$(document).ready(function(){
    window.plot1 = $.jqplot ('chart1', [
            [      [new Date(2008, 09, 1), 2], [new Date(2008, 10, 1), 3], [new Date(2008, 11, 15), 2] ],
            [      [new Date(2008, 09, 1), 1], [new Date(2008, 10, 1), 4], [new Date(2008, 11, 15), 3] ]
        ], 
        { 
        title: "Test",
            axesDefaults: {
                tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                tickOptions: {
                  angle: -90,
                   fontFamily: 'Helvetica, Arial, sans-serif',
                  fontSize: '8pt'
                },
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
              labelOptions: {
                fontFamily: 'Helvetica, Arial, sans-serif',
                fontSize: '8pt'
              }
            },
        axes:{
          
            
          xaxis:{
              renderer:$.jqplot.DateAxisRenderer, 
              tickOptions:{ 
                  formatString:'%d/%m/%y', 
                  angle: -90, 
                  
              },
              //tickRenderer: $.jqplot.CanvasAxisTickRenderer,
              //min:new Date(2008, 09, 1), 
              //tickInterval:'1 month',
              label:'Angle (radians)',

            },
            
            yaxis:{
            
              label:'Angle (radians)',

            }
        },
        series:[
            {lineWidth:1, markerOptions:{style:'square'}},
            {lineWidth:1, markerOptions:{style:'filledCircle', size: 5}}
        ]
    });
});