Reputation: 35050
I would use HeatMap chart from ApexChart. https://apexcharts.com/docs/installation/
They are using generateData
method to demonstrate the data structure ApexChart
requires. But what kind of data generateData
produce? :)
class ApexChart extends React.Component {
constructor(props) {
super(props);
this.state = {
series: [{
name: 'Jan',
data: generateData(20, {
min: -30,
max: 55
})
},
Upvotes: 0
Views: 1858
Reputation: 6332
So it seems the generateData()
function is a function created for the examples.
See this issue here - https://github.com/apexcharts/apexcharts.js/issues/1363
which leads to the code for the example here - https://github.com/apexcharts/apexcharts.js/blob/main/samples/react/bubble/simple-bubble.html
where the function is defined
/*
// this function will generate output in this format
// every array in data is of the format [x, y, z] where x (timestamp) and y are the two axes coordinates,
// z is the third coordinate, which you can interpret as the size of the bubble formed too.
// data = [
[timestamp, 23, 10],
[timestamp, 33, 11],
[timestamp, 12, 8]
...
]
*/
function generateData(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
series.push([x, y, z]);
baseval += 86400000;
i++;
}
return series;
}
Upvotes: 0
Reputation: 119
Use this:
function generateData(count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = (i + 1).toString();
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
series.push({
x: x,
y: y
});
i++;
}
return series;
}
Upvotes: 3