Basic Column Chart - CanvasJS
Basic Column Chart
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="width:100%;height:3000px;">
<h3>Scroll down!</h3>
</div>
<div id="chartContainer0" class="graph"></div>
<div style="height: 150px;"></div>
<div id="chartContainer0" class="graph"></div>
JavaScript
//graphs
window.onload = function () {
//graph0
var chart = new CanvasJS.Chart("chartContainer0", {
animationEnabled: true,
theme: "dark1", // "light1", "light2", "dark1", "dark2"
title:{
text: "Processos de apoio",
fontWeight: "500",
fontFamily: "Comfortaa",
fontSize: "30"
},
axisY: {
title: "Casos por ano",
titleFontColor: "#ff6386",
lineColor: "#ff6386",
labelFontColor: "#ff6386",
tickColor: "#ff6386",
includeZero: true
},
data: [{
type: "column",
showInLegend: true,
legendMarkerColor: "#292929",
legendText: "Casos por ano",
dataPoints: [
{ y: 557, label: "2013" },
{ y: 553, label: "2014" },
{ y: 667, label: "2015" },
{ y: 827, label: "2016" },
{ y: 765, label: "2017" },
{ y: 723, label: "2018" }
]
}]
});
var chart = [];
var offsetForChartToDisplay = [];
var chartAnimated = [];
chart.push(new CanvasJS.Chart("chartContainer0", options));
for(var i=0; i<chart.length; i++) {
offsetForChartToDisplay.push(chart[i].container.offsetTop + 250);
}
function scrollFunction0() {
var currentScrollPos = document.documentElement.scrollTop+window.innerHeight;
for(var i=0; i<chart.length; i++) {
if( currentScrollPos > offsetForChartToDisplay[i]) {
if(chartAnimated.length == 2) {
window.removeEventListener("scroll", scrollFunction0);
break;
}
if(chartAnimated.indexOf(i) == -1) {
chart[i].render();
chartAnimated.push(i);
}
}
}
}
window.addEventListener("scroll", scrollFunction0);
}
//graph1
var chart = new...