cvh Report post Posted January 20, 2012 Hello all. I'm new to FusionCharts, and I'm using the evaluation version. Using the setJSONUrl() method for the .json file below results in 'no data found'. Using the same JSON in setJSONData() works fine. I read in another post that JSON isn't supported in the 'free edition' - is that the case and does this restriction apply to the evaluation version if so, why should it work when calling setJSONData()? The files 'weekly-sales.html' and 'weekly-sales.json' are in the same folder. weekly-sales.json: { "chart": { "caption" : "Weekly Sales Summary" , "xAxisName" : "Week", "yAxisName" : "Sales", "numberPrefix" : "{:content:}quot; }, "data" : [ { "label" : "Week 1", "value" : "14400" }, { "label" : "Week 2", "value" : "19600" }, { "label" : "Week 3", "value" : "24000" }, { "label" : "Week 4", "value" : "15700" } ] } weekly-sales.html (note the call to setJSONUrl(), this generates the 'no data found' error) <html> <head> <title>My First chart using FusionCharts</title> <script type="text/javascript" src="FusionCharts/FusionCharts.js"> </script> </head> <body> <div id="chartContainer" style="width:800px; height:300px;">FusionCharts will load here!</div> <script type="text/javascript"><!-- var myChart = new FusionCharts( "FusionCharts/Pie3D.swf", "myChartId", "80%", "100%", "0", "1" ); myChart.setJSONUrl("weekly-sales.json"); myChart.render("chartContainer"); // --> </script> </body> </html> This version, which calls setJSONData(), works fine: <html> <head> <title>My First chart using FusionCharts</title> <script type="text/javascript" src="FusionCharts/FusionCharts.js"> </script> </head> <body> <div id="chartContainer" style="width:800px; height:300px;">FusionCharts will load here!</div> <script type="text/javascript"><!-- var myChart = new FusionCharts( "FusionCharts/Pie3D.swf", "myChartId", "80%", "100%", "0", "1" ); myChart.setJSONData( { "chart": { "caption" : "Weekly Sales Summary" , "xAxisName" : "Week", "yAxisName" : "Sales", "numberPrefix" : "{:content:}quot; }, "data" : [ { "label" : "Week 1", "value" : "14400" }, { "label" : "Week 2", "value" : "19600" }, { "label" : "Week 3", "value" : "24000" }, { "label" : "Week 4", "value" : "15700" } ] } ); myChart.render("chartContainer"); // --> </script> </body> </html> Thank you. Share this post Link to post Share on other sites
Guest Angshu Report post Posted January 23, 2012 Hi, Welcome to FusionCharts Forum! Could you please confirm whether you are running the files from local file system or server? Starting FusionCharts v3.2, FusionCharts can also build charts using JSON (JavaScript Object Notation) data format. There is no feature limitation in the evaluation version of FusionCharts, except for the fact that the evaluation version charts are watermarked. Many web servers like IIS6, does not serve .json (no wildcard MIME type) files by default. You would need to setup your web server to server json files. In IIS6 you can do this using these steps: 1. Open the properties for the server in IIS Manager and click MIME Types Click "New". 2. Enter "JSON" for the extension and "application/json" for the MIME type. Hope this helps. Share this post Link to post Share on other sites
cvh Report post Posted January 23, 2012 Thank you for your reply, Angshu. I'm running the files from the local file system. I'm developing on Eclipse on Ubuntu, not using IIS. Share this post Link to post Share on other sites
Guest Angshu Report post Posted January 23, 2012 Hi, Thanks for your response. When you set percent size to a chart, it tries to get the width/height of its parent container. It seems that the container where you are rendering the chart is not set with a proper height when the chart is rendered into it. For example, if you have a container <div id="chartContainer"> and this DIV is not set with an absolute or relative height, the DIV's height will be zero. When a chart is rendered in this DIV with 100% height, the chart would try to derive the height of the parent DIV which is zero. The chart would render zero pixel as height. Please try once setting absolute height to the chart or the container element and check. An example is given below: <div id="chartContainer" style="width:100%; height:800px;">FusionCharts will load here!</div> <script type="text/javascript"> var chart = new FusionCharts("Column2D.swf", "ChartId", "100%", "100%", "0", "1"); chart.setJSONUrl("Data.json"); chart.render("chartdiv"); </script> Hope this helps. Share this post Link to post Share on other sites
cvh Report post Posted January 23, 2012 I don't think the DIV height is the issue here - in the code listings I pasted above you can see that this is explicitly set to 300px. Can you please try my examples and reproduce the same results I get? (By the way, I think there's a typo in your example - the argument to chart.render() should be chartContainer, not chartdiv?) Thank you. Share this post Link to post Share on other sites
Guest Angshu Report post Posted January 24, 2012 Hi, Thanks for your response. Could you please check once whether the files names which you are referring in the code using proper cases.? Please note that, in Windows file names are not case-sensitive. But, in mac or Linux, file names are case-sensitive. Hence, if the actual file name is Column3D.swf, you cannot use column3d.swf in your code. Although, this would work in Windows, but would fail in mac or Linux. Looking forward to your valuable feedback. Share this post Link to post Share on other sites
