Hello all,
I'm new with fusion charts and am trying to figure out what I'm doing wrong. I have downloaded and created a few "static" charts by including the JSON data directly in the html. This works just fine.
So now, I have gotten my Ubuntu server that will host this app up and running with connectivity to the SQL database that will be feeding our dashboard. I wrote a little PHP script that creates the JSON for me. It outputs the following data:
{"chart": { "caption": "Fulfilled Invoice Summary MTD", "subCaption": "Sales for February 2015", "xAxisName": "Date", "yAxisName": "Revenue (In USD)", "numberprefix": "$", "syncAxisLimits": "1", "PYAxisMinValue": "0", "animation": "1", "theme": "zune" },"categories": [{"category": [ {"label": "2015-02-01"}, {"label": "2015-02-02"}, {"label": "2015-02-03"}, {"label": "2015-02-04"}, {"label": "2015-02-05"}, {"label": "2015-02-06"}, {"label": "2015-02-07"}, {"label": "2015-02-08"}, {"label": "2015-02-09"}, {"label": "2015-02-10"}, {"label": "2015-02-11"}, {"label": "2015-02-12"}, {"label": "2015-02-13"}, {"label": "2015-02-14"}, {"label": "2015-02-15"}, {"label": "2015-02-16"}]}], "dataset": [{"seriesname": "Daily Revenue", "showValues": "0","data": [{"value": "19373.71"}, {"value": "73471.19"}, {"value": "386491.11"}, {"value": "407381.39"}, {"value": "283760.48"}, {"value": "191080.4"}, {"value": "0"}, {"value": ""}, {"value": "219671.68"}, {"value": "366601.47"}, {"value": "78393.95"}, {"value": "602101.96"}, {"value": "758079.83"}, {"value": "0"}, {"value": ""}, {"value": "876522.49"}]}, {"seriesname": "MTD Total", "parentyaxis": "S", "showValues": "0", "renderas": "Line","data": [{"value": "19373.71"}, {"value": "92844.89999999999"}, {"value": "479336.01"}, {"value": "886717.4"}, {"value": "1170477.88"}, {"value": "1361558.28"}, {"value": "1361558.28"}, {"value": "1361558.28"}, {"value": "1581229.96"}, {"value": "1947831.43"}, {"value": "2026225.38"}, {"value": "2628327.34"}, {"value": "3386407.17"}, {"value": "3386407.17"}, {"value": "3386407.17"}, {"value": "4262929.66"}]}]}
When I call it
<!doctype html> <html><head><meta charset="utf-8"> <title>Dashboard</title> <script type="text/javascript" src="/fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="/fusioncharts/themes/fusioncharts.theme.zune.js"></script> <script type="text/javascript"> FusionCharts.ready(function(){ var revenueChart = new FusionCharts({ type: "MSColumn3DLineDY", renderAt: "chartContainer", width: "1000", height: "600", dataFormat: "json"}); revenueChart.setJSONUrl("jsoninvsum.php"); revenueChart.render("chartContainer"); }); </script> </head><body> <div id="chartContainer">FusionCharts XT will load here!</div> </body></html>
It gives the error invalid data. But if I copy/paste the output above directly into the body and don't call it via the JSONUrl, it renders the chart just fine. What am I missing?
<!doctype html> <html><head><meta charset="utf-8"> <title>Fusion</title> <script type="text/javascript" src="/fusioncharts/fusioncharts.js"></script> <script type="text/javascript" src="/fusioncharts/themes/fusioncharts.theme.zune.js"></script> <script type="text/javascript"> FusionCharts.ready(function(){ var revenueChart = new FusionCharts({ type: "MSColumn3DLineDY", renderAt: "chartContainer", width: "1000", height: "600", dataFormat: "json", dataSource: {"chart": { "caption": "Fulfilled Invoice Summary MTD", "subCaption": "Sales for February 2015", "xAxisName": "Date", "yAxisName": "Revenue (In USD)", "numberprefix": "$", "syncAxisLimits": "1", "PYAxisMinValue": "0", "animation": "1", "theme": "zune" },"categories": [{"category": [ {"label": "2015-02-01"}, {"label": "2015-02-02"}, {"label": "2015-02-03"}, {"label": "2015-02-04"}, {"label": "2015-02-05"}, {"label": "2015-02-06"}, {"label": "2015-02-07"}, {"label": "2015-02-08"}, {"label": "2015-02-09"}, {"label": "2015-02-10"}, {"label": "2015-02-11"}, {"label": "2015-02-12"}, {"label": "2015-02-13"}, {"label": "2015-02-14"}, {"label": "2015-02-15"}, {"label": "2015-02-16"}]}], "dataset": [{"seriesname": "Daily Revenue", "showValues": "0","data": [{"value": "19373.71"}, {"value": "73471.19"}, {"value": "386491.11"}, {"value": "407381.39"}, {"value": "283760.48"}, {"value": "191080.4"}, {"value": "0"}, {"value": ""}, {"value": "219671.68"}, {"value": "366601.47"}, {"value": "78393.95"}, {"value": "602101.96"}, {"value": "758079.83"}, {"value": "0"}, {"value": ""}, {"value": "876522.49"}]}, {"seriesname": "MTD Total", "parentyaxis": "S", "showValues": "0", "renderas": "Line","data": [{"value": "19373.71"}, {"value": "92844.89999999999"}, {"value": "479336.01"}, {"value": "886717.4"}, {"value": "1170477.88"}, {"value": "1361558.28"}, {"value": "1361558.28"}, {"value": "1361558.28"}, {"value": "1581229.96"}, {"value": "1947831.43"}, {"value": "2026225.38"}, {"value": "2628327.34"}, {"value": "3386407.17"}, {"value": "3386407.17"}, {"value": "3386407.17"}, {"value": "4262929.66"}]}]} }); revenueChart.render("chartContainer"); }); </script> </head> <body> <div id="chartContainer">FusionCharts XT will load here!</div> </body></html>
Thank you in advance for any assistance you can offer!