- Home
- ApexCharts
- How to draw ApexCharts
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' => ''
],
)
));
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 |
$data2 = \koolreport\apexcharts\Chart::rowsToColumns($data, [
'rowColumns' => ['Metric_x'],
'valueColumns' => ['Metric_y'],
'fixedColumns' => ['Metric_name']
]);
Metric_name | w1__Metric_y | w2__Metric_y | w3__Metric_y | w4__Metric_y | w5__Metric_y | w6__Metric_y | w7__Metric_y | w8__Metric_y | w9__Metric_y | w10__Metric_y | w11__Metric_y | w12__Metric_y | w13__Metric_y | w14__Metric_y | w15__Metric_y | w16__Metric_y | w17__Metric_y | w18__Metric_y |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Metric1 | 0 | 47 | 66 | 23 | 34 | 17 | 88 | 46 | 48 | 23 | 9 | 74 | 81 | 41 | 22 | 22 | 17 | 29 |
Metric2 | 9 | 73 | 48 | 76 | 67 | 7 | 49 | 11 | 78 | 42 | 42 | 40 | 21 | 1 | 2 | 90 | 83 | 71 |
Metric3 | 51 | 70 | 56 | 31 | 34 | 24 | 32 | 58 | 33 | 4 | 48 | 14 | 41 | 29 | 17 | 5 | 89 | 49 |
Metric4 | 8 | 90 | 39 | 63 | 16 | 49 | 90 | 17 | 62 | 36 | 39 | 67 | 16 | 73 | 73 | 8 | 2 | 12 |
Metric5 | 58 | 34 | 22 | 46 | 47 | 9 | 89 | 31 | 69 | 24 | 60 | 83 | 42 | 40 | 83 | 42 | 88 | 29 |
Metric6 | 72 | 78 | 67 | 50 | 75 | 48 | 27 | 31 | 28 | 40 | 51 | 59 | 5 | 44 | 41 | 0 | 63 | 35 |
Metric7 | 40 | 85 | 11 | 38 | 26 | 37 | 22 | 33 | 64 | 85 | 1 | 43 | 74 | 48 | 11 | 36 | 11 | 73 |
Metric8 | 35 | 6 | 54 | 30 | 23 | 35 | 28 | 56 | 18 | 25 | 90 | 17 | 60 | 46 | 71 | 11 | 32 | 20 |
Metric9 | 27 | 15 | 87 | 66 | 53 | 47 | 44 | 33 | 26 | 35 | 37 | 39 | 29 | 32 | 9 | 66 | 37 | 0 |
\koolreport\apexcharts\HeatMapChart::create(array(
"dataSource" => $data2,
"columns" => $data2[0],
));
HeatMapChart
This example shows how to create beautiful HeatMapChart
Metric_name | w1__Metric_y | w2__Metric_y | w3__Metric_y | w4__Metric_y | w5__Metric_y | w6__Metric_y | w7__Metric_y | w8__Metric_y | w9__Metric_y | w10__Metric_y | w11__Metric_y | w12__Metric_y | w13__Metric_y | w14__Metric_y | w15__Metric_y | w16__Metric_y | w17__Metric_y | w18__Metric_y |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Metric1 | 0 | 47 | 66 | 23 | 34 | 17 | 88 | 46 | 48 | 23 | 9 | 74 | 81 | 41 | 22 | 22 | 17 | 29 |
Metric2 | 9 | 73 | 48 | 76 | 67 | 7 | 49 | 11 | 78 | 42 | 42 | 40 | 21 | 1 | 2 | 90 | 83 | 71 |
Metric3 | 51 | 70 | 56 | 31 | 34 | 24 | 32 | 58 | 33 | 4 | 48 | 14 | 41 | 29 | 17 | 5 | 89 | 49 |
Metric4 | 8 | 90 | 39 | 63 | 16 | 49 | 90 | 17 | 62 | 36 | 39 | 67 | 16 | 73 | 73 | 8 | 2 | 12 |
Metric5 | 58 | 34 | 22 | 46 | 47 | 9 | 89 | 31 | 69 | 24 | 60 | 83 | 42 | 40 | 83 | 42 | 88 | 29 |
Metric6 | 72 | 78 | 67 | 50 | 75 | 48 | 27 | 31 | 28 | 40 | 51 | 59 | 5 | 44 | 41 | 0 | 63 | 35 |
Metric7 | 40 | 85 | 11 | 38 | 26 | 37 | 22 | 33 | 64 | 85 | 1 | 43 | 74 | 48 | 11 | 36 | 11 | 73 |
Metric8 | 35 | 6 | 54 | 30 | 23 | 35 | 28 | 56 | 18 | 25 | 90 | 17 | 60 | 46 | 71 | 11 | 32 | 20 |
Metric9 | 27 | 15 | 87 | 66 | 53 | 47 | 44 | 33 | 26 | 35 | 37 | 39 | 29 | 32 | 9 | 66 | 37 | 0 |
$data_transpose = \koolreport\core\Utility::transpose($data);
Metric_name | Metric1 | Metric2 | Metric3 | Metric4 | Metric5 | Metric6 | Metric7 | Metric8 | Metric9 |
---|---|---|---|---|---|---|---|---|---|
w1__Metric_y | 0 | 9 | 51 | 8 | 58 | 72 | 40 | 35 | 27 |
w2__Metric_y | 47 | 73 | 70 | 90 | 34 | 78 | 85 | 6 | 15 |
w3__Metric_y | 66 | 48 | 56 | 39 | 22 | 67 | 11 | 54 | 87 |
w4__Metric_y | 23 | 76 | 31 | 63 | 46 | 50 | 38 | 30 | 66 |
w5__Metric_y | 34 | 67 | 34 | 16 | 47 | 75 | 26 | 23 | 53 |
w6__Metric_y | 17 | 7 | 24 | 49 | 9 | 48 | 37 | 35 | 47 |
w7__Metric_y | 88 | 49 | 32 | 90 | 89 | 27 | 22 | 28 | 44 |
w8__Metric_y | 46 | 11 | 58 | 17 | 31 | 31 | 33 | 56 | 33 |
w9__Metric_y | 48 | 78 | 33 | 62 | 69 | 28 | 64 | 18 | 26 |
w10__Metric_y | 23 | 42 | 4 | 36 | 24 | 40 | 85 | 25 | 35 |
w11__Metric_y | 9 | 42 | 48 | 39 | 60 | 51 | 1 | 90 | 37 |
w12__Metric_y | 74 | 40 | 14 | 67 | 83 | 59 | 43 | 17 | 39 |
w13__Metric_y | 81 | 21 | 41 | 16 | 42 | 5 | 74 | 60 | 29 |
w14__Metric_y | 41 | 1 | 29 | 73 | 40 | 44 | 48 | 46 | 32 |
w15__Metric_y | 22 | 2 | 17 | 73 | 83 | 41 | 11 | 71 | 9 |
w16__Metric_y | 22 | 90 | 5 | 8 | 42 | 0 | 36 | 11 | 66 |
w17__Metric_y | 17 | 83 | 89 | 2 | 88 | 63 | 11 | 32 | 37 |
w18__Metric_y | 29 | 71 | 49 | 12 | 29 | 35 | 73 | 20 | 0 |
\koolreport\apexcharts\HeatMapChart::create(array(
"dataSource" => $data_transpose,
"columns" => $data_transpose[0],
));
HeatMapChart
This example shows how to create beautiful HeatMapChart
HeatMapChart
This example shows how to create beautiful HeatMapChart
HeatMapChart
This example shows how to create beautiful HeatMapChart
HeatMapChart
This example shows how to create beautiful HeatMapChart
ApexCharts
Great offline chart library with various chart types and functionalities
<?php
require_once "../../../../load.koolreport.php";
require_once "MyReport.php";
$report = new MyReport;
$report->run()->render();
<?php
class MyReport extends \koolreport\KoolReport
{
}
<?php
include "../basic/MyReport.view.php";
...
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