Changing chart at client side

Using a combination of FusionCharts and JavaScript, you can simulate of process of dynamic chart type change at client side, without involving any page refreshes. That is, at client side, you can change chart type, from say column chart to pie chart or line chart, and provide it same or new data, without refreshing the page.

We do the same using the following concepts:

  • Load the first FusionCharts chart (say column chart) using JavaScript embedding method in a DIV called chart1Div. Now, internally, while rendering the chart, FusionCharts JavaScript class actually replaces the innerHTML of this DIV to include the chart at runtime.
  • When the chart type needs to be changed, create another chart instance object and render it again in the same DIV. The browser will again replace the innerHTML of the DIV (existing chart) with the new chart.
  • As such, the user will get the effect of dynamic chart change at client side.

Let's quickly see this in an example.

This example is present in Download Package > Code > ChartChange > ChartChange.html.
 
Code in ChartChange.html
ChartChange.html contains the following code:

<HTML>
   <HEAD>
      <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
      <SCRIPT LANGUAGE="JavaScript">
         //We store the XML data as a string
         var strXML = "<graph caption='Hours worked' showNames='1'><set name='Tom' value='32' color='AFD8F8'/><set name='Mary' value='16' color='F6BD0F'/><set name='Jane' value='42' color='8BBA00'/></graph>";
         /*
         * updateChart method is called, when user clicks the button
         * Here, we change the chart from Column to line or pie (based on what SWF
         * has been passed).
         */
         function updateChart(chartSWF){
            //Create another instance of the chart.
            var chart1 = new FusionCharts(chartSWF, "chart1Id", "400", "300", "0", "0");
            chart1.setDataXML(strXML);
            chart1.render("chart1div");
         }
      </SCRIPT>
   </HEAD>
<BODY>
   <div id="chart1div">
   FusionCharts
   </div>
   <script language="JavaScript">
      var chart1 = new FusionCharts("../../FusionCharts/FCF_Column3D.swf", "chart1Id", "400", "300", "0", "0");
      chart1.setDataXML(strXML);
      chart1.render("chart1div");
   </script>

   <form name='frmUpdate'>
   Show as:
      <input type='button' value='Column' onClick="javaScript:updateChart('../../FusionCharts/FCF_Column3D.swf');" name='btnColumn' />
      <input type='button' value='Line' onClick="javaScript:updateChart('../../FusionCharts/FCF_Line.swf');" name='btnLine' />
      <input type='button' value='Pie' onClick="javaScript:updateChart('../../FusionCharts/FCF_Pie3D.swf');" name='btnPie' />
</form>
   </CENTER>
</BODY>
</HTML>

As you can see above, here we're doing the following:

  • Storing the XML data for all the charts in a JavaScript variable strXML. For the sake of simplicity, we're using a single data for all the charts and provide the same using dataXML method. In your applications, you can use different data sources for all your charts and even use dataURL method.
  • Then, we're loading a 3D Column chart initially with this XML data. The chart is rendered in a DIV named as chart1div.
  • We create 3 buttons for the user to choose chart type.
  • When each of these buttons are clicked, they invoke updateChart function and pass the SWF file name of the new chart as parameter.
  • updateChart function creates a new instance of the chart, based on the SWF file name passed and finally renders in the same DIV (chart1div).
  • As such, when the user now clicks on the buttons, the charts get updated at client side, without need for any page refreshes.