Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
        data: [	
      {
        type: "scatter",
        markerType: "circle",
       markerSize:6,
      markerColor: "#90EE90",
     name: "Data One",
       showInLegend: true,
        dataPoints: [
       { x: 11, y: 71 },
        { x: 22, y: 55},
        { x: 33, y: 50 },
        { x: 44, y: 65 },
        { x: 55, y: 95 },
        { x: 66, y: 68 },
        { x: 77, y: 28 },
        { x: 88, y: 34 },
        { x: 99, y: 14}
        ]
      }, 
            {
                        type: "scatter",
                        name: "Data 2",
                        markerType: "square",
                        markerSize:6,
                        markerColor: "red",
                        showInLegend: true,

                        dataPoints: 
                [
       { x: 12, y: 71 },
        { x: 23, y: 55},
        { x: 34, y: 50 },
        { x: 45, y: 65 },
        { x: 56, y: 95 },
        { x: 67, y: 68 },
        { x: 78, y: 28 },
        { x: 89, y: 34 },
        { x: 100, y: 14}
        ]
            },
            {
                        type: "scatter",
                        name: "Data 3",
                        markerType: "square",
                        markerSize:6,
                        markerColor:"black",
                        showInLegend: true,
                        legendText:"Data 3",
                        legendMarkerType:"none",
                        dataPoints: [
                        { x: 12, y: 71 },
        { x: 24, y: 0},
        { x: 35, y: 0 },
        { x: 46, y: 0 },
        { x: 57, y: 0 },
        { x: 68, y: 0 },
        { x: 79, y: 0 },
        { x: 90, y: 0 },
        { x: 101, y: 0}]
                    } ,
                    {
                        type: "scatter",
                        name: "Data four",
                        markerType: "square",
                        markerSize:6,
                        markerColor:"black",
             ...