Basic HTML5 Chart Example - CanvasJS JavaScript Charts
Basic HTML5 Chart Example - CanvasJS JavaScript Charts
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
},
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": "Entering the infusion...