Xml Attributes Between Flash And Javascript

[backpacker299]

I apologize if this has been answered elsewhere, I did search and couldn't find anything. I have recently upgraded to the current version of FusionCharts that has HighCharts included. I want to use the Flash charts when available and fall back to Javascript otherwise. I have this working fine. The problem is that there are a few significant issues with the JS version. I have attached a couple of images to show the difference, but basically the x-axis data labels are missing (and replaced with tick marks), the chart key is a lot further down from the chart, and my vLines don't have labels. I suspect the vLines can't be fixed, and that's fine, but I need to fix the other two. I supply the charts with the same XML data.

 

I appreciate any help or directing to a different thread.

[DannyR]

Good morning. Please post your code here and I will help you out.

[backpacker299]

I assume you are looking for the XML that feeds the charts. It is rather long, so I will just link you to it's source generator:

 

http://solar.ypsi.com/data/getChartData.php?siteIdName=foodcoop&chartType=DAILY&xmlOut=1

[DannyR]

Great, and your HTML/JS code?

[backpacker299]

<script type='text/javascript'>
   <?php
       echo "var siteIdName='$siteIdName';";
   ?>
   var dailyChart = '';
   var dayTimeout = '';

   FusionCharts._fallbackJSChartWhenNoFlash ();

   function updateChart (prefix, chartType) {
       var addr = prefix + '/data/getChartData.php?siteIdName=' + siteIdName + '&chartType=' + chartType;
       dailyChart.setXMLUrl (addr);
   }
</script>

 

<div style="height: 400px; width: 675px;">
   <div id="dailyChart" align="center" style="position: absolute; z-index: 5;">The daily chart will appear within this DIV. This text will be replaced by the chart.</div>
   <script type="text/javascript">
       dailyChart = new FusionCharts("FusionCharts/Charts/MSLine.swf", "swfDailyChart", "675", "400");
       dailyChart.setDataURL (escape("data/getChartData.php?siteIdName=<?php echo $siteIdName; ?>&chartType=DAILY&xmlOut=1"));
       dailyChart.render ("dailyChart");
       dayTimeout = setTimeout ("updateChart('.', 'DAILY')", 300000);  // Have the chart updated in 5 minutes
   </script>
</div>

Edited October 21, 2010 by backpacker299

[DannyR]

Taking a look at it now Nik, will get back to you shortly.

[backpacker299]

I appreciate you taking the time to help me.

 

Thanks

[Ayan Pal]

Hi,

Please use label insted of name in the category as name is depricated atribute, js fallback dosen't supported it.

[DannyR]

That's only part of the problem, Ayan.

[backpacker299]

I noticed 'showLabel' as a category tag attribute in the documentation, so I tried it and it did not work. I fixed it so that I use 'showLabel' instead of 'showName' now just so that I am not using deprecated attributes, but my JS rendered chart is still the same.

[DannyR]

Here's the other part of the problem that we've seen before... too many labels on the X Axis.

 

Nik, try adding this code before you call render():

 

if (!!dailyChart._overrideJSChartConfiguration) {
dailyChart._overrideJSChartConfiguration({
	xAxis: {
		labels: {
			formatter: function() {
				if (this.index % 36 == 0) {
					return this.value;
				} else {
					return "";
				}
			}
		}
	}
});
}

[DannyR]

Also, use:

 

<category label="Midnight"/>

 

in place of:

 

<category name="Midnight"/>

[backpacker299]

I changed the category tag, thanks for pointing that out. I have seen this override JS method mentioned in other posts and I copied the code you gave me. I put it between creating the chart/setting the data URL and the call to render the chart. Stepping through the code with Firebug show that the IF statement is always false and the code to fix stuff is never called. I removed the IF and let the browser always call the method and then my chart doesn't appear anymore. I did remove the extra '!' in the conditional, just in case that's what you thought the problem was.

[DannyR]

Make sure you're labeling your categories like so:

 

<category label="Midnight" showName="1"/><!-- show cat -->
<category label="0:5"/><!-- hide cat -->

 

And here's the JS. It's working fine for me. (I think your problem is in the XML anyway):

 

if (!!dailyChart._overrideJSChartConfiguration) {
dailyChart._overrideJSChartConfiguration({
	xAxis: {
		labels: {
			formatter: function() {
				if (this.index % 36 == 0) {
					return this.value;
				} else {
					return "";
				}
			}
		}
	}
});
}


