Basic HTML5 Chart Example - CanvasJS JavaScript Charts

Basic HTML5 Chart Example - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="chartContainer"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
      title: {
          text: 'Survey',
          fontFamily: 'sans-serif',
          fontSize: 18,
          fontColor: 'grey',
          margin: 20
        },
        height: 1800,
        colorSet: 'questions',
        axisX: {
          labelFontSize: 10,
          labelMaxWidth: 250,
          labelAutofit: true,
          interval : 1
        },
        axisY: {
          title: '',
          maximum: 105
        },
        interactivityEnabled: false,
        toolTip: {
          enabled: false
        },
        legend: {
          verticalAlign: 'top',
          fontFamily: 'arial',
          fontColor: 'grey',
          fontSize: 13
        },
      data: [
    {
        "type": "stackedBar100",
        "showInLegend": true,
        "name": "Strongly Disagree",
        "dataPoints": [
            {
                "label": "Overall, your experience with Plum 360 was good:",
                "y": 11
            },
            {
                "label": "You are likely to recommend Plum 360 to a friend or colleague:",
                "y": 0
            },
            {
                "label": "Attaching the pump to the IV pole was straightforward:",
                "y": 0
            },
            {
                "label": "Priming the administration set was straightforward:",
                "y": 0
            },
            {
                "label": "Loading the cassette into the infuser was straightforward:",
                "y": 8
            },
            {
                "label": "Securing the administration set within the tubing guide was straightforward:",
                "y": 9
            },
            {
                "label": "The keypad response time was good:",
                "y": 0
            },
            {
                "label": "Selecting a medication from the drug library was straightforward:",
                "y": 0
            },
            {
                "label":...