betillogalvanfbc · May 15, 2020 20:08
diff --git a/magic.html b/magic.html
 <!DOCTYPE html>
 <html class="no-js">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ABC</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <style>
      #chart {
        max-width: 650px;
        margin: 35px auto;
      }
      .apexcharts-tooltip:not(:empty) {
        padding: 6px 9px;
      }
    </style>
    <div id="chart"></div>
    <script>
      function generateData(count, yrange) {
        var i = 0;
        var series = [];
        while (i < count) {
          var x = (i + 1).toString();
          var y =
            Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
            yrange.min;

          series.push({
            x: x,
            y: y,
          });
          i++;
        }
        return series;
      }

      var options = {
        chart: {
          height: 350,
          type: "heatmap",
        },
        plotOptions: {
          heatmap: {
            shadeIntensity: 0.5,
            radius: 0,
            useFillColorAsStroke: true,
            colorScale: {
              ranges: [
                {
                  from: -30,
                  to: 5,
                  name: "low",
                  color: "#00A100",
                },
                {
                  from: 6,
                  to: 20,
                  name: "medium",
                  color: "#128FD9",
                },
                {
                  from: 21,
                  to: 45,
                  name: "high",
                  color: "#FFB200",
                },
                {
                  from: 46,
                  to: 55,
                  name: "extreme",
                  color: "#FF0000",
                },
              ],
            },
          },
        },
        dataLabels: {
          enabled: false,
        },
        series: [
          {
            name: "Jan",
            data: generateData(20, {
              min: -30,
              max: 55,
            }),
          },
          {
            name: "Feb",
            data: generateData(20, {
              min: -30,
              max: 55,
            }),
          },
          {
            name: "Mar",
            data: generateData(20, {
              min: -30,
              max: 55,
            }),
          },
          {
            name: "Apr",
            data: generateData(20, {
              min: -30,
              max: 55,
            }),
          },
          {
            name: "Beto",
            data: generateData(20, {
              min: 0,
              max: 0,
            }),
          },
          {
            name: "May",
            data: generateData(20, {
              min: -30,
              max: 55,
            }),
          },
          {
            name: "Jun",
            data: generateData(20, {
              min: -30,
              max: 55,
            }),
          },
          {
            name: "Jul",
            data: generateData(20, {
              min: -30,
              max: 55,
            }),
          },
          {
            name: "Aug",
            data: generateData(20, {
              min: -30,
              max: 55,
            }),
          },
        ],
        tooltip: {
          custom: function ({ series, seriesIndex, dataPointIndex, w }) {
            if (w.globals.seriesNames[seriesIndex] !== "") {
              return series[seriesIndex][dataPointIndex];
            } else {
              return "";
            }
          },
        },
      };

      var chart = new ApexCharts(document.querySelector("#chart"), options);

      chart.render();
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html class="no-js">
	<head>
	<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>ABC</title>
	<meta name="description" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" href="" />
	</head>
	<body>
	<style>
	#chart {
	max-width: 650px;
	margin: 35px auto;
	}
	.apexcharts-tooltip:not(:empty) {
	padding: 6px 9px;
	}
	</style>
	<div id="chart"></div>
	<script>
	function generateData(count, yrange) {
	var i = 0;
	var series = [];
	while (i < count) {
	var x = (i + 1).toString();
	var y =
	Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
	yrange.min;

	series.push({
	x: x,
	y: y,
	});
	i++;
	}
	return series;
	}

	var options = {
	chart: {
	height: 350,
	type: "heatmap",
	},
	plotOptions: {
	heatmap: {
	shadeIntensity: 0.5,
	radius: 0,
	useFillColorAsStroke: true,
	colorScale: {
	ranges: [
	{
	from: -30,
	to: 5,
	name: "low",
	color: "#00A100",
	},
	{
	from: 6,
	to: 20,
	name: "medium",
	color: "#128FD9",
	},
	{
	from: 21,
	to: 45,
	name: "high",
	color: "#FFB200",
	},
	{
	from: 46,
	to: 55,
	name: "extreme",
	color: "#FF0000",
	},
	],
	},
	},
	},
	dataLabels: {
	enabled: false,
	},
	series: [
	{
	name: "Jan",
	data: generateData(20, {
	min: -30,
	max: 55,
	}),
	},
	{
	name: "Feb",
	data: generateData(20, {
	min: -30,
	max: 55,
	}),
	},
	{
	name: "Mar",
	data: generateData(20, {
	min: -30,
	max: 55,
	}),
	},
	{
	name: "Apr",
	data: generateData(20, {
	min: -30,
	max: 55,
	}),
	},
	{
	name: "Beto",
	data: generateData(20, {
	min: 0,
	max: 0,
	}),
	},
	{
	name: "May",
	data: generateData(20, {
	min: -30,
	max: 55,
	}),
	},
	{
	name: "Jun",
	data: generateData(20, {
	min: -30,
	max: 55,
	}),
	},
	{
	name: "Jul",
	data: generateData(20, {
	min: -30,
	max: 55,
	}),
	},
	{
	name: "Aug",
	data: generateData(20, {
	min: -30,
	max: 55,
	}),
	},
	],
	tooltip: {
	custom: function ({ series, seriesIndex, dataPointIndex, w }) {
	if (w.globals.seriesNames[seriesIndex] !== "") {
	return series[seriesIndex][dataPointIndex];
	} else {
	return "";
	}
	},
	},
	};

	var chart = new ApexCharts(document.querySelector("#chart"), options);

	chart.render();
	</script>
	</body>
	</html>