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",
	{
        	axisX: {
			interval:1,
			
		},
      data: [
      {
        type: "rangeBar",
        dataPoints: [
            { x: 1, y: [1,10], color: "Red" },
            { x: 1, y: [10,20], color:"Green"},
            { x: 1, y: [20,30], color: "Blue" }    
        ]
      },
           {
        type: "rangeBar",
        dataPoints: [
            { x: 2, y: [1,15], color: "Red" },
            { x: 2, y: [15,24], color:"Green"},
            { x: 2, y: [24,35], color: "Blue" },
        ]
      },
           {
        type: "rangeBar",
        dataPoints: [
       
            { x: 3, y: [1,4], color: "Red" },
            { x: 3, y: [4,20], color:"Green"},
            { x: 3, y: [20,39], color: "Blue" },
        ]
      },
           {
        type: "rangeBar",
        dataPoints: [
       
            { x: 4, y: [1,4], color: "Red" },
            { x: 4, y: [4,20], color:"Green"},
            { x: 4, y: [20,39], color: "Blue" },
        ]
      },
                                {
        type: "rangeBar",
        dataPoints: [
       
            { x: 5, y: [1,4], color: "Red" },
            { x: 5, y: [4,20], color:"Green"},
            { x: 5, y: [20,39], color: "Blue" },
        ]
      }
      ]
    });

 chart.render();