jQuery FusionChart.js Plugin Example to Draw Colorful Charts in Browser Full Example For Beginners

 

 

 

index.html

 

 

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery FusionCharts Plugin Sample</title>
    <script
      type="text/javascript"
      src="https://code.jquery.com/jquery-3.3.1.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/fusioncharts/fusioncharts.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/fusioncharts/themes/fusioncharts.theme.fusion.js"
    ></script>
    <script
      type="text/javascript"
      src="https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/develop/dist/fusioncharts.jqueryplugin.min.js"
    ></script>
  </head>
  <body>
    <div id="chart-container">FusionCharts will render here...</div>

    <script type="text/javascript">
      $('document').ready(function() {
        $('#chart-container').insertFusionCharts({
          type: 'column2d',
          width: '500',
          height: '300',
          dataFormat: 'json',
          dataSource: {
            chart: {
              caption: 'Yearly revenue',
              xAxisName: 'Year',
              yAxisName: 'Revenues',
              numberPrefix: '$',
              theme: 'fusion'
            },
            data: [
              {
                label: '2015',
                value: '5548900'
              },
              {
                label: '2016',
                value: '8100000'
              },
              {
                label: '2017',
                value: '7200000'
              }
            ]
          }
        });
      });
    </script>
  </body>
</html>

 

 

 

FULL GITHUB REPOSITORY

 

 

Leave a Reply