54 lines
1.2 KiB
HTML
54 lines
1.2 KiB
HTML
|
<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>
|