Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

by Alina Vlăduțu

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs({
      event: "mouseover"
    });
  });
  </script>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab1</a></li>
    <li><a href="#tabs-2">Tab2</a></li>
    <li><a href="#tabs-3">Tab3</a></li>
  </ul>
  <div id="tabs-1">
    <div id="chartContainer1" style="height: 360px; width: 100%;"></div>
  </div>
  <div id="tabs-2">
    <div id="chartContainer2" style="height: 360px; width: 100%;"></div>
  </div>
  <div id="tabs-3">
    <div id="chartContainer3" style="height: 360px; width: 100%;"></div>
  </div>
</div>
</body>

CSS

/*! jQuery UI - v1.11.1 - 2014-08-13
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, button.css, datepicker.css, dialog.css, draggable.css, menu.css, progressbar.css, resizable.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width:...

JavaScript

var chart = new CanvasJS.Chart("chartContainer1",
	{
      legend:{
         verticalAlign: "bottom",
         horizontalAlign: "center",
         fontSize: 25,
         fontFamily: "Verdana, Arial, sans-serif"
      },  
      data: [
      {
        name: "Test",
        type: "line",
        dataPoints: [
        { label: "Aug-13", y: 71 },
        { label: "Sep-13", y: 55},
        { label: "Oct-13", y: 50 },
        { label: "Nov-13", y: 65 },
        { label: "Dec-13", y: 95 },
        { label: "Jan-14", y: 68 },
        { label: "Feb-14", y: 28 },
        { label: "Mar-14", y: 34 },
        { label: "Apr-14", y: 14},
        { label: "May-14", y: 36},
        { label: "June-14", y: 83},
        { label: "July-14", y: 96}
        ]
      }
      ]
    });

 chart.render();

var chart = new CanvasJS.Chart("chartContainer2",
	{
        
      data: [
      {
        type: "line",
        dataPoints: [
        { label: "Aug-13", y: 71 },
        { label: "Sep-13", y: 55},
        { label: "Oct-13", y: 50 },
        { label: "Nov-13", y: 65 },
        { label: "Dec-13", y: 95 },
        { label: "Jan-14", y: 68 },
        { label: "Feb-14", y: 28 },
        { label: "Mar-14", y: 34 },
        { label: "Apr-14", y: 14},
        { label: "May-14", y: 36},
        { label: "June-14", y: 83},
        { label: "July-14", y: 96}
        ]
      }
      ]
    });

 chart.render();

var chart = new CanvasJS.Chart("chartContainer3",
	{
        
      data: [
      {
        type: "line",
        dataPoints: [
        { label: "Aug-13", y: 71 },
        { label: "Sep-13", y: 55},
        { label: "Oct-13", y: 50 },
        { label: "Nov-13", y: 65 },
        { label: "Dec-13", y: 95 },
        { label: "Jan-14", y: 68 },
        { label: "Feb-14", y: 28 },
        { label: "Mar-14", y: 34 },
        { label: "Apr-14", y: 14},
        { label: "May-14", y: 36},
        { label: "June-14", y: 83},
        { label: "July-14", y: 96}
        ]
      }
      ]
    });

...