Home forums Chart Support Converting react-chartjs-2 chart into canvas js chart

Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #29328

    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}
    />

    #29332

    @skp,

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


    Shashi Ranjan
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.