Infomatrixx

No Data To Display When Using Json After Hiding Div

Recommended Posts

Hello Team,

 

I am trying my first steps with FusionCharts and I am struggeling with the first issue.

 

I created a simple website with jquery mobile. This site has a DIV container which is collapsible and in it there is fusion chart (Pie Chart) using JSON data.

 

						<div data-role="collapsible-set" style="width:90%; margin:0 auto;">

							<div data-role="collapsible" data-collapsed="true">
							<h3>Frage 1</h3>
							<p>

								<div id="question-1" style="text-align:center;"></div>      	
								<script type="text/javascript"><!-- 		
							  	if  ( FusionCharts( "chart-1" ) )  {
							  		FusionCharts( "chart-1" ).dispose();
							  	}
						  		var myChart = new FusionCharts( "libs/js/fusion-charts/Column3D.swf", 
						  		"chart-1", "400", "300", "1", "1" );
						  		myChart.setJSONUrl("Data.json");
						  		myChart.render("question-1");
								// --> 	
								</script>  

							</p>
							</div>

							<div data-role="collapsible">
							<h3>Frage 2</h3>
							<p>Chart Einbindung</p>
							</div>

						</div>

				</div>

 

After the first load of the page everything is fine. When I collapse the container (visibility:hidden) and make it visibile again, the Chart shows "No data to display".

 

Here is the debug output:

 

Before collapsing and uncollapsing

 

Info: Chart loaded and initialized.
Initial Width: 400
Initial Height: 300
Scale Mode: noScale
Debug Mode: Yes
Application Message Language: EN
Version: 3.2.2(XT)
Chart Type: Single Series 3D Column Chart
Chart Objects: 
BACKGROUND
CANVAS
CAPTION
SUBCAPTION
YAXISNAME
XAXISNAME
DIVLINES
YAXISVALUES
DATALABELS
DATAVALUES
TRENDLINES
TRENDVALUES
DATAPLOT
TOOLTIP
VLINES
VLINELABELS

INFO: Chart registered with external script. DOM Id of chart is chart-1
INFO: XML Data provided using dataURL method.
dataURL provided: Data.json
dataURL invoked: Data.json?FCTime=190
INFO: setDataXML method invoked from external script.
INFO: XML Data provided using dataXML method.
XML Data: <chart caption="Wie ist die Stimmung?" xaxisname="Week" yaxisname="Sales" numberprefix="{:content:}quot; bgcolor="#eceded"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>

 

After collapsing and uncollapsing

 

Info: Chart loaded and initialized.
Initial Width: 400
Initial Height: 300
Scale Mode: noScale
Debug Mode: Yes
Application Message Language: EN
Version: 3.2.2(XT)
Chart Type: Single Series 3D Column Chart
Chart Objects: 
BACKGROUND
CANVAS
CAPTION
SUBCAPTION
YAXISNAME
XAXISNAME
DIVLINES
YAXISVALUES
DATALABELS
DATAVALUES
TRENDLINES
TRENDVALUES
DATAPLOT
TOOLTIP
VLINES
VLINELABELS

INFO: Chart registered with external script. DOM Id of chart is chart-1
INFO: XML Data provided using dataURL method.
dataURL provided: Data.json
dataURL invoked: Data.json?FCTime=140
XML Data: { 
"chart": { 
     	"caption" : "Wie ist die Stimmung?" ,
     	"xAxisName" : "Week",
     	"yAxisName" : "Sales",
     	"numberPrefix" : "{:content:}quot;,
     	"bgColor" : "#eceded"
},

"data" : 
	[
     	{ "label" : "Week 1", "value" : "14400" },
     	{ "label" : "Week 2", "value" : "19600" },
     	{ "label" : "Week 3", "value" : "24000" },
     	{ "label" : "Week 4", "value" : "15700" }
	]
}
No Data to Display: No data was found in the XML data document provided. Possible cases can be: 
There isn't any data generated by your system. If your system generates data based on parameters passed to it using dataURL, please make sure dataURL is URL Encoded.
You might be using a Single Series Chart .swf file instead of Multi-series .swf file and providing multi-series data or vice-versa.

 

Any ideas how to solve it?

 

best regards,

 

Fabian

Share this post


Link to post
Share on other sites
Guest Sumedh

Hello Team,

 

I am trying my first steps with FusionCharts and I am struggeling with the first issue.

 

