66 lines
1.6 KiB
HTML
Executable File
66 lines
1.6 KiB
HTML
Executable File
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<script>
|
|
window.onload = function () {
|
|
|
|
var chart = new CanvasJS.Chart("chartContainer", {
|
|
title:{
|
|
text: "Popular Fast Food Chains"
|
|
},
|
|
axisY: {
|
|
title: "Number of Locations",
|
|
lineColor: "#4F81BC",
|
|
tickColor: "#4F81BC",
|
|
labelFontColor: "#4F81BC"
|
|
},
|
|
axisY2: {
|
|
title: "Percent",
|
|
suffix: "%",
|
|
lineColor: "#C0504E",
|
|
tickColor: "#C0504E",
|
|
labelFontColor: "#C0504E"
|
|
},
|
|
data: [{
|
|
type: "column",
|
|
dataPoints: [
|
|
{ label: "Subways", y: 44853 },
|
|
{ label: "McDonald", y: 36525 },
|
|
{ label: "Starbucks", y: 23768 },
|
|
{ label: "KFC", y: 19420 },
|
|
{ label: "Pizza Hut", y: 13528 },
|
|
{ label: "Dunkin Donuts", y: 11906 }
|
|
]
|
|
}]
|
|
});
|
|
chart.render();
|
|
createPareto();
|
|
|
|
function createPareto(){
|
|
var dps = [];
|
|
var yValue, yTotal = 0, yPercent = 0;
|
|
|
|
for(var i = 0; i < chart.data[0].dataPoints.length; i++)
|
|
yTotal += chart.data[0].dataPoints[i].y;
|
|
|
|
for(var i = 0; i < chart.data[0].dataPoints.length; i++){
|
|
yValue = chart.data[0].dataPoints[i].y;
|
|
yPercent += (yValue / yTotal * 100);
|
|
dps.push({label: chart.data[0].dataPoints[i].label, y: yPercent});
|
|
}
|
|
|
|
chart.addTo("data",{type:"line", yValueFormatString: "0.##'%'", dataPoints: dps});
|
|
chart.data[1].set("axisYType", "secondary", false);
|
|
chart.axisY[0].set("maximum", yTotal);
|
|
chart.axisY2[0].set("maximum", 100);
|
|
}
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
|
|
<script src="../../canvasjs.min.js"></script>
|
|
</body>
|
|
</html> |