class BubbleChart extends Component {
constructor(props) {
super(props);
let currentdate = new Date();
console.log("graph_data", this.props.graph_data);
//console.log("rysstate", this.props.rysstate);
//console.log("linktoreport", this.props.linktoreport);
this.state = {
chart_data: {},
};
this.chartDetails = this.chartDetails.bind(this);
}
componentDidMount() {
console.log("componentDidMount", this.props.date1, this.props.date2);
this.chartDetails();
}
getDays() {
var dTime = this.props.date2.getTime() - this.props.date1.getTime();
let x = parseInt(dTime / (1000 * 3600 * 24));
return x;
}
getDateFormat = (xDate) => {
let yyyy = xDate.getFullYear();
let mm =
xDate.getMonth() >= 9
? xDate.getMonth() + 1
: "0" + (xDate.getMonth() + 1);
let dd = xDate.getDate() > 9 ? xDate.getDate() : "0" + xDate.getDate();
return yyyy + "-" + mm + "-" + dd;
};
componentDidUpdate(prevProps) {
if (prevProps.graph_data != this.props.graph_data) {
this.chartDetails();
}
}
chartDetails() {
//console.log("eeeeeeeeeeeeeeeeeeeee", this.props.rysstateid, this.props.rysstate)
let vColor;
if (this.props.rysstateid == 1) {
vColor = "#e55853";
}
if (this.props.rysstateid == 2) {
vColor = "#f5c83b";
}
if (this.props.rysstateid == 3) {
vColor = "#a38e7a";
}
if (this.props.rysstateid == 4) {
vColor = "#2892d7";
}
this.setState({
chart_data: {
type: "bubble",
datasets: [
{
label: this.props.rysstate,
fill: true,
backgroundColor: vColor,
pointBorderColor: vColor,
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: vColor,
pointHoverBorderColor: vColor,
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: this.props.graph_data,
datac: [
{ x: 21, y: 1, value: 3 },
{ x: 22, y: 1, value: 6 },
{ x: 21, y: 2, value: 5 },
{ x: 22, y: 2, value: 9 },
{ x: 21, y: 3, value: 8 },
{ x: 22, y: 3, value: 12 },
{ x: 21, y: 4, value: 11 },
{ x: 22, y: 4, value: 15 },
{ x: 21, y: 5, value: 16 },
{ x: 22, y: 5, value: 2 },
{ x: 21, y: 6, value: 1 },
{ x: 22, y: 6, value: 0 },
{ x: 21, y: 7, value: 4 },
{ x: 22, y: 7, value: 8 },
{ x: 21, y: 8, value: 7 },
{ x: 22, y: 8, value: 29 },
{ x: 21, y: 9, value: 9 },
{ x: 22, y: 9, value: 14 },
{ x: 21, y: 10, value: 12 },
{ x: 22, y: 10, value: 3 },
],
},
],
},
});
}
handleTabClick(a, b, c, d) {
//console.log("a, b, c, d", a, b, c, d)
}
render() {
let monthNames = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
];
if (!this.props.date1) {
return <div>hhhhhhhhhhhhhhhhhhhhhhhhh</div>;
}
console.log(
"jJJJJJJJJJJJJJJJJJJJJJJJJJJJJJJ",
this.props.date1,
this.props.date2
);
let startdate = new Date(this.props.date1.getTime());
let startmonth = startdate.getMonth();
let startyear = startdate.getUTCFullYear();
let currentdate = new Date(this.props.date2.getTime());
let currmonth = currentdate.getMonth();
let curryear = currentdate.getUTCFullYear();
let startmonthname = monthNames[startmonth];
let currmonthname = monthNames[currmonth];
let noofdays = parseInt(
(currentdate.getTime() - startdate.getTime()) / (24 * 60 * 60 * 1000)
);
let dateformat = this.props.dateformat;
const options = {
animationEnabled: true,
exportEnabled: true,
theme: "light1", // "light1", "light2", "dark1", "dark2"
title: {
//text: "Surface Temperature vs Size & Distance of Planets from Sun",
fontSize: 26,
},
axisX1: {
//title: "Distance From Sun (in Million Miles)",
logarithmic: true,
xValueFormatString: "DD/MM/YY",
},
axisX2: {
minimum: 0,
maximum: 10,
},
axisY: {
position: "top",
minimum: 0,
maximum: 10,
//stepSize: 2,
interval: 2,
gridLines: {
display: false,
},
ticks: {
callback: function (value, index, values) {
if (value >= 0 && value < 11) {
return value;
} else {
return "";
}
},
stepSize: 2,
min: -2,
max: 11,
},
},
data: [
{
type: "bubble",
//indexLabel: "{label}",
toolTipContent: "{indexLabel}: {x}<br>Count: {y}",
dataPoints: [
{
indexLabel: this.props.rysstate,
color: "red",
xValueType: "Date",
label: this.getDateFormat(this.props.date1),
x: this.props.graph_data[0].x[0],
y: parseInt(this.props.graph_data[0].y[0]),
z: 3031,
},
{
indexLabel: this.props.rysstate,
color: "red",
xValueType: "Date",
label: this.getDateFormat(this.props.date2),
x: this.props.graph_data[1].x[1],
y: parseInt(this.props.graph_data[0].y[0]),
z: 3031,
},
],
},
],
};
return (
<div>
<CanvasJSChart
options={options}
/* onRef={ref => this.chart = ref} */
/>
{/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
</div>
);
}
}
export default BubbleChart;
I have done it partially, but I have to increase the size of the bubble and also I have to push the data into the charts dynamically in a loop. How to do it?
