<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
]
];
$data2 = \koolreport\apexcharts\Chart::rowsToColumns($data, [
'rowColumns' => ['Metric_x'],
'valueColumns' => ['Metric_y'],
'fixedColumns' => ['Metric_name']
]);
// \koolreport\core\Utility::prettyPrint2($data2);
?>
<div style="overflow: scroll">
<?php
\koolreport\widgets\koolphp\Table::create([
'dataSource' => $data2,
// 'paging' => true,
]);
?>
</div>
<i class="fa fa-arrow-down" style="font-size:24px;"></i>
<pre style="font-weight:bold"><code>
$data_transpose = \koolreport\core\Utility::transpose($data);
</code></pre>
<i class="fa fa-arrow-down" style="font-size:24px;"></i>
<?php
$data_transpose = \koolreport\core\Utility::transpose($data2);
// \koolreport\core\Utility::prettyPrint2($data_transpose);
?>
<div style="overflow: scroll">
<?php
\koolreport\widgets\koolphp\Table::create([
'dataSource' => $data_transpose,
// 'paging' => true,
]);
?>
</div>
<i class="fa fa-arrow-down" style="font-size:24px;"></i>
<pre style="font-weight:bold"><code>
\koolreport\apexcharts\HeatMapChart::create(array(
"dataSource" => $data_transpose,
"columns" => $data_transpose[0],
));
</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_transpose,
"columns" => $data_transpose[0],
"options" => [],
"colors" => ["#008FFB"],
'widthHeightAutoRatio' => 1.8,
// "showLegend" => false,
// "showLabel" => true,
// "height" => "400px",
// "width" => "85%",
"maxWidth" => "800px",
));
?>
</div>
</div>
</div>
