Ext js Custom charts

Question

I'm using ExtJS for displaying charts. I want to use scatter chart, in which axis should be in the middle, instead of default axes.

For that i tried to place the axes, x and y, accordingly in the middle of the panel, and drew the chart without axis in that panel with absolute layout. I know this might not be the right way of doing. Please suggest me how it can be done.

Thanks in advance.

Answer 1

I'm using FusionCharts. Here is a example, how i use it in my Extjs Page (EXTJS Ver. 3.4.1)

For Perform below example, you must have to download FusionCharts. After That, Copy "Column2D.swf" to your root director.

1. Add .js files to your .php or .html page

   <script type="text/javascript" src="js/utility/FusionCharts.js"></script>
   <script type="text/javascript" src="js/chartdata/chartdata.js" ></script>
   

2. Create .js file with your data. (Here We Have 'chartdata.js' )

   var dataStringCredit ='<chart baseFontSize="12" baseFont="Arial,Helvetica,sans-serif" xAxisName="Top 5 Products Using Invoiced Sales Dollers for Last 12 Months" alternateVGridColor="AFD8F8" baseFontColor="114B78" toolTipBorderColor="114B78" toolTipBgColor="E7EFF6" useRoundEdges="1" showBorder="0" bgColor="FFFFFF,FFFFFF">\n\
           <set label="ABC" value="23" color="AFD8F8"/> \n\
           <set label="123" value="12" color="F6BD0F"/> \n\
           <set label="XYZ" value="17" color="8BBA00"/> \n\
           <set label="MNO" value="14"  color="A66EDD"/> \n\
           <set label="789" value="12"  color="F984A1"/>\n\
   </chart>';
   

3. In your .js file, whene you want to add/call/show your chart.

   A. Add This Data at start of the page.

   FusionCharts.setCurrentRenderer('javascript'); 
                               var paymentchart = new FusionCharts("Column2D.swf", "ChartId_flash", "440", "400", "0", "1" );
                               paymentchart.setXMLData( dataStringCredit );
                               paymentchart.render("divagingchart");
   

   B. Add This Where chart display.

   items:[{
       html: '<div id="divagingchart"></div>'
   }]
   

4. Your Chart Look like something this.