CODEWITHSUNDEEP
phparraysjsonfusioncharts
piotr
piotr

Reputation: 152

Fusionchart no chart only blank space

I am trying to create multi-series fusionchart using this guide.

I have JSON file $jsonEncodedData which is created from array $arrData and with new FusionCharts("msline", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData) I am trying to covert it into the chart.

My code:

<?php
include("fusioncharts/fusioncharts.php");
?>
<html>
<head>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
</head>
<body>
<?php 
$jsonEncodedData = json_encode($arrData);
$Chart = new FusionCharts("msline", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData);
$Chart->render();
?>
<div id="chart-1">Fusion Charts will render here</div>
</body>
</html>

MY JSON file:

{
"chart":{
"caption":"Number of visitors last week",
"subCaption":"Bakersfield Central vs Los Angeles Topanga",
"captionFontSize":"14",
"subcaptionFontSize":"14",
"subcaptionFontBold":"0",
"paletteColors":"#0075c2,#1aaf5d,#FF5733,#33B5FF",
"bgcolor":"#ffffff",
"showBorder":"0",
"showShadow":"0",
"showCanvasBorder":"0",
"usePlotGradientColor":"0",
"legendBorderAlpha":"0",
"legendShadow":"0",
"showAxisLines":"0",
"showAlternateHGridColor":"0",
"divlineThickness":"1",
"divLineDashed":"1",
"divLineDashLen":"1",
"xAxisName":"Day",
"showValues":"0"
},
"categories":{
"category":[
{
"label":"N.12\/02"
},
{
"label":"Pn.13\/02"
},
{
"label":"Wt.14\/02"
},
{
"label":"\u015ar.15\/02"
},
{
"label":"Cz.16\/02"
},
{
"label":"Pt.17\/02"
},
{
"label":"So.18\/02"
}
]
},
"dataset":[
{
"seriesname":"IRDN",
"data":[
{
"value":"142.59"
},
{
"value":"174.88"
},
{
"value":"176.97"
},
{
"value":"182.48"
},
{
"value":"160.15"
},
{
"value":"160.72"
},
{
"value":"165.47"
}
]
},
{
"seriesname":"SIRDN",
"data":[
{
"value":"148.81"
},
{
"value":"197.29"
},
{
"value":"202.27"
},
{
"value":"211.93"
},
{
"value":"177.87"
},
{
"value":"179.37"
},
{
"value":"177.69"
}
]
},
{
"seriesname":"IRDN24",
"data":[
{
"value":"140.31"
},
{
"value":"174.50"
},
{
"value":"180.38"
},
{
"value":"187.70"
},
{
"value":"161.91"
},
{
"value":"161.62"
},
{
"value":"160.98"
}
]
},
{
"seriesname":"IRDN 8.22",
"data":[
{
"value":"147.33"
},
{
"value":"197.02"
},
{
"value":"202.21"
},
{
"value":"211.28"
},
{
"value":"178.11"
},
{
"value":"179.32"
},
{
"value":"176.31"
}
]
}
]
}

Eventhough it looks correct chart doesn't work (I got blank space without any errors, even text where the graph should appear <div id="chart-1">Fusion Charts will render here</div> disappears. I have checked debugger and my proces stops on step 9 out of 12 http://www.fusioncharts.com/dev/api/fusioncharts/namespaces/debugger.html:

#1 [FusionCharts] fired "ready" event.
#2 [myChart] fired "beforeinitialize" event.
#3 [myChart] fired "beforedataupdate" event.
#4 [myChart] fired "dataupdated" event.
#5 [myChart] fired "initialized" event.
#6 [myChart] fired "beforerender" event.
#7 [myChart] fired "internal.loaded" event.
#8 [myChart] fired "internal.drawstart" event.
#9 [myChart] fired "dataloaded" event.

What can be a reason for that?

EDIT Thanks to @uom-pgregorio I have found my mistake.

In JSON 'category' should be in aditional []:

"categories": [{
        "category": [{
            "label": "Mon"
        }, {
            "label": "Tue"
        }, {
            "label": "Wed"
        }, {
            "label": "Thu"
        }, {
            "label": "Fri"
        }, {
            "label": "Sat"
        }, {
            "label": "Sun"
        }]
    }],

instead of:

"categories": {
        "category": [{
            "label": "Mon"
        }, {
            "label": "Tue"
        }, {
            "label": "Wed"
        }, {
            "label": "Thu"
        }, {
            "label": "Fri"
        }, {
            "label": "Sat"
        }, {
            "label": "Sun"
        }]
    },

Upvotes: 0

Views: 772

Answers (1)

dokgu
dokgu

Reputation: 6040

Updating my answer because you provided a different guide.

From what I can see you forgot to do this step:

/**
 * Convert the data in the `$actualData` array into a format that can be
 * consumed by FusionCharts. The data for the chart should be in an array
 * wherein each element of the array is a JSON object having the "label"
 * and “value” as keys.
 */
$arrData['data'] = array();
// Iterate through the data in `$actualData` and insert in to the `$arrData` array.
foreach ($actualData as $key => $value) {
  array_push($arrData['data'],
    array(
      'label' => $key,
      'value' => $value
    )
  );
}

Update #1

I noticed you already have it hard-coded in your JSON but all you included is the value and no label. You're missing the label element.

Update #2

Basically you need to have your JSON in this format:

{
    "chart": {
        "caption": "Split of Visitors by Age Group",
        "subCaption": "Last year",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "use3DLighting": "0",
        "showShadow": "0",
        "enableSmartLabels": "0",
        "startingAngle": "0",
        "showPercentValues": "1",
        "showPercentInTooltip": "0",
        "decimals": "1",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "showHoverEffect": "1",
        "showLegend": "1",
        "legendBgColor": "#ffffff",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendItemFontSize": "10",
        "legendItemFontColor": "#666666",
        "useDataPlotColorForLabels": "1"
    },
    "data": [
        {
            "label": "Teenage",
            "value": "1250400"
        },
        {
            "label": "Adult",
            "value": "1463300"
        },
        {
            "label": "Mid-age",
            "value": "1050700"
        },
        {
            "label": "Senior",
            "value": "491000"
        }
    ]
}

Upvotes: 0

Related Questions