I created a simple website with jquery mobile. This site has a DIV container which is collapsible and in it there is fusion chart (Pie Chart) using JSON data.

 

						<div data-role="collapsible-set" style="width:90%; margin:0 auto;">

							<div data-role="collapsible" data-collapsed="true">
							<h3>Frage 1</h3>
							<p>

								<div id="question-1" style="text-align:center;"></div>      	
								<script type="text/javascript"><!-- 		
						  		if  ( FusionCharts( "chart-1" ) )  {
						  			FusionCharts( "chart-1" ).dispose();
						  		}
					  			var myChart = new FusionCharts( "libs/js/fusion-charts/Column3D.swf", 
					  			"chart-1", "400", "300", "1", "1" );
					  			myChart.setJSONUrl("Data.json");
					  			myChart.render("question-1");
								// --> 	
								</script>  

							</p>
							</div>

							<div data-role="collapsible">
							<h3>Frage 2</h3>
							<p>Chart Einbindung</p>
							</div>

						</div>

				</div>

 

After the first load of the page everything is fine. When I collapse the container (visibility:hidden) and make it visibile again, the Chart shows "No data to display".

 

Here is the debug output:

 

Before collapsing and uncollapsing

 

Info: Chart loaded and initialized.
Initial Width: 400
Initial Height: 300
Scale Mode: noScale
Debug Mode: Yes
Application Message Language: EN
Version: 3.2.2(XT)
Chart Type: Single Series 3D Column Chart
Chart Objects: 
BACKGROUND
CANVAS
CAPTION
SUBCAPTION
YAXISNAME
XAXISNAME
DIVLINES
YAXISVALUES
DATALABELS
DATAVALUES
TRENDLINES
TRENDVALUES
DATAPLOT
TOOLTIP
VLINES
VLINELABELS

INFO: Chart registered with external script. DOM Id of chart is chart-1
INFO: XML Data provided using dataURL method.
dataURL provided: Data.json
dataURL invoked: Data.json?FCTime=190
INFO: setDataXML method invoked from external script.
INFO: XML Data provided using dataXML method.
XML Data: <chart caption="Wie ist die Stimmung?" xaxisname="Week" yaxisname="Sales" numberprefix="{:content:}quot; bgcolor="#eceded"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>

 

After collapsing and uncollapsing

 

Info: Chart loaded and initialized.
Initial Width: 400
Initial Height: 300
Scale Mode: noScale
Debug Mode: Yes
Application Message Language: EN
Version: 3.2.2(XT)
Chart Type: Single Series 3D Column Chart
Chart Objects: 
BACKGROUND
CANVAS
CAPTION
SUBCAPTION
YAXISNAME
XAXISNAME
DIVLINES
YAXISVALUES
DATALABELS
DATAVALUES
TRENDLINES
TRENDVALUES
DATAPLOT
TOOLTIP
VLINES
VLINELABELS

INFO: Chart registered with external script. DOM Id of chart is chart-1
INFO: XML Data provided using dataURL method.
dataURL provided: Data.json
dataURL invoked: Data.json?FCTime=140
XML Data: { 
"chart": { 
     	"caption" : "Wie ist die Stimmung?" ,
     	"xAxisName" : "Week",
     	"yAxisName" : "Sales",
     	"numberPrefix" : "{:content:}quot;,
     	"bgColor" : "#eceded"
},

"data" : 
	[
     	{ "label" : "Week 1", "value" : "14400" },
     	{ "label" : "Week 2", "value" : "19600" },
     	{ "label" : "Week 3", "value" : "24000" },
     	{ "label" : "Week 4", "value" : "15700" }
	]
}
No Data to Display: No data was found in the XML data document provided. Possible cases can be: 
There isn't any data generated by your system. If your system generates data based on parameters passed to it using dataURL, please make sure dataURL is URL Encoded.
You might be using a Single Series Chart .swf file instead of Multi-series .swf file and providing multi-series data or vice-versa.

 

Any ideas how to solve it?

 

best regards,

 

Fabian

 

 

 

Hi,

 

Could you please check the browser's console log?

 

Whenever you click on the control (ex. div, chartdiv etc.) for collapsible element, check the browser's console log, if the chart id has been generated or not?

 

Also, check if the chart id has been disposed or not after the completion of collapsible event.

 

Once again repeat the same procedure and let us know.

 

Please send these details as it would be helpful to look into it.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now