<script src="static/js/jquery.js"></script>
<script src="static/js/apex.js"></script>
<script>
$(document).ready(
var DATA = {{dat|tojson}}
var options = {
series: [{
name: "Desktops",
data: DATA.values()
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: Object.keys(DATA),
}
};
$(document).ready( function(){
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
})
)
</script>
<body>
<div>{{title}}</div>
<div id="chart">
</div>
<div class="text">
{{total}} of {{ title }}
</div>
</body>