jqplot chart

jqplot

by Pavlo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css">
<div id="chartdiv">

CSS

#chardiv{
background-color:#ccc;
height:400px;width:100%;
}

JavaScript

var datapoints = [['2008-08-12 4:00PM', 4], ['2008-09-12 4:00PM', 6.5], ['2008-10-12 4:00PM', 5.7]];
var plot1;
function plotChart() {
		if (plot1) {
        plot1.destroy();
    }
	 plot1 = $.jqplot('chartdiv', [datapoints], {
                title: 'Default Date Axis',
                axes: {
                    xaxis: {
                        renderer: $.jqplot.DateAxisRenderer,
                        tickOptions:{formatString:'%b %#d, %#I %p'}
                    }
                },
                series: [{ lineWidth: 4, markerOptions: { style: 'square' } }]
            });
};

plotChart();
datapoints.push(['2008-11-12 4:00PM', 9]);
datapoints.push(['2008-12-12 4:00PM', 8.2]);
plotChart();