Posted on: 04.09.2020 Posted by: Alex D Comments: 0

Creation of graphs, chart and diagrams on Java Script

Use Java Script Library FusionCharts to Create Graphs.

Connect library FusionCharts to page.

The documentation for this library can be found here.

<script type="text/javascript" src="https://spage.me/S/js/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="https://spage.me/S/js/fusioncharts/themes/fusioncharts.theme.fusion.js"></script>

Create tag DIV id=”chart_container” for reload the chart.

<DIV id="chart_container" class="chart_shadom">Chart will render here!</DIV>

Create an array of data for the chart board.

<SCRIPT>
// Preparing the chart data
const chartData = [
  { 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"}
];
</SCRIPT>

Create an array parameters for the chart design and data.

<SCRIPT>
const chartConfig = {
// Chart Design
type: "column2d",
renderAt: "chart_container",
width: "100%",
height: "400",
dataFormat: "json",
dataSource: {
    // Chart Configuration
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion",
        },
    // Chart Data
    "data": chartData
    }
};
</SCRIPT>

Insert a function with parameters for the chart board. And call this function.

<SCRIPT>
FusionCharts.ready(function(){
  var fusioncharts = new FusionCharts(chartConfig);
  fusioncharts.render();
});
</SCRIPT>

Complete code example.

<script type="text/javascript" src="https://spage.me/S/js/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="https://spage.me/S/js/fusioncharts/themes/fusioncharts.theme.fusion.js"></script>

<DIV id="chart_container" class="chart_shadom">Chart will render here!</DIV>
<SCRIPT>
const chartData = [
  { 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"}
];
const chartConfig = {
type: "column2d",
renderAt: "chart_container",
width: "100%",
height: "400",
dataFormat: "json",
dataSource: {
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion",
        },
    "data": chartData
    }
};
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
</SCRIPT>

DEMO

Categories:

Leave a Comment