Table of Contents
<script type="text/javascript" src="https://unpkg.com/react@0.13.3/dist/JSXTransformer.js"></script> <script type="text/javascript" src="https://unpkg.com/react@15/dist/react.min.js"></script> <script type="text/javascript" src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="https://unpkg.com/react-fusioncharts/dist/react-fusioncharts.js"></script>
{ "chart": { "caption": "Top Global Oil Reserves", "subCaption": "[2015-16]", "xAxisName": "MMbbl= One Million barrels", "yAxisName": "Reserves (MMbbl)", // extra attributes "numberSuffix": "K", "showValues": "0", "showLabels": "0", "showHoverEffect": "1", "use3DLighting": "0", "showaxislines": "1", "theme": "hulk-light" }, "data": [{ "label": "Venezuela", "value": "290" }, { "label": "Saudi", "value": "260" }, { "label": "Canada", "value": "180" }, { "label": "Iran", "value": "140" }, { "label": "Russia", "value": "115" }, { "label": "UAE", "value": "100" }, { "label": "US", "value": "30" }, { "label": "China", "value": "30" }] }
var chartConfigs = { type: 'column2d', renderAt: 'chart-container', width: '550', height: '350', dataFormat: 'json', dataSource: myDataSource }The
chartConfigs
component contains the chart’s basic configuration. const element = ( <div> Change Chart Type: <br /><label> <input name = 'chart-type' id = 'columntype' type = 'radio' value = 'column2d'/> Column </label> <label > <input name = 'chart-type' id = 'linetype' type = 'radio' value = 'line'/> Line </label> <label> <input name = 'chart-type' id = 'bartype' type = 'radio' value = 'bar2d'/> Bar </label> <label> <input name = 'chart-type' id = 'ptype' type = 'radio' value = 'pie2d'/> Pie </label> </div> ); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); var refreshChart = function(){ chartConfigs.type = "column2d"; chartConfigs.dataSource.chart.caption = "Top Global Oil Reserves"; chartConfigs.dataSource.chart.subCaption = "[2015-16]"; delete chartConfigs.dataSource.chart.paletteColors; chartConfigs.dataSource.chart.showLabels = "0"; chartConfigs.dataSource=myDataSource; ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); }; document.getElementById("nn").addEventListener("click", function() { refreshChart(); console.log(this.getAttribute('id')); ReactDOM.render(element, document.getElementById("controllers")); var radio = document.getElementsByTagName('input'); console.log(radio); for (i = 0; i < radio.length; i++) { radElem = radio[i]; if (radElem.type === 'radio') { radElem.addEventListener("click", function() { console.log("fdf"); var id = this.getAttribute('id'); console.log(id); console.log(chartConfigs.type); switch (id) { case "linetype": val = this.getAttribute('value'); chartConfigs.type = val; ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); break; case "columntype": val = this.getAttribute('value'); chartConfigs.type = val; ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); break; case "ptype": val = this.getAttribute('value'); console.log(chartConfigs.type); chartConfigs.type = val; var t = Object.assign({}, chartConfigs); ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...t } />, document.getElementById("top") ); break; case "bartype": val = this.getAttribute('value'); chartConfigs.type = val; ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); break; } }); } } });This will render four radio buttons below the chart, allowing you to choose from the column, line, bar, and pie chart types. In the above code, the
ReactDOM.render()
method calls the chartConfigs
reusable react component to re-render the chart. This saves the developer from rewriting the chart’s basic configuration and focusing only on the updates in the configuration. const secondElement = ( <div> Change Attribute: <br /> <label> <input name = 'attr-type' id = 'Captiontype' type = 'radio' value = 'caption'/> Caption </label> <label> <input name = 'attr-type' id = 'sCaptiontype' type = 'radio' value = 'subCaption'/> Sub - Caption </label> <label> <input name = 'attr-type' id = 'pltype' type = 'radio' value = 'paletteColors'/> Palette Colors </label> <label> <input name = 'attr-type' id = 'labeltype' type = 'radio' value = 'showLabels'/> Show Labels </label> </div> ); document.getElementById("kk").addEventListener("click", function() { refreshChart(); console.log(this.getAttribute('id')); ReactDOM.render(secondElement, document.getElementById("controllers")); var radio = document.getElementsByTagName('input'); console.log(radio); for (i = 0; i < radio.length; i++) { radElem = radio[i]; if (radElem.type === 'radio') { radElem.addEventListener("click", function() { console.log("fdf"); var id = this.getAttribute('id'); console.log(id); console.log(chartConfigs.type); switch (id) { case "Captiontype": chartConfigs.dataSource.chart.caption = "Country-wise Oil Reserves"; chartConfigs.dataSource.chart.subCaption = "[2015-16]"; delete chartConfigs.dataSource.chart.paletteColors; chartConfigs.dataSource.chart.showLabels = "0"; ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); break; case "sCaptiontype": chartConfigs.dataSource.chart.caption = "Top Global Oil Reserves"; chartConfigs.dataSource.chart.subCaption = "From Year 2015 to 2016"; delete chartConfigs.dataSource.chart.paletteColors; chartConfigs.dataSource.chart.showLabels = "0"; ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); break; case "pltype": chartConfigs.dataSource.chart.caption = "Top Global Oil Reserves"; chartConfigs.dataSource.chart.subCaption = "[2015-16]"; chartConfigs.dataSource.chart.paletteColors = "#21EFE6,#E9EF21,#FAA609,#D3A7F5,#DB0ADB,#635A63,#FF5733,#DAF7A6,#900C3F,#5F5CD3"; chartConfigs.dataSource.chart.showLabels = "0"; ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); break; case "labeltype": chartConfigs.dataSource.chart.caption = "Top Global Oil Reserves"; chartConfigs.dataSource.chart.subCaption = "[2015-16]"; delete chartConfigs.dataSource.chart.paletteColors; chartConfigs.dataSource.chart.showLabels = "1"; ReactDOM.unmountComponentAtNode(document.getElementById('top')); ReactDOM.render( < ReactFC {...chartConfigs } />, document.getElementById("top") ); break; } }); } } });This will render four radio buttons below the chart, allowing you to choose from the caption, sub-caption, palette colors, and show labels attributes to update at runtime. Again, the
ReactDOM.render()
method calls the reusable react component. const thirdElement = ( <div id='dataedit'> <textarea id='data' rows="9" editable cols="40"></textarea><br /> <button type="button" id='dataChange' class='btn-primary btn-sm'>Change Data</button> </div> ); document.getElementById("ss").addEventListener("click", function() { refreshChart(); console.log(this.getAttribute('id')); //console.log(thirdElement.props.children[0].props); ReactDOM.unmountComponentAtNode(document.getElementById('controllers')) ReactDOM.render(thirdElement, document.getElementById("controllers")); document.getElementById("data").value = JSON.stringify(myDataSource.data); console.log(document.getElementById("dataChange")); document.getElementById("dataChange").addEventListener("click", function() { var d = document.getElementById("data").value; chartConfigs.dataSource.data = JSON.parse(d); ReactDOM.unmountComponentAtNode(document.getElementById('top')) ReactDOM.render( < ReactFC {...chartConfigs}/>, document.getElementById("top") ); console.log(d); }); });This will render the chart data in a text box below the chart. Edit the chart data and click Change Data to update the chart data at runtime. Similar to the previous two examples, calling the reusable component will re-render the chart’s basic configuration.
var MyApp = React.createClass({ render: function() { return ( <div id = "chart-container" > </div> ); } });
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…