chart.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <script src="static/js/jquery.js"></script>
  2. <script src="static/js/apex.js"></script>
  3. <script>
  4. $(document).ready(
  5. var DATA = {{dat|tojson}}
  6. var options = {
  7. series: [{
  8. name: "Desktops",
  9. data: DATA.values()
  10. }],
  11. chart: {
  12. height: 350,
  13. type: 'line',
  14. zoom: {
  15. enabled: false
  16. }
  17. },
  18. dataLabels: {
  19. enabled: false
  20. },
  21. stroke: {
  22. curve: 'straight'
  23. },
  24. title: {
  25. text: 'Product Trends by Month',
  26. align: 'left'
  27. },
  28. grid: {
  29. row: {
  30. colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
  31. opacity: 0.5
  32. },
  33. },
  34. xaxis: {
  35. categories: Object.keys(DATA),
  36. }
  37. };
  38. $(document).ready( function(){
  39. var chart = new ApexCharts(document.querySelector("#chart"), options);
  40. chart.render();
  41. })
  42. )
  43. </script>
  44. <body>
  45. <div>{{title}}</div>
  46. <div id="chart">
  47. </div>
  48. <div class="text">
  49. {{total}} of {{ title }}
  50. </div>
  51. </body>