Hello guys Im doing a eval on this FusionCharts and I keep running into snags. I get this error and not sure why...anybody out there familiar with FusionCharts??

Im just trying to run the example

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

<script type="text/javascript">

<!--               

var myChart = new FusionCharts    ( "../js/fusioncharts/Column3D.swf",                   
            "myChartId", "400", "300", "0", "1" );      

            myChart.setJSONData( {         
            "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" }         
             ]
     } );

            myChart.render("div_view");         

  // -->         

  </script> 
    <div id="div_view">FusionCharts will load here!</div> 

Hello guys Im doing a eval on this FusionCharts and I keep running into snags. I get this error and not sure why...anybody out there familiar with FusionCharts??

Im just trying to run the example

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

<script type="text/javascript">

<!--               

var myChart = new FusionCharts    ( "../js/fusioncharts/Column3D.swf",                   
            "myChartId", "400", "300", "0", "1" );      

            myChart.setJSONData( {         
            "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" }         
             ]
     } );

            myChart.render("div_view");         

  // -->         

  </script> 
    <div id="div_view">FusionCharts will load here!</div> 

• javascript
• fusioncharts

• Fixed it....<div id="div_view">FusionCharts will load here!</div> has tobe BEFORE the JS – Doc Holiday Commented Jun 27, 2012 at 18:53

3 Answers 3

Fixed it....FusionCharts will load here!

has tobe BEFORE the JS

By the time fusion charts are loaded, the dom is not yet loaded pletely. so try the scripting with

$(document).ready(function(){

// your code goes here.
        var myChart = new FusionCharts    ( "../js/fusioncharts/Column3D.swf",                   
        "myChartId", "400", "300", "0", "1" );      

        myChart.setJSONData( {         
        "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" }         
         ]
 } );

        myChart.render("div_view");  

});

otherwise. write the script tag after the <div> tag

When creating the FusionCharts object the fifth parameter is the DOM Element where the rendering should be done see here for more info

http://www.fusioncharts./dev/api/fusioncharts.html

As such whatever string you have there as the DOM element should be set as the id of the DIV where you want the chart to be displayed, for example:

The Fusion chart object is created like this : $pie3dChart = new FusionCharts("pie3d", "ex2", "100%", 400, "chart-1", "json", .... Here the string "chart-1" is the DOM Element id and so you should have a div in the document like this <div id="chart-1"></div> which will be where the rendering will take place.