- Home
- ApexCharts
- How to draw HeatMapChart - Basic
HeatMapChart
This example shows how to create beautiful HeatMapChart
| Metric_name | Metric_x | Metric_y |
|---|---|---|
| Metric1 | w1 | 0 |
| Metric1 | w2 | 47 |
| Metric1 | w3 | 66 |
| Metric1 | w4 | 23 |
| Metric1 | w5 | 34 |
| Metric1 | w6 | 17 |
| Metric1 | w7 | 88 |
| Metric1 | w8 | 46 |
| Metric1 | w9 | 48 |
| Metric1 | w10 | 23 |
| Metric1 | w11 | 9 |
| Metric1 | w12 | 74 |
| Metric1 | w13 | 81 |
| Metric1 | w14 | 41 |
| Metric1 | w15 | 22 |
| Metric1 | w16 | 22 |
| Metric1 | w17 | 17 |
| Metric1 | w18 | 29 |
| Metric2 | w1 | 9 |
| Metric2 | w2 | 73 |
| Metric2 | w3 | 48 |
| Metric2 | w4 | 76 |
| Metric2 | w5 | 67 |
| Metric2 | w6 | 7 |
| Metric2 | w7 | 49 |
| Metric2 | w8 | 11 |
| Metric2 | w9 | 78 |
| Metric2 | w10 | 42 |
| Metric2 | w11 | 42 |
| Metric2 | w12 | 40 |
| Metric2 | w13 | 21 |
| Metric2 | w14 | 1 |
| Metric2 | w15 | 2 |
| Metric2 | w16 | 90 |
| Metric2 | w17 | 83 |
| Metric2 | w18 | 71 |
| Metric3 | w1 | 51 |
| Metric3 | w2 | 70 |
| Metric3 | w3 | 56 |
| Metric3 | w4 | 31 |
| Metric3 | w5 | 34 |
| Metric3 | w6 | 24 |
| Metric3 | w7 | 32 |
| Metric3 | w8 | 58 |
| Metric3 | w9 | 33 |
| Metric3 | w10 | 4 |
| Metric3 | w11 | 48 |
| Metric3 | w12 | 14 |
| Metric3 | w13 | 41 |
| Metric3 | w14 | 29 |
| Metric3 | w15 | 17 |
| Metric3 | w16 | 5 |
| Metric3 | w17 | 89 |
| Metric3 | w18 | 49 |
| Metric4 | w1 | 8 |
| Metric4 | w2 | 90 |
| Metric4 | w3 | 39 |
| Metric4 | w4 | 63 |
| Metric4 | w5 | 16 |
| Metric4 | w6 | 49 |
| Metric4 | w7 | 90 |
| Metric4 | w8 | 17 |
| Metric4 | w9 | 62 |
| Metric4 | w10 | 36 |
| Metric4 | w11 | 39 |
| Metric4 | w12 | 67 |
| Metric4 | w13 | 16 |
| Metric4 | w14 | 73 |
| Metric4 | w15 | 73 |
| Metric4 | w16 | 8 |
| Metric4 | w17 | 2 |
| Metric4 | w18 | 12 |
| Metric5 | w1 | 58 |
| Metric5 | w2 | 34 |
| Metric5 | w3 | 22 |
| Metric5 | w4 | 46 |
| Metric5 | w5 | 47 |
| Metric5 | w6 | 9 |
| Metric5 | w7 | 89 |
| Metric5 | w8 | 31 |
| Metric5 | w9 | 69 |
| Metric5 | w10 | 24 |
| Metric5 | w11 | 60 |
| Metric5 | w12 | 83 |
| Metric5 | w13 | 42 |
| Metric5 | w14 | 40 |
| Metric5 | w15 | 83 |
| Metric5 | w16 | 42 |
| Metric5 | w17 | 88 |
| Metric5 | w18 | 29 |
| Metric6 | w1 | 72 |
| Metric6 | w2 | 78 |
| Metric6 | w3 | 67 |
| Metric6 | w4 | 50 |
| Metric6 | w5 | 75 |
| Metric6 | w6 | 48 |
| Metric6 | w7 | 27 |
| Metric6 | w8 | 31 |
| Metric6 | w9 | 28 |
| Metric6 | w10 | 40 |
| Metric6 | w11 | 51 |
| Metric6 | w12 | 59 |
| Metric6 | w13 | 5 |
| Metric6 | w14 | 44 |
| Metric6 | w15 | 41 |
| Metric6 | w16 | 0 |
| Metric6 | w17 | 63 |
| Metric6 | w18 | 35 |
| Metric7 | w1 | 40 |
| Metric7 | w2 | 85 |
| Metric7 | w3 | 11 |
| Metric7 | w4 | 38 |
| Metric7 | w5 | 26 |
| Metric7 | w6 | 37 |
| Metric7 | w7 | 22 |
| Metric7 | w8 | 33 |
| Metric7 | w9 | 64 |
| Metric7 | w10 | 85 |
| Metric7 | w11 | 1 |
| Metric7 | w12 | 43 |
| Metric7 | w13 | 74 |
| Metric7 | w14 | 48 |
| Metric7 | w15 | 11 |
| Metric7 | w16 | 36 |
| Metric7 | w17 | 11 |
| Metric7 | w18 | 73 |
| Metric8 | w1 | 35 |
| Metric8 | w2 | 6 |
| Metric8 | w3 | 54 |
| Metric8 | w4 | 30 |
| Metric8 | w5 | 23 |
| Metric8 | w6 | 35 |
| Metric8 | w7 | 28 |
| Metric8 | w8 | 56 |
| Metric8 | w9 | 18 |
| Metric8 | w10 | 25 |
| Metric8 | w11 | 90 |
| Metric8 | w12 | 17 |
| Metric8 | w13 | 60 |
| Metric8 | w14 | 46 |
| Metric8 | w15 | 71 |
| Metric8 | w16 | 11 |
| Metric8 | w17 | 32 |
| Metric8 | w18 | 20 |
| Metric9 | w1 | 27 |
| Metric9 | w2 | 15 |
| Metric9 | w3 | 87 |
| Metric9 | w4 | 66 |
| Metric9 | w5 | 53 |
| Metric9 | w6 | 47 |
| Metric9 | w7 | 44 |
| Metric9 | w8 | 33 |
| Metric9 | w9 | 26 |
| Metric9 | w10 | 35 |
| Metric9 | w11 | 37 |
| Metric9 | w12 | 39 |
| Metric9 | w13 | 29 |
| Metric9 | w14 | 32 |
| Metric9 | w15 | 9 |
| Metric9 | w16 | 66 |
| Metric9 | w17 | 37 |
| Metric9 | w18 | 0 |
\koolreport\apexcharts\HeatMapChart::create(array(
"dataSource" => $data,
"columns" => array(
"Metric_name" => [
"seriesGroup" => true,
],
"Metric_x" => [
'categoryType' => 'category',
],
"Metric_y" => [
'label' => ''
],
)
));
The above example shows you how to create HeatMapChart using ApexCharts package. In this example, for purpose of chart demonstration only, we do use mock-up data from array. As you can see, the KoolReport's widget in general support dataSource could be DataStore, Process, DataSource or even simple array.
<?php
require_once "../../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run()->render();
<?php
class MyReport extends \koolreport\KoolReport
{
}<div class="report-content">
<div class="text-center">
<h1>HeatMapChart</h1>
<p class="lead">
This example shows how to create beautiful HeatMapChart
</p>
</div>
<style>
.apexcharts-canvas {
margin: 0 auto;
}
</style>
<div style="margin-bottom:50px;">
<?php
$data = [
[
'Metric_name',
'Metric_x',
'Metric_y',
],
[
"Metric1",
"w1",
0
],
[
"Metric1",
"w2",
47
],
[
"Metric1",
"w3",
66
],
[
"Metric1",
"w4",
23
],
[
"Metric1",
"w5",
34
],
[
"Metric1",
"w6",
17
],
[
"Metric1",
"w7",
88
],
[
"Metric1",
"w8",
46
],
[
"Metric1",
"w9",
48
],
[
"Metric1",
"w10",
23
],
[
"Metric1",
"w11",
9
],
[
"Metric1",
"w12",
74
],
[
"Metric1",
"w13",
81
],
[
"Metric1",
"w14",
41
],
[
"Metric1",
"w15",
22
],
[
"Metric1",
"w16",
22
],
[
"Metric1",
"w17",
17
],
[
"Metric1",
"w18",
29
],
[
"Metric2",
"w1",
9
],
[
"Metric2",
"w2",
73
],
[
"Metric2",
"w3",
48
],
[
"Metric2",
"w4",
76
],
[
"Metric2",
"w5",
67
],
[
"Metric2",
"w6",
7
],
[
"Metric2",
"w7",
49
],
[
"Metric2",
"w8",
11
],
[
"Metric2",
"w9",
78
],
[
"Metric2",
"w10",
42
],
[
"Metric2",
"w11",
42
],
[
"Metric2",
"w12",
40
],
[
"Metric2",
"w13",
21
],
[
"Metric2",
"w14",
1
],
[
"Metric2",
"w15",
2
],
[
"Metric2",
"w16",
90
],
[
"Metric2",
"w17",
83
],
[
"Metric2",
"w18",
71
],
[
"Metric3",
"w1",
51
],
[
"Metric3",
"w2",
70
],
[
"Metric3",
"w3",
56
],
[
"Metric3",
"w4",
31
],
[
"Metric3",
"w5",
34
],
[
"Metric3",
"w6",
24
],
[
"Metric3",
"w7",
32
],
[
"Metric3",
"w8",
58
],
[
"Metric3",
"w9",
33
],
[
"Metric3",
"w10",
4
],
[
"Metric3",
"w11",
48
],
[
"Metric3",
"w12",
14
],
[
"Metric3",
"w13",
41
],
[
"Metric3",
"w14",
29
],
[
"Metric3",
"w15",
17
],
[
"Metric3",
"w16",
5
],
[
"Metric3",
"w17",
89
],
[
"Metric3",
"w18",
49
],
[
"Metric4",
"w1",
8
],
[
"Metric4",
"w2",
90
],
[
"Metric4",
"w3",
39
],
[
"Metric4",
"w4",
63
],
[
"Metric4",
"w5",
16
],
[
"Metric4",
"w6",
49
],
[
"Metric4",
"w7",
90
],
[
"Metric4",
"w8",
17
],
[
"Metric4",
"w9",
62
],
[
"Metric4",
"w10",
36
],
[
"Metric4",
"w11",
39
],
[
"Metric4",
"w12",
67
],
[
"Metric4",
"w13",
16
],
[
"Metric4",
"w14",
73
],
[
"Metric4",
"w15",
73
],
[
"Metric4",
"w16",
8
],
[
"Metric4",
"w17",
2
],
[
"Metric4",
"w18",
12
],
[
"Metric5",
"w1",
58
],
[
"Metric5",
"w2",
34
],
[
"Metric5",
"w3",
22
],
[
"Metric5",
"w4",
46
],
[
"Metric5",
"w5",
47
],
[
"Metric5",
"w6",
9
],
[
"Metric5",
"w7",
89
],
[
"Metric5",
"w8",
31
],
[
"Metric5",
"w9",
69
],
[
"Metric5",
"w10",
24
],
[
"Metric5",
"w11",
60
],
[
"Metric5",
"w12",
83
],
[
"Metric5",
"w13",
42
],
[
"Metric5",
"w14",
40
],
[
"Metric5",
"w15",
83
],
[
"Metric5",
"w16",
42
],
[
"Metric5",
"w17",
88
],
[
"Metric5",
"w18",
29
],
[
"Metric6",
"w1",
72
],
[
"Metric6",
"w2",
78
],
[
"Metric6",
"w3",
67
],
[
"Metric6",
"w4",
50
],
[
"Metric6",
"w5",
75
],
[
"Metric6",
"w6",
48
],
[
"Metric6",
"w7",
27
],
[
"Metric6",
"w8",
31
],
[
"Metric6",
"w9",
28
],
[
"Metric6",
"w10",
40
],
[
"Metric6",
"w11",
51
],
[
"Metric6",
"w12",
59
],
[
"Metric6",
"w13",
5
],
[
"Metric6",
"w14",
44
],
[
"Metric6",
"w15",
41
],
[
"Metric6",
"w16",
0
],
[
"Metric6",
"w17",
63
],
[
"Metric6",
"w18",
35
],
[
"Metric7",
"w1",
40
],
[
"Metric7",
"w2",
85
],
[
"Metric7",
"w3",
11
],
[
"Metric7",
"w4",
38
],
[
"Metric7",
"w5",
26
],
[
"Metric7",
"w6",
37
],
[
"Metric7",
"w7",
22
],
[
"Metric7",
"w8",
33
],
[
"Metric7",
"w9",
64
],
[
"Metric7",
"w10",
85
],
[
"Metric7",
"w11",
1
],
[
"Metric7",
"w12",
43
],
[
"Metric7",
"w13",
74
],
[
"Metric7",
"w14",
48
],
[
"Metric7",
"w15",
11
],
[
"Metric7",
"w16",
36
],
[
"Metric7",
"w17",
11
],
[
"Metric7",
"w18",
73
],
[
"Metric8",
"w1",
35
],
[
"Metric8",
"w2",
6
],
[
"Metric8",
"w3",
54
],
[
"Metric8",
"w4",
30
],
[
"Metric8",
"w5",
23
],
[
"Metric8",
"w6",
35
],
[
"Metric8",
"w7",
28
],
[
"Metric8",
"w8",
56
],
[
"Metric8",
"w9",
18
],
[
"Metric8",
"w10",
25
],
[
"Metric8",
"w11",
90
],
[
"Metric8",
"w12",
17
],
[
"Metric8",
"w13",
60
],
[
"Metric8",
"w14",
46
],
[
"Metric8",
"w15",
71
],
[
"Metric8",
"w16",
11
],
[
"Metric8",
"w17",
32
],
[
"Metric8",
"w18",
20
],
[
"Metric9",
"w1",
27
],
[
"Metric9",
"w2",
15
],
[
"Metric9",
"w3",
87
],
[
"Metric9",
"w4",
66
],
[
"Metric9",
"w5",
53
],
[
"Metric9",
"w6",
47
],
[
"Metric9",
"w7",
44
],
[
"Metric9",
"w8",
33
],
[
"Metric9",
"w9",
26
],
[
"Metric9",
"w10",
35
],
[
"Metric9",
"w11",
37
],
[
"Metric9",
"w12",
39
],
[
"Metric9",
"w13",
29
],
[
"Metric9",
"w14",
32
],
[
"Metric9",
"w15",
9
],
[
"Metric9",
"w16",
66
],
[
"Metric9",
"w17",
37
],
[
"Metric9",
"w18",
0
]
];
// \koolreport\core\Utility::prettyPrint2(array_slice($data, 0, 20));
\koolreport\widgets\koolphp\Table::create([
'dataSource' => $data,
'paging' => true,
]);
?>
<i class="fa fa-arrow-down" style="font-size:24px;"></i>
<pre style="font-weight:bold"><code>
\koolreport\apexcharts\HeatMapChart::create(array(
"dataSource" => $data,
"columns" => array(
"Metric_name" => [
"seriesGroup" => true,
],
"Metric_x" => [
'categoryType' => 'category',
],
"Metric_y" => [
'label' => ''
],
)
));
</code></pre>
<i class="fa fa-arrow-down" style="font-size:24px;"></i>
<div>
<?php
\koolreport\apexcharts\HeatMapChart::create(array(
"title" => "HeatMap Chart (Single color)",
"dataSource" => $data,
"columns" => array(
"Metric_name" => [
"seriesGroup" => true,
],
"Metric_x" => [
'categoryType' => 'category',
],
"Metric_y" => [
'label' => ''
],
),
"options" => [],
"colors" => ["#008FFB"],
'widthHeightAutoRatio' => 1.8,
// "showLegend" => false,
// "showLabel" => true,
// "height" => "400px",
// "width" => "85%",
"maxWidth" => "800px",
));
?>
</div>
</div>
</div>What People Are Saying
"KoolReport helps me very much in creating data report for my corporate! Keep up your good work!"
--
Alain Melsens
"The first use of your product. I was impressed by its easiness and powerfulness. This product is a great and amazing."
--
Dr. Lew Choy Onn
"Fantastic framework for reporting!"
--
Greg Schneider