Date ranges - CanvasJS

by toubia95

HTML

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

CSS

/* 
http://canvasjs.com/editor/?id=http://canvasjs.com/example/gallery/bar/products_division/ 
http://canvasjs.com/html5-javascript-bar-chart/
*/

.description {
    margin-top: 50px;
    text-align:left;
    font-family: calibri;
    font-size: 16px;
    color: gray;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
        text: "Période optimale",             

      },
      axisY:{
        title: "Années",
      },

      data:[
      {        
        type: "stackedBar100",
        showInLegend: false, 
        name: "April",
        dataPoints: [
        {y: 500, label: "Water Filter" },
        {y: 400, label: "Modern Chair" },
        {y: 120, label: "VOIP Phone" },
        {y: 250, label: "Microwave" },
        {y: 120, label: "Water Filter" },
        {y: 374, label: "Expresso Machine" },
        {y: 350, label: "Lobby Chair" },

        ]
      },
      {        
        type: "stackedBar100",
        showInLegend: false, 
        name: "May",
        dataPoints: [
        {y: 400, label: "Water Filter" },
        {y: 500, label: "Modern Chair" },
        {y: 220, label: "VOIP Phone" },
        {y: 350, label: "Microwave" },
        {y: 220, label: "Water Filter" },
        {y: 474, label: "Expresso Machine" },
        {y: 450, label: "Lobby Chair" },

        ]
      }, 
      {        
        type: "stackedBar100",
        showInLegend: false, 
        name: "June",
        dataPoints: [
        {y: 300, label: "Water Filter" },
        {y: 610, label: "Modern Chair" },
        {y: 215, label: "VOIP Phone" },
        {y: 221, label: "Microwave" },
        {y: 75, label: "Water Filter" },
        {y: 310, label: "Expresso Machine" },
        {y: 340, label: "Lobby Chair" },

        ]
      },  


      
      ]

    });

chart.render();