dailyChart.render("dailyChart");

[DannyR]

Also, note that the !! is absolutely necessary. It checks to see if that method exists on the chart (which it only would when it falls back to JS). If you changed it to !, you just negated its meaning (and probably threw a JS error which is why the chart disappeared).

[backpacker299]

I have never seen '!!' before, so I put that back and it is entering the IF block (which I determined with an alert statement); however, the labels are not appearing. I also went in an modified my XML stream so that I only have the 'showLabel' attribute for labels I want to show and I made the labels that I do not want to show empty (<category label='' />). None of this has corrected the label problem; though the chart key is not so far down anymore.

[DannyR]

You need label and showName (not showLabel). Don't ask me why...

[backpacker299]

Here is my rendering JS now:

 

dailyChart = new FusionCharts("FusionCharts/Charts/MSLine.swf", "swfDailyChart", "675", "400");
dailyChart.setDataURL (escape("data/getChartData.php?siteIdName=<?php echo $siteIdName; ?>&chartType=DAILY&xmlOut=1"));
if (!!dailyChart._overrideJSChartConfiguration) {
dailyChart._overrideJSChartConfiguration({
	xAxis: {
		labels: {
			formatter: function() {
				if (this.index % 36 == 0) {
					return this.value;
				} 
				else {
					return "";
				}
			}
		}
	}
});
}
dailyChart.render ("dailyChart");
dayTimeout = setTimeout ("updateChart('.', 'DAILY')", 300000);  // Have the chart updated in 5 minutes

 

Now, I am also thinking that the formatter function is no longer necessary (at least for the label values) because I made the labels empty in the XML if I don't display them. Is this correct?

[backpacker299]

I fixed the category tag attributes with no effect on the output of either the Flash nor the JS rendered chart.

[backpacker299]

One more piece of the puzzle: The JS function that you gave me is the cause of the chart key being close to the chart. If it is gone, the chart key goes further down the page.

 

Also, the tick marks that show up are trying to split up the labels, no? I noticed that there is actually a little bigger gap between them in the places where I want labels to show. Maybe I just need to hide the tick marks? If so, I don't know now to do that.

Edited October 21, 2010 by backpacker299

[DannyR]

Ok, I uploaded my testing harness. Can you take screenshots of both versions of what you see here:

 

http://www.dannyscot.com/danny/fusion/msline_test2.html

[backpacker299]

I only see one chart, screenshot attached.

[DannyR]

Sorry, thought you had a second browser set up with no flash. I just uploaded a second file, same things, but with the renderer set to "javascript". Please take a ss of this one:

 

http://www.dannyscot.com/danny/fusion/msline_test2_noflash.html

[backpacker299]

Attached.

[DannyR]

Ok, that's exactly what I'm seeing. Is that not what you wanted?

[backpacker299]

Haha, I'm sorry, I really wasn't paying attention. Yes, that's what I want. I looked at the page source and modified my rendering code to the below, but my production chart is not changed. Production Environment

 

dailyChart = new FusionCharts("FusionCharts/Charts/MSLine.swf", "swfDailyChart", "675", "400");
dailyChart.setDataURL (escape("data/getChartData.php?siteIdName=<?php echo $siteIdName; ?>&chartType=DAILY&xmlOut=1"));
if (!!dailyChart._overrideJSChartConfiguration) {
dailyChart._overrideJSChartConfiguration({
		xAxis: {
			thickWidth: 0,
			labels: {
			rotation: 0,
			x: 20,
			formatter: function() {
				if (this.index % 36 == 0) {
					return this.value;
				} 
				else {
					return "";
				}
			}
		}
	}
});
}
dailyChart.render ("dailyChart");

[DannyR]

Not sure what I'm meant to be looking at. I see a map.

 

I'd suggest diffing our xml files to see where the problem might be. If that doesn't work, diff the html. Since we now know my example is what you want, I think its on you now to find out how your code is different than mine. I'll leave it up there for as long as you need it. Fair enough?

[backpacker299]

Yeah, absolutely fair enough. I very much appreciate your help. Sorry my link was wrong.

[DannyR]

No problem. Let me know how you make out.

[backpacker299]

Just found it. I had changed 'showNames' to 'showLabels' in the chart tag. Putting that back to 'showNames' got it working. I really appreciate your help.

 

Thank you