Basic line chart with dateTime values - CanvasJS

Basic line chart with dateTime values - CanvasJS

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%; margin-left:auto; margin-right:auto;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                text: "Battery Chart",
                fontSize: 20
            },
            axisX: {
                title: "",
                valueFormatString: "MM/DD" ,
                labelAngle: -50,                               
                labelFontSize: 12,
                interval: 1,
                intervalType: "day"
            },
            axisY: {
                includeZero: false,
                title: "Battery",
                titleFontSize: 18,
                labelFontSize: 12
            },
    data: [             
        {
            markerType: "circle",// "square", "cross", "none"
                        markerSize: 10,
                        type: "line",
                        color: "Green",
                        lineThickness:3,
            xValueType: "dateTime",
            dataPoints: [
              { x: Date.parse ("12/1/2014 5:04:59 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:05:37 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:08:10 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:08:51 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:15:17 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:26:04 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:36:51 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:47:38 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:56:37 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:58:11 PM"), y: 3900},{ x: Date.parse ("12/1/2014 5:58:44 PM"), y: 3900},{ x: Date.parse ("12/1/2014 6:00:56 PM"), y: 3900},{ x: Date.parse ("12/1/2014 6:09:27 PM"), y: 3900},{ x: Date.parse ("12/1/2014 6:20:14 PM"), y: 3900},{ x: Date.parse ("12/1/2014 6:31:01 PM"), y: 3900},{ x: Date.parse ("12/1/2014 6:41:48 PM"), y: 3900},{ x: Date.parse ("12/1/2014 6:52:34 PM"), y: 3900},{ x: Date.parse ("12/1/2014 7:03:21 PM"), y: 3900},{ x: Date.parse ("12/1/2014 7:14:08 PM"), y: 3900},{ x: Date.parse ("12/1/2014 7:24:54 PM"), y: 3900},{ x: Date.parse ("12/1/2014 7:35:41...