Converting react-chartjs-2 chart into canvas js chart

[skp]

I need to convert a dynamic react-chartjs-2 bubble chart into canvasjs bubble chart based on database data. How to convert it?

RYS_RPT_Boubble_Chart :

import React, { Component } from “react”;
import { Bubble } from “react-chartjs-2”;
import { connect } from “react-redux”;
const moment = require(“moment”);
const data = {};
const dates = {};
class RYS_RPT_Boubble_Chart extends Component {
constructor(props) {
super(props);
let currentdate = new Date();
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;
return (
<div className=”chart-container” style={{ marginTop: “-20px” }}>
<Bubble
onElementsClick={(elems) => {
if (this.props.linktoreport) {
window.location =
String(window.location.href).split(“schome”)[0] +
“schome/reports/rate_your_state”;
}
}}
options={{
// responsive: false,
// maintainAspectRatio: false,
legend: {
display: false,
position: “bottom”,
labels: {
usePointStyle: true,
textTransform: “uppercase”,
},
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
console.log(
“tooltipItem”,
tooltipItem,
data.datasets[tooltipItem.datasetIndex]
);
var label2 =
data.datasets[tooltipItem.datasetIndex].data[
tooltipItem.index
].org_value || “”;
var date =
data.datasets[tooltipItem.datasetIndex].data[
tooltipItem.index
].day; //.split(“/”).reverse().join(“-“)
var label1 =
data.datasets[tooltipItem.datasetIndex].label || ” – “;
let text =
label1 +
” ” +
tooltipItem.yLabel +
“,” +
“Count” +
” ” +
label2;
return text;
},
},
},
elements: {
point: {
radius: function (context) {
var index = context.dataIndex;
var data = context.dataset.data[index];
var size = context.chart.width;
var base = Math.abs(data.value) / 100;
var value = Math.round((size / 24) * base);
value = value > 5 ? value : 5;
return value;
},
},
},
scales: {
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
callback: function (value, index, values) {
console.log(
“value, startdate”,
value,
index,
values,
startdate
);
let tDate = new Date(startdate.getTime());
// var date_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(),
// date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds());
// let tDate = new Date(date)

//console.log(“xDate = startdate.getDate()”,xDate , startdate)
//xDate.setDate(xDate.getDate() + (value-1));
if (index > 0) {
let xindex = index – 1;
let xDate = new Date(
tDate.getTime() + 24 * 60 * 60 * 1000 * xindex
);
console.log(“value, tDate,xDate”, value, tDate, xDate);
let yyyy = xDate.getFullYear();
let mm = xDate.getMonth() + 1;
mm = mm > 9 ? mm : “0” + mm;
let dd = xDate.getDate();
dd = dd > 9 ? dd : “0” + dd;
//console.log(“yyyy + ‘-‘ + mm + ‘-‘ + dd”,yyyy + ‘-‘ + mm + ‘-‘ + dd)
if (currentdate.getTime() >= xDate.getTime()) {
return moment(xDate).format(dateformat).substr(0, 10);
} else {
return “”;
}
} else {
return “”;
}
},
min: -1,
max: noofdays + 1, //this.getDays(),
stepSize: 1, //(this.getDays() > 10) ? 2 : 1,
},
// scaleLabel: {
// display: true,
// fontStyle: ‘bold’,
// fontColor: ‘black’,
// labelString:
// moment(startdate).format(dateformat) + ‘ to ‘ + moment(currentdate).format(dateformat)

// }
},
],
yAxes: [
{
position: “top”,
gridLines: {
display: false,
},
ticks: {
callback: function (value, index, values) {
if (value >= 0 && value < 11) {
return value;
} else {
return “”;
}
},
stepSize: 2,
min: -2,
max: 11,
},
},
],
},
// tooltips: {
// enabled: false
// }
}}
data={this.state.chart_data}
/>
</div>
);
}
}

const mapStateToProps = (state) => {
return {
name: state.user_info_reducer.user_info.name,
userId: state.user_info_reducer.user_info.user_id,
role_id: state.user_info_reducer.user_info.role_id,
role: state.user_info_reducer.user_info.role,
company: state.user_info_reducer.user_info.company,
email: state.user_info_reducer.user_info.email,
company_name: state.user_info_reducer.user_info.company_name,
language_code: state.user_info_reducer.user_info.language_code,
currency: state.user_info_reducer.user_info.currency,
dateformat: state.user_info_reducer.user_info.dateformat,
timeformat: state.user_info_reducer.user_info.timeformat,
timezone: state.user_info_reducer.user_info.timezone,
};
};

export default connect(mapStateToProps, null)(RYS_RPT_Boubble_Chart);

//export default RYS_RPT_Boubble_Chart;

Dashboard.js :

someServiceName(data).then((response) => {

let result = response.result[3];

let xsummaryData = {};
xsummaryData.graphData = this.getRYS_D1_Summary(result, data);
xsummaryData.records = result.length;
this.setState({
pageState: “RYS_D1”,
RYS_D1_List: result,
orgRYS_D1_List: result,
RYS_D1_SummaryData: xsummaryData,
sel_D1_Data: data,
});
});

<RYS_RPT_Boubble_Chart
graph_data={
this.state.RYS_D1_SummaryData.graphData[
rysStatusFields[this.state.RYS_D1_GPH_SelStateId]
]
}
rysstate={
rysStatusTranslation[this.state.RYS_D1_GPH_SelStateId]
}
rysstateid={this.state.RYS_D1_GPH_SelStateId}
date1={this.state.sel_D1_Data.date1}
date2={this.state.sel_D1_Data.date2}
linktoreport={true}
/>

[Shashi Ranjan]

@skp,

Please take a look at this documentation page for step to step tutorial on integrating CanvasJS in React Application.

—
Shashi Ranjan
Team CanvasJS