FusionCharts - Create Chart using React-FusionCharts Plugin
Demo #1 --- Simple Chart with data provided as props
--------------------------------------------------
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
<script src="https://unpkg.com/fusioncharts/themes/fusioncharts.theme.ocean.js"></script>
<script src="https://unpkg.com/react-fusioncharts/dist/react-fusioncharts.js"></script>
<!-- A simple chart with all data provided as props -->
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="chart-container"></div>
JavaScript 1.7
FusionCharts.ready(function () {
var myDataSource = {
chart: {
caption: "Harry's SuperMart",
subCaption: "Top 5 stores in last month by revenue",
numberPrefix: "$",
theme: "ocean",
"exportEnabled":"1"
},
data: [{
label: "Bakersfield Central",
value: "880000"
}, {
label: "Garden Groove harbour",
value: "730000"
}, {
label: "Los Angeles Topanga",
value: "590000"
}, {
label: "Compton-Rancho Dom",
value: "520000"
}, {
label: "Daly City Serramonte",
value: "330000"
}]
};
var revenueChartConfigs = {
id: "revenue-chart",
renderAt: "revenue-chart-container",
type: "column2d",
width: 500,
height: 400,
dataFormat: "json",
dataSource: myDataSource
};
ReactDOM.render( <ReactFC {...revenueChartConfigs
}
/>,
document.getElementById('chart-container')
);
});