Table of Contents
import React from "react"; import FusionCharts from "fusioncharts"; import TimeSeries from "fusioncharts/fusioncharts.timeseries"; import ReactFC from "../lib/ReactFC";2. Now, you have to call React.fcRoot method with FusionCharts and TimeSeries as parameters:
ReactFC.fcRoot(FusionCharts, TimeSeries);3. Use this line to get your response in JSON format:
const jsonify = res => res.json();4. Next, fetch the data:
const dataFetch = fetch( "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/line-chart-with-time-axis-data.json" ).then(jsonify); const schemaFetch = fetch( "https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/line-chart-with-time-axis-schema.json" ).then(jsonify);5. Then you have to create a constant called dataSource. It will have chart, caption, subcaption, y-axis plot, and format fields.
const dataSource = { chart: {}, caption: { text: "Sales Analysis" }, subcaption: { text: "Grocery" }, yaxis: [ { plot: { value: "Grocery Sales Value" }, format: { prefix: "$" }, title: "Sale Value" } ] };6. After that, create your ChartViewer class to define the state of the time series data.
class ChartViewer extends React.Component { constructor(props) { super(props); this.onFetchData = this.onFetchData.bind(this); this.state = { timeseriesDs: { type: "timeseries", renderAt: "container", width: "600", height: "400", dataSource } }; }7. Finished that? the next step is to execute the componentDidMount() method:
componentDidMount() { this.onFetchData(); }8. Now you have to execute the onFetchData() method:
onFetchData() { Promise.all([dataFetch, schemaFetch]).then(res => { const data = res[0]; const schema = res[1]; const fusionTable = new FusionCharts.DataStore().createDataTable( data, schema ); const timeseriesDs = Object.assign({}, this.state.timeseriesDs); timeseriesDs.dataSource.data = fusionTable; this.setState({ timeseriesDs }); }); }9. Finally, its time to display the line chart by executing the render() method :
render() { return ( <div> {this.state.timeseriesDs.dataSource.data ? ( <ReactFC {...this.state.timeseriesDs} /> ) : ( "loading" )} </div> ); } }
import FusionCharts from "fusioncharts"; import charts from "fusioncharts/fusioncharts.charts"; import ReactFusioncharts from "react-fusioncharts";2. Resolve the chart dependency by calling the charts() function. Use FusionCharts as the parameter:
charts(FusionCharts);3. Next, you have to create a constant, called dataSource. It will have theme, label, and value of data captions. You can find everything in the source code. 4. Now, you have to render the bar chart using the following code:
class MyComponent extends React.Component { render() { return ( <ReactFusioncharts type="bar2d" width="100%" height="100%" dataFormat="JSON" dataSource={dataSource} /> ); } }
import FusionCharts from "fusioncharts"; import charts from "fusioncharts/fusioncharts.charts"; import ReactFusioncharts from "react-fusioncharts";2. Then resolve the chart dependency with this code: charts(FusionCharts); 3. Create a constant called dataSource. It will contain different fields for charts and datasets. To see more, check the source code. 4. Render the Combo Chart with this code:
class MyComponent extends React.Component { render() { return ( <ReactFusioncharts type="mscombi2d" width="100%" height="100%" dataFormat="JSON" dataSource={dataSource} /> ); } }
Have you ever spent hours buried in documentation, hunting for a specific piece of code?…
Do you feel like your data is a cryptic puzzle, locked away from revealing its…
In web development, mastering JavaScript charting libraries is crucial for keeping up with the fast-paced…
Ever spend an afternoon neck-deep in documentation, searching for that one elusive code snippet? Or…
In the dynamic world of data visualization, the need for precision and innovation has never…
Are you drowning in data but struggling to find the insights that drive real business…