<div class= "card" >
<div class= "card-body" >
<div id= "chart-heatmap-basic" ></div>
</div>
</div>
<script>
var options = {
chart : {
height : 400 ,
type : " heatmap " ,
toolbar : {
show : false ,
},
},
dataLabels : {
enabled : false
},
colors : [ " #206bc4 " , ],
series : [
{ name : " Jan " , data : [{ x : ' 1 ' , y : 23 },{ x : ' 2 ' , y : 14 },{ x : ' 3 ' , y : 24 },{ x : ' 4 ' , y : 90 },{ x : ' 5 ' , y : 99 },{ x : ' 6 ' , y : 28 },{ x : ' 7 ' , y : 51 },{ x : ' 8 ' , y : 51 },{ x : ' 9 ' , y : 98 },{ x : ' 10 ' , y : 61 },{ x : ' 11 ' , y : 14 },{ x : ' 12 ' , y : 51 },{ x : ' 13 ' , y : 32 },{ x : ' 14 ' , y : 84 },{ x : ' 15 ' , y : 9 },{ x : ' 16 ' , y : 2 },] },
{ name : " Feb " , data : [{ x : ' 1 ' , y : 82 },{ x : ' 2 ' , y : 87 },{ x : ' 3 ' , y : 48 },{ x : ' 4 ' , y : 15 },{ x : ' 5 ' , y : 21 },{ x : ' 6 ' , y : 23 },{ x : ' 7 ' , y : 80 },{ x : ' 8 ' , y : 34 },{ x : ' 9 ' , y : 46 },{ x : ' 10 ' , y : 8 },{ x : ' 11 ' , y : 87 },{ x : ' 12 ' , y : 80 },{ x : ' 13 ' , y : 23 },{ x : ' 14 ' , y : 81 },{ x : ' 15 ' , y : 24 },{ x : ' 16 ' , y : 51 },] },
{ name : " Mar " , data : [{ x : ' 1 ' , y : 100 },{ x : ' 2 ' , y : 52 },{ x : ' 3 ' , y : 57 },{ x : ' 4 ' , y : 80 },{ x : ' 5 ' , y : 14 },{ x : ' 6 ' , y : 82 },{ x : ' 7 ' , y : 78 },{ x : ' 8 ' , y : 16 },{ x : ' 9 ' , y : 29 },{ x : ' 10 ' , y : 97 },{ x : ' 11 ' , y : 52 },{ x : ' 12 ' , y : 78 },{ x : ' 13 ' , y : 47 },{ x : ' 14 ' , y : 10 },{ x : ' 15 ' , y : 61 },{ x : ' 16 ' , y : 34 },] },
{ name : " Apr " , data : [{ x : ' 1 ' , y : 60 },{ x : ' 2 ' , y : 33 },{ x : ' 3 ' , y : 42 },{ x : ' 4 ' , y : 20 },{ x : ' 5 ' , y : 87 },{ x : ' 6 ' , y : 100 },{ x : ' 7 ' , y : 100 },{ x : ' 8 ' , y : 16 },{ x : ' 9 ' , y : 57 },{ x : ' 10 ' , y : 80 },{ x : ' 11 ' , y : 33 },{ x : ' 12 ' , y : 100 },{ x : ' 13 ' , y : 6 },{ x : ' 14 ' , y : 51 },{ x : ' 15 ' , y : 35 },{ x : ' 16 ' , y : 16 },] },
{ name : " May " , data : [{ x : ' 1 ' , y : 91 },{ x : ' 2 ' , y : 81 },{ x : ' 3 ' , y : 54 },{ x : ' 4 ' , y : 98 },{ x : ' 5 ' , y : 52 },{ x : ' 6 ' , y : 60 },{ x : ' 7 ' , y : 61 },{ x : ' 8 ' , y : 99 },{ x : ' 9 ' , y : 91 },{ x : ' 10 ' , y : 36 },{ x : ' 11 ' , y : 81 },{ x : ' 12 ' , y : 61 },{ x : ' 13 ' , y : 99 },{ x : ' 14 ' , y : 80 },{ x : ' 15 ' , y : 72 },{ x : ' 16 ' , y : 16 },] },
{ name : " Jun " , data : [{ x : ' 1 ' , y : 77 },{ x : ' 2 ' , y : 99 },{ x : ' 3 ' , y : 64 },{ x : ' 4 ' , y : 0 },{ x : ' 5 ' , y : 33 },{ x : ' 6 ' , y : 91 },{ x : ' 7 ' , y : 7 },{ x : ' 8 ' , y : 51 },{ x : ' 9 ' , y : 3 },{ x : ' 10 ' , y : 28 },{ x : ' 11 ' , y : 99 },{ x : ' 12 ' , y : 7 },{ x : ' 13 ' , y : 21 },{ x : ' 14 ' , y : 78 },{ x : ' 15 ' , y : 19 },{ x : ' 16 ' , y : 99 },] },
{ name : " Jul " , data : [{ x : ' 1 ' , y : 67 },{ x : ' 2 ' , y : 84 },{ x : ' 3 ' , y : 90 },{ x : ' 4 ' , y : 4 },{ x : ' 5 ' , y : 81 },{ x : ' 6 ' , y : 77 },{ x : ' 7 ' , y : 3 },{ x : ' 8 ' , y : 39 },{ x : ' 9 ' , y : 24 },{ x : ' 10 ' , y : 23 },{ x : ' 11 ' , y : 84 },{ x : ' 12 ' , y : 3 },{ x : ' 13 ' , y : 14 },{ x : ' 14 ' , y : 100 },{ x : ' 15 ' , y : 98 },{ x : ' 16 ' , y : 51 },] },
{ name : " Aug " , data : [{ x : ' 1 ' , y : 56 },{ x : ' 2 ' , y : 81 },{ x : ' 3 ' , y : 45 },{ x : ' 4 ' , y : 37 },{ x : ' 5 ' , y : 99 },{ x : ' 6 ' , y : 67 },{ x : ' 7 ' , y : 9 },{ x : ' 8 ' , y : 90 },{ x : ' 9 ' , y : 48 },{ x : ' 10 ' , y : 82 },{ x : ' 11 ' , y : 81 },{ x : ' 12 ' , y : 9 },{ x : ' 13 ' , y : 87 },{ x : ' 14 ' , y : 61 },{ x : ' 15 ' , y : 32 },{ x : ' 16 ' , y : 39 },] },
{ name : " Sep " , data : [{ x : ' 1 ' , y : 17 },{ x : ' 2 ' , y : 10 },{ x : ' 3 ' , y : 59 },{ x : ' 4 ' , y : 67 },{ x : ' 5 ' , y : 84 },{ x : ' 6 ' , y : 56 },{ x : ' 7 ' , y : 24 },{ x : ' 8 ' , y : 15 },{ x : ' 9 ' , y : 57 },{ x : ' 10 ' , y : 100 },{ x : ' 11 ' , y : 10 },{ x : ' 12 ' , y : 24 },{ x : ' 13 ' , y : 52 },{ x : ' 14 ' , y : 7 },{ x : ' 15 ' , y : 82 },{ x : ' 16 ' , y : 90 },] },
{ name : " Oct " , data : [{ x : ' 1 ' , y : 41 },{ x : ' 2 ' , y : 51 },{ x : ' 3 ' , y : 79 },{ x : ' 4 ' , y : 60 },{ x : ' 5 ' , y : 81 },{ x : ' 6 ' , y : 17 },{ x : ' 7 ' , y : 61 },{ x : ' 8 ' , y : 80 },{ x : ' 9 ' , y : 42 },{ x : ' 10 ' , y : 60 },{ x : ' 11 ' , y : 51 },{ x : ' 12 ' , y : 61 },{ x : ' 13 ' , y : 33 },{ x : ' 14 ' , y : 3 },{ x : ' 15 ' , y : 53 },{ x : ' 16 ' , y : 15 },] },
{ name : " Nov " , data : [{ x : ' 1 ' , y : 90 },{ x : ' 2 ' , y : 80 },{ x : ' 3 ' , y : 30 },{ x : ' 4 ' , y : 74 },{ x : ' 5 ' , y : 10 },{ x : ' 6 ' , y : 41 },{ x : ' 7 ' , y : 35 },{ x : ' 8 ' , y : 20 },{ x : ' 9 ' , y : 54 },{ x : ' 10 ' , y : 91 },{ x : ' 11 ' , y : 80 },{ x : ' 12 ' , y : 35 },{ x : ' 13 ' , y : 81 },{ x : ' 14 ' , y : 9 },{ x : ' 15 ' , y : 12 },{ x : ' 16 ' , y : 80 },] },
{ name : " Dec " , data : [{ x : ' 1 ' , y : 54 },{ x : ' 2 ' , y : 78 },{ x : ' 3 ' , y : 42 },{ x : ' 4 ' , y : 76 },{ x : ' 5 ' , y : 51 },{ x : ' 6 ' , y : 90 },{ x : ' 7 ' , y : 72 },{ x : ' 8 ' , y : 98 },{ x : ' 9 ' , y : 64 },{ x : ' 10 ' , y : 77 },{ x : ' 11 ' , y : 78 },{ x : ' 12 ' , y : 72 },{ x : ' 13 ' , y : 99 },{ x : ' 14 ' , y : 24 },{ x : ' 15 ' , y : 10 },{ x : ' 16 ' , y : 20 },] },
],
xaxis : {
type : " category "
},
legend : {
show : false ,
},
};
( new ApexCharts ( document . querySelector ( " #chart-heatmap-basic " ), options )). render ();
</script>