CODEWITHSUNDEEP
javascriptchartsrendering
Shaonline
Shaonline

Reputation: 1637

Fusionchart is loaded but i can't see it - javascript

I am trying to generate fusion chart. Following the fusionchart site i did all the required steps i think.

In the header i am including these two files

<script type="text/javascript" src="<?=APP_URL?>corporate/include/base/fusioncharts.js"></script>
<script type="text/javascript" src="<?=APP_URL?>corporate/include/base/fusioncharts.theme.fint.js"></script>

The function looks like the following 

function getGraph(){

    var revenueChart = new FusionCharts({
        "type": "column2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Monthly revenue for last year",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Month",
                "yAxisName": "Revenues (In USD)",
                "theme": "fint"
            },
            "data": [
                {
                    "label": "Jan",
                    "value": "420000"
                },
                {
                    "label": "Feb",
                    "value": "810000"
                },
                {
                    "label": "Mar",
                    "value": "720000"
                },
                {
                    "label": "Apr",
                    "value": "550000"
                },
                {
                    "label": "May",
                    "value": "910000"
                },
                {
                    "label": "Jun",
                    "value": "510000"
                },
                {
                    "label": "Jul",
                    "value": "680000"
                },
                {
                    "label": "Aug",
                    "value": "620000"
                },
                {
                    "label": "Sep",
                    "value": "610000"
                },
                {
                    "label": "Oct",
                    "value": "490000"
                },
                {
                    "label": "Nov",
                    "value": "900000"
                },
                {
                    "label": "Dec",
                    "value": "730000"
                }
            ]
        }
    });

    revenueChart.render();

}

The page where i have the div to show in looks like this

<h1><?=$headline;?></h1>
<div style=" height:100%; width: 100%; float: left;" id="main-dashboard">
     <div class="add-goal" onclick="insertGoal()">
       <i class="fa fa-plus fa-2x" style="color: black"></i>
     </div>
<div id="chartContainer">FusionCharts XT will load here!</div>

after execution the chart does seem to be loaded, but i can't see. When i inspect the element using developer tool this is what i see inside the "chartContainer" div 

<span id="chartobject-1" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 500px; height: 300px;"></span>

but its kind of invisible. Why? What do i need to do to show it properly.?

Upvotes: 0

Views: 463

Answers (1)

suvradip Saha
suvradip Saha

Reputation: 71

According to your dataSource Object, the column2D chart is rendering perfectly at my end. Don't know what is the problem at your side. Please Find the below code.

    <html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">


FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
  "type": "column2d",  
  "renderAt": "chartContainer",
  "width": "500",
  "height": "300",
  "dataFormat": "json",
  "dataSource": {
            "chart": {
                "caption": "Monthly revenue for last year",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Month",
                "yAxisName": "Revenues (In USD)",
                "theme": "fint"
            },
            "data": [
                {
                    "label": "Jan",
                    "value": "420000"
                },
                {
                    "label": "Feb",
                    "value": "810000"
                },
                {
                    "label": "Mar",
                    "value": "720000"
                },
                {
                    "label": "Apr",
                    "value": "550000"
                },
                {
                    "label": "May",
                    "value": "910000"
                },
                {
                    "label": "Jun",
                    "value": "510000"
                },
                {
                    "label": "Jul",
                    "value": "680000"
                },
                {
                    "label": "Aug",
                    "value": "620000"
                },
                {
                    "label": "Sep",
                    "value": "610000"
                },
                {
                    "label": "Oct",
                    "value": "490000"
                },
                {
                    "label": "Nov",
                    "value": "900000"
                },
                {
                    "label": "Dec",
                    "value": "730000"
                }
            ]
        }
});

revenueChart.render();

});


</script>
</head>
<body>
  <!-- <div id="chartContainer">FusionCharts XT will load here!</div> -->

  <div style=" height:100%; width: 100%; float: left;" id="main-dashboard">
     <div class="add-goal" onclick="insertGoal()">
       <i class="fa fa-plus fa-2x" style="color: black"></i>
     </div>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

Upvotes: 3

Related Questions