FusionCharts - Gallery Example - Column2D Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Column 2D chart showing Monthly revenues for last year -->
<div id="chart-container">FusionCharts will render here</div>
<button id="get-chart-data">Print Chart Data</button>
<div id="chart-data"></div>

JavaScript

$(function(){
	var propertiesObject = {
  type : "pie2d",//type of the chart to be rendered
  id : "sample-chart",//id of the chart - required to refer to the chart
  width : "500",//width of the chart
  height: "400",//height of the chart
  renderAt: "chart-container",//id of the HTML element where the chart is rendered
  dataFormat:"json", //format of the data passed to the dataSource property

  //chart appearance properties are defined within dataSource.
  dataSource: {
    chart:{
      //caption of the chart
      caption:"Aggregate distribution in class of 70 students",

      //hex code of the colors to be used for the background
      bgColor:"EEEEEE,CCCCCC",

      //transperancy of each color
      bgAlpha : "70,80",

      //contribution of each color to the gradient of the background
      bgRatio:"60, 40",

      //colors to be used to fill the pie's in the chart
      paletteColors: "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",

      //disabling 3D effects on the pies in the chart
      use3DLighting:0,

      //color of the border
      borderColor: "#EEEEEE",

      //thickness of the border
      borderThickness:3,

    },
    data:[
      {label:">90", value:"10"},
      {label:"70-80", value:"30"},
      {label:"50-70", value:"20"},
      {label:"<50", value:"10"}
    ]
  }
}

var sampleChart = new FusionCharts(propertiesObject);
    sampleChart.render();
    $("#get-chart-data").click(getChartData);
});

function getChartData(){
    // Get the chart object
    var chartObj = FusionCharts("sample-chart");
    // Get chart data using the getJSONData API
    var chartData = chartObj.getJSONData()['data'];
    $("#chart-data").text(JSON.stringify(chartData));
}