Passion2Code: Fusion Charts Using Json Data

fusioncharts.jsp

*********************************************************************************

<html>
  <head>        
    <title>My First chart using FusionCharts XT - JSON data URL</title>         
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!--         

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
                   "myChartId", "400", "300", "0" );
      myChart.setJSONUrl("Data.json");
      myChart.render("chartContainer");
      
    // -->     
    </script>      
  </body> </html>

Put this file parallel to fusion charts folder containing Column3D.swf with name FusionCharts.

Now make a new file

Data.json

{ 
    "chart": { 
          "caption" : "Weekly Sales Summary" ,
          "xAxisName" : "Week",
          "yAxisName" : "Sales",
          "numberPrefix" : "$"
    },
        
    "data" : 
     [
          { "label" : "Week 1", "value" : "14400" },
          { "label" : "Week 2", "value" : "19600" },
          { "label" : "Week 3", "value" : "24000" },
          { "label" : "Week 4", "value" : "15700" }
     ]
}

you can provide this json either by url service or json directly

in jsp

<html>
  <head>        
    <title>My First chart using FusionCharts XT - JSON data URL</title>         
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="chartContainer">FusionCharts XT will load here!</div>          
    <script type="text/javascript"><!--         

      var myChart = new FusionCharts( "FusionCharts/Column3D.swf", 
                   "myChartId", "400", "300", "0" );
      myChart.setJSONUrl(service url);
      myChart.render("chartContainer");
      
    // -->     
    </script>      
  </body> </html>

Friday 2 August 2013

Fusion Charts Using Json Data

fusioncharts.jsp

Data.json

No comments:

Post a Comment