Git Product home page Git Product logo

amchart4-react's People

Contributors

doppins-bot avatar manoj016 avatar

Stargazers

avatar

Watchers

avatar

Forkers

parichay28

amchart4-react's Issues

Unable to update chart dynamically

Hi,

I am not able to update chart dynamically after updating state. Can you please let me know what I doing wrong. Below is the code:

import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
import { AmchartsReact } from 'amchart4-react';

let time = 2010;
let CEOI = 100;
let PEOI = 50;
let chart = null;
class ApexChartPOC extends Component {

state = {
chart: null,
dateAxis: null
}

createChart = (chart) => {

//chart.data = this.props.data;

// Add data
chart.data = [{ "time": ++time, "ce": ++CEOI, "pe": ++PEOI }, { "time": ++time, "ce": ++CEOI, "pe": ++PEOI }
];

function createSeries(field, name, stacked) {
  let series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "time";
  series.name = name;
  series.columns.template.tooltipText = "{name}: [bold]{valueY}[/]";
  series.stacked = stacked;
  series.columns.template.width = am4core.percent(95);
  return series;
};

// Create axes
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "time";
categoryAxis.title.text = "Local country offices";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.cellStartLocation = 0.1;
categoryAxis.renderer.cellEndLocation = 0.9;

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.min = 0;
valueAxis.title.text = "OI (Lakhs)";

// Create series
let series1 = createSeries("ce", "ce", false);
let series2 = createSeries("pe", "pe", false);

// Add legend
chart.legend = new am4charts.Legend();

chart.cursor = new am4charts.XYCursor();

let scrollbarX = new am4charts.XYChartScrollbar();
scrollbarX.series.push(series1);
chart.scrollbarX = scrollbarX;

}

componentDidMount() {

chart = am4core.create("chartdiv", am4charts.XYChart);
am4core.useTheme(am4themes_animated);

this.createChart(chart);

this.setState(() => ({ chart }));
this.interval = setInterval(() => {
  this.fetchOIData(false);
}, 30000);

return;
chart.paddingRight = 20;



//this.chart = chart;
this.setState({
  chart: chart
});

}

fetchOIData = (fetchall) => {

time++;
CEOI++;
PEOI++;
chart.data.push({ "time": time, "ce": CEOI, "pe": PEOI });
console.log('inside fetchOIData ', this.state.chart.data);
this.setState({
  chart: chart
});

}

componentDidUpdate(oldProps) {
// this.setState({
// chart: chart
// });
}
componentWillUnmount() {
// if (this.chart) {
// this.chart.dispose();
// }
}

render() {
var config = this.state.chart;
return (

  <div>
    <div id="chartdiv" style={{ width: "100%", height: "500px" }} />
    {this.state.chart ?
      <AmchartsReact
        chart={this.state.chart}

        color={am4core.color("#838383")}
      />
      : null}
  </div>
);

}
}
export default ApexChartPOC

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.