jsanthosh

Java Script Chart Redering Issue

Recommended Posts

Hi,

 

Am new to FusionCharts. I have 2 questions.

 

1)

 

Am trying to create a basic chart (Pure JavaScript) using FusionCharts. But am getting the below script error while creating. I have given the chart type as "Column3D". But if i give the chart type as "FusionCharts/Column3D.swf" then a column chart is created without 3D Effect. Can you tell me what am doing wrong here.

 

Uncaught TypeError: Cannot call method 'chartType' of undefined

 

 


 
Below is my code.
 
<html>
  <head>
    <script type="text/javascript" src="FusionCharts/FusionCharts.js">
    </script>
  </head>
  <body>
 
    <div id="chartContainer"></div>
    
    <script type="text/javascript">
 
     FusionCharts.setCurrentRenderer('javascript');
      
      var myChart                   =             new FusionCharts( "Column3D", "myChartId", "400", "300", "0" );
 
      myChart.setJSONData( 
                            {
                                  "chart": {
                                      "yaxisname": "Sales Figure",
                                      "caption": "Top 5 Sales Person",
                                      "numberprefix": "$",
                                      "showborder": "1",
                                      "imagesave": "1",
                                      "exporthandler": "http://export.api3.fusioncharts.com"
                                  },
 
                                  "data": [
                                      {
                                          "label": "Alex",
                                          "value": "25000"
                                      },
                                      {
                                          "label": "Mark",
                                          "value": "35000"
                                      },
                                      {
                                          "label": "David",
                                          "value": "42300"
                                      },
                                      {
                                          "label": "Graham",
                                          "value": "35300"
                                      },
                                      {
                                          "label": "John",
                                          "value": "31300"
                                      }
                                  ],
                         
                             }
                        );
      //myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer");
 
    </script>
  </body>
</html>

 

 

2)

 

How do i give the chart data to fusion to draw a chart?

 

Whether the following is the only way to give the data

 

data :[

            {

                "value" : 'value1'

            },

 

           {

                 "value" : 'value2'

           },

 

           {

                 "value" : 'value3'

            }

             .......

             .......

         ]

 

or can we give the data as array like below.

 

data : [

                   value : ["value1", "value2", "value3", ....]

          ]

 

Please help me.

 

Regards,

Santhosh

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi Santhosh,

 

Welcome to FusionCharts Forum.

 

1. With regard to your first query, we have tested the code and it is working correctly from our end. (Please find attached screen shot for your reference).

 

Could you please confirm once whether you have copied "FusionCharts.js", "FusionCharts.HC.js", "FusionCharts.HC.Charts.js" and "jquery.min.js" files in "application > FusionCharts" folder?

 

Also, please try rendering the chart once again by clearing the browser cache and see if it helps!

 

2. With regard to your second query, please note that FusionCharts XT accepts data either in XML or in JSON format as per the FusionCharts XML/JSON data format.

 

So, if you have the data as an array in JSON object, you would need to convert it as per the FusionCharts JSON data format and then provide to the chart for plotting.

 

For more information on "FusionCharts XT and JSON", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?DataFormats/JSON/Overview.html

 

Hope this helps!

 

post-23588-0-50486100-1369128470_thumb.png

Share this post


Link to post
Share on other sites

Hi,

 

Thank you for the reply.

 

I am using HighCharts so far. Now am trying to evaluate FusionCharts.  Fusion is good but following are my difficulties. 

 

1.     In highcharts it’s very easy to specify chart types

       (e.g.,) For column charts, I will give only chart type as column but in Fusion there is lot of categories in column chart itself (Like Column2D, MSColumn2D, StackedColumn2D, ….etc)?

 

2.     Zooming :

a)    Is it possible to Zoom the chart other than the zoomline chart? I would like to zoom the column chart. In highcharts it’s possible. Refer the below example

                         http://jsfiddle.net/DPpg4/

 

                  B)   Also, there is 3 types of zoom is available (x, y and xy) whereas in Fusion only column (y) zoom is available I think.

 

3      I have seen that, in zoom line chart I can give the data with a separater “|” like below “12|13|14|14|15|16|17|”

       Can I do the same for other types of chart as well. Currently am generating the data in Fusionin the following way { “value” : “12”, “value” : “13”, ………}.

       But in HighCharts i can construct the data as [12, 13, 14, 15, ....]. This will reduce the data construction time as well as the data transfer from the server to client (If we construct the data in server)

 

4.     Legend: After clicking on the legend icon, chart is not getting regenated as like what high charts are doing. Refer the below example

                       http://jsfiddle.net/XewKH/

 

Please let me know, whether i can achieve above things in FusionCharts.

 

Regards,

Santhosh

Edited by jsanthosh

Share this post


Link to post
Share on other sites
Hi Santhosh,

 

Please find the answers to your queries below:

 

1. In highcharts it’s very easy to specify chart types  (e.g.,) For column charts, I will give only chart type as column but in Fusion there is lot of categories in column chart itself (Like Column2D, MSColumn2D, StackedColumn2D, ….etc)?

 

Ans: FusionCharts provides you with plenty of chart types to cater to various business requirements to render a chart. For Eg. A Column chart is used when you want to compare the values of individual data points with another. When the comparison has to be made between multiple sets of data, Multi-Series Column chart can be used. Also, if you want your chart to have 3D view, then the Column 3D chart can be used. Ans, the stacked charts can be used when data sets have to be broken down into their constituents, and then the data sets as a whole also need to be compared against one another. Hence, FusionCharts gives you comprehensive range of chart types with smart reporting capabilities, animations and interactivity that are bound to make your apps look stunning and power-packed.

 

2.a. Is it possible to Zoom the chart other than the zoomline chart? I would like to zoom the column chart. In highcharts it’s possible.

 

Ans: No it is not possible to zoom any other chart except the Zoomline chart. But, FusionCharts provides you Scroll Column 2D chart which allows to scroll through the x-axis to see the data plots which are not visible initially. This allows you to plot lots of data on the chart within less space. Also, FusionCharts provides you Drag Column chart that allows you to visually manipulate the data on the chart and then submit it back. This chart can be intensively used for simulations, financial planning etc

 

b. Also, there is 3 types of zoom is available (x, y and xy) whereas in Fusion only column (y) zoom is available I think.

 

Ans: Zoom line chart allows you to zoom the chart on x and y-axis. It also provides you pin mode for comparing a set of data points with the rest of the points.

 

3. I have seen that, in zoom line chart I can give the data with a separater “|” like below “12|13|14|14|15|16|17|”.  Can I do the same for other types of chart as well. Currently am generating the data in Fusion in the following way { “value” : “12”, “value” : “13”, ………}. But in HighCharts i can construct the data as [12, 13, 14, 15, ....]. This will reduce the data construction time as well as the data transfer from the server to client (If we construct the data in server)

 

Ans: The data format for each chart type is different. The data format in compact form using "|" is accepted only by Zoom line chart . Also, you cannot pass data data as an array as [12, 13, 14,15, ....] to any chart.

 

For information on data formats, you may please refer : http://docs.fusioncharts.com/charts/contents/DataFormats/JSON/Overview.html

 

4.  Legend: After clicking on the legend icon, chart is not getting regenated as like what high charts are doing.

 

Ans: This feature is not supported by FusionCharts.

 

Hope this helps.  :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now