FAQ

1. How to feed the data from server?

   There are several ways to meet your need:

   1. If you already have HTML table on the page and want user to create chart using the table data, here is an example.

      You just need to create a JavaScript function and attach it to some event. Here we created the function "doTableChart()" and attached it to "onclick" of table.

      In the JavaScript function, we create a new instance of config and set chart type, size, data table id, output chart image id, etc. See Developer section for detail.

      
      <script type="text/javascript"> function doTableChart() { var config = new WCWConfig(); config.setChartType('bvg'); //Bar vertical grouped config.setChartSize(260, 120); config.setDataTableId('dataTable'); config.setOutputChartId('outputChart'); config.setDataColor('A52A2A,6633FF,FF99FF'); config.isRedrawAfterOpen = true; WCWizard.show(null, config); } </script> <table id="dataTable" border="1" cellpadding="3" cellspacing="0" width="360" onclick="doTableChart();"> <CAPTION>Animals In Circus Over Years</CAPTION> <tr align="center"> <th><br/></th> <th>2006</th> <th>2007</th> <th>2008</th> </tr> <tr align="center"> <th>Bear</th> <td>20</td> <td>31</td> <td>40</td> </tr> <tr align="center"> <th>Lion</th> <td>95</td> <td>83</td> <td>76</td> </tr> <tr align="center"> <th>Tiger</th> <td>55</td> <td>65</td> <td>50</td> </tr> </table> <img id="outputChart" src="/chsite/image/no.gif"/>
      
      To see the above code in action, click any where on the following table:
      
      

      Animals In Circus Over Years

      	2006	2007	2008
      Bear	20	31	40
      Lion	95	83	76
      Tiger	55	65	50

      
      

      You can do it without the the JavaScript function and put everything in "onclick" event. This will end of one line of code change. However, the code will be hard to read.

      
      ...... <table id="dataTable" border="1" cellpadding="3" cellspacing="0" width="360" onclick="WCWizard.show(null, {dataTableId:'dataTable',outputChartId:'outputChart',isRedrawAfterOpen:true,additionalParameterString:'cht=bvg&chs=260x120&chco=A52A2A,6633FF,009933'});" > ...... ...... rest are same as above
      
      

      There is also a Table Data Demo in our "Live Data" tab.

      If you try the above code on your own site, be sure to include WCW JavaScript library and stylesheet in html header section.

   
   

   2. If you do not want user to see the data, you output the data directly into the WCW configuration. The CGI could be any programming language and only thing need is to output the "config.setChartData('23,60,80|40,50,90..... '); The data group is separated by "|", and the data element by ",". See Developer section for detail.

      The following code also give user a handler icon, so when clicked, it will launch charing.

      
      <script type="text/javascript"> function doChart(img) { var config = new WCWConfig(); config.setChartType('bvg'); config.setChartSize(260, 120); config.setChartTitle('Animal in Circus Over Years'); config.setChartData('23,60,80|40,50,90'); config.setChartLabel('2006|2007|2008'); config.setChartLegend('Bear|Lion'); config.setDataColor('A52A2A,009900'); config.isRedrawAfterOpen = true; WCWizard.show(img, config); } </script> <img src="/lib/image/any_image.png" onclick="doChart(this);"/>
      To see the above code in action, click on the following icon:
      
      
      

      You can attach to "onload" event, instead of onclick. In this way, you get chart right after the image is loaded.

      <img src="/lib/image/any_image.png" onload="doChart(this);"/>
      
      

      If you try the above code on your own site, be sure to include WCW JavaScript library and stylesheet in html header section.

   
   

   3. This scenario is for large data set or for some sensitive data so we do not want to output the data into the page at the beginning. The data will be loaded only if a user asks for charting.

      You just need to set the data URL in the config. It is simple. and WCW will do AJAX call and load the data on the fly. .

      In the following code, we set "config.setDataLoadURL('loadDataDemo.php');", so the WCW will load the data from 'loadDataDemo.php'. The URL could point to any CGI program or static page. The returned text format is Google Chart API parameters and you can enclode as manay parameters as you want. See Developer section for detail). In this example, 'loadDataDemo.php' return the following text:

      chd=t:20,31,40|95,83,76|55,65,50&chtt=Animals in Today Show|(09/26/2008)&chdl=Bear|Lion|Tiger&chl=2006|2007|2008&chco=A52A2A,6633FF
      
      

      HTML code:

      <script type="text/javascript"> function dolazyDataChart(img) { var config = new WCWConfig(); config.setChartType('bvg'); config.setChartSize(320, 120); config.setDataLoadURL('loadDataDemo.php'); config.isRedrawAfterOpen = true; WCWizard.show(img, config); } </script> <img src="/lib/image/any_image.png" onclick="dolazyDataChart(this)"/>
      

      Here is the above code in action:

      
      
      

      For security reason, the data URL is limited by the same origin policy. Basically, if you have relative URL, it is fine. For absolute URL, if they from same domain, it is fine. Otherwise, the data can not be loaded. See detail.

      If you try the above code on your own site, be sure to include WCW JavaScript library and stylesheet in html header section.

   
   

   4. If you already has data in tab (or space, comma, semicolon) delimited format, you directly output them into the config. See Graph my Data for live example.

   
   

   5. You can create Google Chart URL programmly and output chart as image. And then, attach WCW to image event, such as onload, onclick, onmouseover, keyup etc. The following example attached to onclick.

      <img src="http://chart.apis.google.com/chart?cht=p&chs=50x50&chd=t:23,60&chco=A52A2A,009900" onclick="WCWizard.show(this);"/>
      

      Here is the above code in action:

      
      

      In this scenario, you want to show the chart first and let user modify it. Or you want to use WCW as debug tool to debug and fine tune your chart URL.

      If you try the above code on your own site, be sure to include WCW JavaScript library and stylesheet in html header section.

   
   

2. How to attach the WCW to an image event?

   You can attach any event to launch the WCW, "onclick", "onload", "onmouseup", etc. Here is an code to start the WCW on image loading.

   
   <img src="http://chart.apis.google.com/chart?cht=p3&chs=400x200&chd=t:30,60,70&chl=April|May|June&chco=A52A2A,6633FF,FF9933"
   onload="WCWizard.show(this);"/>
   
   

3. How to configure the WCW so user can only change title but nothing else?

   You can configure the WCW for any actions. Please refer to Developer for more detail. For the title, you can add the following code in your page,

   <script type="text/javascript">
   	var wcwConfig = new WCWConfig();
   	wcwConfig.canTitleBeChanged = true;
   </script>
   

4. What are the WCW library and stylesheet?

   There are one JavaScript library file and one stylesheet in order for WCW to work. Copy and paste them into your head section of html file.

   <script type="text/javascript" src="http://www.webchartwizard.com/lib/wcw.php"></script> <link type="text/css" href="http://www.webchartwizard.com/lib/wcw.css" rel="stylesheet"/>