ApexCharts

by ratatosk_noir

HTML

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!--
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
-->
<div id="chart">
</div>

JavaScript

/**
var url = 'https://storage.googleapis.com/pollution-lille/res.json';
var proxy = 'https://cors-anywhere.herokuapp.com/';

var finalURL = proxy + url;

var dataset;
// With the get JSON (frequently used) method
$.getJSON(finalURL, function( data ) {
    dataset = data;
});
console.log(dataset);
*/
var options = {
      chart: {
      radius: 10,
        height: 400,
        type: 'heatmap',
      },
      plotOptions: {
        heatmap: {
          shadeIntensity: 0.5,

          colorScale: {
            ranges: [{
                from: 1,
                to: 3,
                name: 'good [1,3]',
                color: '#00A100'
              },
              {
                from: 4,
                to: 5,
                name: 'medium [4,5]',
                color: '#128FD9'
              },
              {
                from: 6,
                to: 8,
                name: 'bad [6,8]',
                color: '#FFB200'
              },
              {
                from: 9,
                to: 10,
                name: 'extreme [9,10]',
                color: '#FF0000'
              }
            ]
          }
        }
      },
      dataLabels: {
        enabled: false
      },
     ...