<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>