Hello All,
Today I am going to write the basic usage of Fusion Chart with the help of the fusion chart javascript plugin. Hope you will find this helpful
Lets start coding and follow the below steps.
1> Add jquery cdn and Fusion chart js inside the head tag >
<script src=”https://code.jquery.com/jquery-2.2.4.min.js” integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=” crossorigin=”anonymous”></script>
<script type=”text/javascript” src=”http://static.fusioncharts.com/code/latest/fusioncharts.js”></script>
<script type=”text/javascript”src=”http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56″></script>
2> Create the div where you want to render(show) the chart and add div inside the body tag:
<div id=”barChartDiv”>Chart will load here after run the html!</div>
3> Use the following code to render the chart:
<script type=”text/javascript”>
// Code Here.
</script>
Below code should be in above script tag.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
FusionCharts.ready(function(){ var fusioncharts = new FusionCharts({ type: 'column2d', renderAt: 'barChartDiv', // Div name where you want render the bar chart. width: '500', height: '300', dataFormat: 'json', // Date format and i am using json data dataSource: { "chart": { "caption": "Monthly revenue", "subCaption": "Last year", "xAxisName": "Month", "yAxisName": "Amount (In Rs)", "canvasBgAlpha": "0", "bgColor": "#DDDDDD", "bgAlpha": "50", "theme": "fint", "exportEnabled": "1" // for export the chart, if you do not want to export the then <exportEnabled> value should be 0 or remove the <exportEnabled> key. }, "data": [{ "label": "Jan", "value": "15000" }, { "label": "Feb", "value": "16000" }, { "label": "Mar", "value": "17000" }, { "label": "Apr", "value": "18000" }, { "label": "May", "value": "180000" }, { "label": "Jun", "value": "200000" }, { "label": "Jul", "value": "21000" }, { "label": "Aug", "value": "22000" }, { "label": "Sep", "value": "230000" }, { "label": "Oct", "value": "240000" }, { "label": "Nov", "value": "25000" }, { "label": "Dec", "value": "280000" }] } } ); fusioncharts.render(); }); |
You can pass the value according to the need in data key. If you want to render the chart on the ajax call then write the above code in the response of ajax call.
I have followed documentation from the fusion chart website: Please Follow this link
Recent Comments