backpacker299

Xml Attributes Between Flash And Javascript

Recommended Posts

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.

post-4935-060049700 1287661586_thumb.png

post-4935-046612200 1287661596_thumb.png

Share this post


Link to post
Share on other sites

<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 by backpacker299

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 "";
				}
			}
		}
	}
});
}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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");

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by backpacker299

Share this post


Link to post
Share on other sites

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");

Share this post


Link to post
Share on other sites

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?

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