Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>
<input type="button" value="click me to show graph then resize the window" onclick="showgraph();">

CSS

#chartContainer{
height: 250px; 
width: 95%; 
display: none;

}

#resize {

    display:none;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
	creditText : "",
	backgroundColor: "#F5DEB3",
        title: {},
        axisX:{      
            interval: 2,
            lineThickness:0,
            tickThickness:0,
            valueFormatString:" ",
            gridThickness: 0,
            margin: 0,
            tickLength: 0,
            labelMaxWidth: 0},
        axisY: {lineThickness:0,
            tickThickness:0,
            valueFormatString:" ",
            gridThickness: 0,
            margin: 0,
            tickLength: 0,
            labelMaxWidth:0,
                maximum:30},
        legend: {},

        data: [{        
            name: "received",
            showInLegend: false,
            legendMarkerType: "square",
            type: "area",
            color: "rgba(40,175,101,0.6)",
            markerSize: 0,
            
            dataPoints: [
            {x:new Date(2013,0,1,00,00) , y: 30},
            {x:new Date(2013,0,1,01,00) , y: 30},
            {x:new Date(2013,0,1,02,00) , y: 30},
            {x:new Date(2013,0,1,03,00) , y: 30},
            {x:new Date(2013,0,1,04,00) , y: 30},
            {x:new Date(2013,0,1,05,00) , y: 30},
            {x:new Date(2013,0,1,06,00) , y: 30},
            {x:new Date(2013,0,1,07,00) , y: 30},
            {x:new Date(2013,0,1,08,00) , y: 30},
            {x:new Date(2013,0,1,09,00) , y: 30}
            ]
        },
        {        
            name: "sent",
            showInLegend: false,
            legendMarkerType: "square",
            type: "area",
            color: "rgba(0,75,141,0.7)",
            markerSize: 0,
            label: "",
            dataPoints: [

            {x:new Date(2013,0,1,00,00) , y: 12  },
            {x:new Date(2013,0,1,01,00) , y: 10},
            {x:new Date(2013,0,1,02,00) , y: 3},
            {x:new Date(2013,0,1,03,00) , y: 5},
            {x:new Date(2013,0,1,04,00) , y: 2},
            {x:new Date(2013,0,1,05,00) , y: 1},
            {x:new...