Table of Contents
import FusionCharts from "fusioncharts"; import charts from "fusioncharts/fusioncharts.charts"; import ReactFusioncharts from "react-fusioncharts";2. Next, you have to resolve the chart dependency.
charts(FusionCharts);3. Then you have to add the data source.
const dataSource = {
chart: {
caption: "Lead sources by industry",
yaxisname: "Number of Leads",
aligncaptionwithcanvas: "0",
plottooltext: "<b>$dataValue</b> leads received",
theme: "fusion"
},
data: [
{
label: "Travel & Leisure",
value: "41"
},
{
label: "Advertising/Marketing/PR",
value: "39"
},
{
label: "Other",
value: "38"
},
{
label: "Real Estate",
value: "32"
},
{
label: "Communications/Cable/Phone",
value: "26"
},
{
label: "Construction",
value: "25"
},
{
label: "Entertainment",
value: "25"
},
{
label: "Staffing Firm/Full Time/Temporary",
value: "24"
},
{
label: "Transportation/Logistics",
value: "23"
},
{
label: "Utilities",
value: "22"
},
{
label: "Aerospace/Defense Products",
value: "18"
},
{
label: "Banking/Finance/Securities",
value: "16"
},
{
label: "Consumer Products - Non-Durables",
value: "15”
},
{
label: "Distribution",
value: "13"
},
{
label: "Education",
value: "12"
},
{
label: "Health Products & Services",
value: "11"
},
{
label: "Hospitality & Hotels",
value: "10"
},
{
label: "Non-Business/Residential",
value: "6"
},
{
label: "Pharmaceutical",
value: "4"
},
{
label: "Printing & Publishing",
value: "1"
},
{
label: "Professional Services",
value: "1"
},
{
label: "VAR/ISV",
value: "1"
},
{
label: "Warranty Administrators",
value: "1"
}
]
}; 4. Now, you can render the graph. 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 you need to resolve charts dependency.
charts(FusionCharts);3. Next, you have to include the data.
const dataSource = {
chart: {
caption: "Support Tickets : Received vs Resolved",
yaxisname: "# of Tickets",
subcaption: "Last week",
numdivlines: "3",
showvalues: "0",
legenditemfontsize: "15",
legenditemfontbold: "1",
plottooltext: "<b>$dataValue</b> Tickets $seriesName on $label",
theme: "fusion"
},
categories: [
{
category: [
{
label: "Jan 1"
},
{
label: "Jan 2"
},
{
label: "Jan 3"
},
{
label: "Jan 4"
},
{
label: "Jan 5"
},
{
label: "Jan 6"
},
{
label: "Jan 7"
}
]
}
],
dataset: [
{
seriesname: "Received",
data: [
{
value: "55"
},
{
value: "45"
},
{
value: "52"
},
{
value: "29"
},
{
value: "48"
},
{
value: "28"
},
{
value: "32"
}
]
},
{
seriesname: "Resolved",
data: [
{
value: "50"
},
{
value: "30"
},
{
value: "49"
},
{
value: "22"
},
{
value: "43"
},
{
value: "14"
},
{
value: "31"
}
]
}
]
}; 4. Finally, you have to render the graph. class MyComponent extends React.Component {
render() {
return (
<ReactFusioncharts
type="msspline"
width="100%"
height="100%"
dataFormat="JSON"
dataSource={dataSource}
/>
);
}
} We’re excited to announce the upcoming release of FusionCharts v4.1—a groundbreaking step forward in the…
Have you ever been overwhelmed by a massive data set and wondered, "How do I…
If you’ve ever tried to make sense of the stock market, you’ve probably come across…
Imagine you’re comparing the sales performance of your top product lines across different regions, or…
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…