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>
<div id="chart-container">FusionCharts will render here</div>
<button id="get-chart-data">Print Chart Data</button>
<button id="resize-chart">Resize Chart</button>
<button id="chart-border">Change chart border</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: "#000000",

      //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(function(){
        getChartData("sample-chart");
    });
    $("#resize-chart").click(function(){
        resizeChart("sample-chart");
    });
    $("#chart-border").click(function(){
        changeChartBorder("sample-chart", "#990000");
    });
});

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

function resizeChart(chartId){
    FusionCharts(chartId).resizeTo(200,200);
}

function changeChartBorder(chartId,...