A Question About Javascript Renderer Use

[phido]

I recently upgraded from 3.x to v3.2. But, I'm having difficulty displaying my charts using the Javascript renderer. E.g. vertical grid doesn't display, grid dashes don't appear, x-axis labels don't follow labelStep, etc. I've attached two examples. flash.png is produced w/ flash, and is the result I am seeking. js_render.png is produced using the javascript renderer. Here are the specifications in the chart's XML file.

 

<chart
animation='1' showlabels='1' labelDisplay='None' labelStep='21' showValues='0' yAxisMinValue='136' yAxisMaxValue='220'
caption=''
bgColor='ffffff' bgAlpha='100'
canvasBorderColor='333333' canvasBorderThickness='1' canvasBorderAlpha='100' showborder='0'
lineColor='333333' lineThickness='1' lineAlpha='100'
drawAnchors='1' anchorRadius='2' anchorBorderColor='333333' anchorBorderThickness='1' anchorBgColor='ffffff'
divLineColor='333333' divLineIsDashed='1' divLineAlpha='100'  alternateHGridColor='ffffff' alternateHGridAlpha='35' numVDivLines='11' vDivLineColor='333333' vDivLineThickness='1' vDivLineAlpha='100' vDivLineIsDashed='1' showAlternateVGridColor='0'
numberSuffix=''
baseFont='Arial' baseFontColor='000000' outCnvBaseFontSize='11'
canvasPadding='3' chartRightMargin='35' 
>

 

Why the big difference in the way charts are rendered using javascript renderer? Thanks in advance for your help. Regards.

Edited October 13, 2010 by phido

[DannyR]

The short answer is because there are two completely different rendering engines depending on whether the chart is flash or HTML5. They are working on translating all the formatting of one type to the other, but it is definitely what I'd call a "work in progress".

 

The good news is that most (if not all) of the imperfections can be rectified by using an override method exposed in the JS API. If you can attach your data source I can try and take a quick look at this one to see about correcting the x-axis labels. The two different graphs are NEVER going to be exactly alike - nor should anyone expect them to be. There is a massive canyon between Flash and SVG.

[phido]

The short answer is because there are two completely different rendering engines depending on whether the chart is flash or HTML5. They are working on translating all the formatting of one type to the other, but it is definitely what I'd call a "work in progress".

 

The good news is that most (if not all) of the imperfections can be rectified by using an override method exposed in the JS API. If you can attach your data source I can try and take a quick look at this one to see about correcting the x-axis labels. The two different graphs are NEVER going to be exactly alike - nor should anyone expect them to be. There is a massive canyon between Flash and SVG.

 

Thanks for the fast reply. I'm curious ... Does the override you discussed require separate presentations (two web pages) to show a chart, one for javascript and one for flash? Or, does it function as intended; i.e., one web page that dynamically adapts to user_agent?

 

FC is a great product, but I'm somewhat surprised at the script's status given FC's presentation and installation instructions.

Edited October 14, 2010 by phido

[DannyR]

To be fair, the HTML5 fallback does seem a little rushed, but I can understand their desire to get that functionality into their users' hands as quickly as possible. Yes, it does not have near the level of polish we've come to appreciate at the Flash end of the product, but it most cases so far I've found it to be more than satisfactory.

 

Being a hardcore UI guy, I'm doing everything in Javascript (I don't use XML at all). I've written a class that instantiates the chart object, and then sub-classed it to create the different type of graphs I want. That way, as these guys continue to bugfix their fallback implementation, I can just change everything in one place without having to actually rewrite any of my graphs.

 

So a typical implementation for me would look something like this:

 

<div id="myChart"></div>
<script language="JavaScript">				
var jsonData = {
chart: {
	yaxisminvalue: "0",
	yaxismaxvalue: "100",
	numDivLines: "3"
},
data:[{
	value: "30"
}]
};

FusionCharts.setCurrentRenderer("javascript");

var chart = new FusionCharts("../../js/FusionCharts/Column3D.swf", "myChart-chartId", 300, 200);

chart.setJSONData(jsonData);

if (!!chart._overrideJSChartConfiguration) {
chart._overrideJSChartConfiguration({
	yAxis: [{
		tickInterval: 25
	}]
});
}

chart.render("myChart");
</script>

 

So, the chart is constructed as normal, but in this particular case, I've used _overrideJSChartConfiguration() to fix a defect where the fallback is not respecting the numDivLines property of the chart object. So when this gets fixed in a later release, I can just delete the override (or leave it there for that matter). All this can be done in one "page" as you say.

 

Hope that answers your question.

[phido]

To be fair, the HTML5 fallback does seem a little rushed, but I can understand their desire to get that functionality into their users' hands as quickly as possible. Yes, it does not have near the level of polish we've come to appreciate at the Flash end of the product, but it most cases so far I've found it to be more than satisfactory.

 

Being a hardcore UI guy, I'm doing everything in Javascript (I don't use XML at all). I've written a class that instantiates the chart object, and then sub-classed it to create the different type of graphs I want. That way, as these guys continue to bugfix their fallback implementation, I can just change everything in one place without having to actually rewrite any of my graphs.

 

So a typical implementation for me would look something like this:

 

<div id="myChart"></div>
<script language="JavaScript">				
var jsonData = {
chart: {
	yaxisminvalue: "0",
	yaxismaxvalue: "100",
	numDivLines: "3"
},
data:[{
	value: "30"
}]
};

FusionCharts.setCurrentRenderer("javascript");

var chart = new FusionCharts("../../js/FusionCharts/Column3D.swf", "myChart-chartId", 300, 200);

chart.setJSONData(jsonData);

if (!!chart._overrideJSChartConfiguration) {
chart._overrideJSChartConfiguration({
	yAxis: [{
		tickInterval: 25
	}]
});
}

chart.render("myChart");
</script>

 

So, the chart is constructed as normal, but in this particular case, I've used _overrideJSChartConfiguration() to fix a defect where the fallback is not respecting the numDivLines property of the chart object. So when this gets fixed in a later release, I can just delete the override (or leave it there for that matter). All this can be done in one "page" as you say.

 

Hope that answers your question.

 

 

Thank you for the reply.

[DannyR]

Np! =]