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' => ''
],
)
));
Description
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.