Hi,
I am trying to use the HTML jQuery/highcharts library as a fallback to Flash and am encountering some errors.
Specifically, Firebug is telling me that "jQuery is not defined."
I have checked, and the reference in the FusionCharts.js file is fine (I referenced the new location, as we have a unique server setup here). It is also referencing the highcharts.js file fine, because both show up as functions in the firebug console.
Here is the HTML div code I am using:
<script type="text/javascript">
FusionCharts.setCurrentRenderer('javascript');
<!--
document.write('<h2 class="alt">Overview: Temperature (°<?echo $unitdisplay;?>)<span><a href="/statistics/temperature/<?echo $codeslbl;?>">More stats »</a></span></h2>');
document.write('<div id="chart_temp" class="wrap_flashgraph_temp"> </div>');
var tempChart = new FusionCharts("/common/flash/fusioncharts/MSLine.swf", "chart_temperature", "329", "250", "0", "0");
tempChart.setXMLData("<chart yAxisMinValue='-40' yAxisMaxValue='40' numDivLines='3' adjustDiv='0' forceDecimals='0' formatNumberScale='0' decimals='0' bgColor='FFFFFF' canvasBgColor='FFFFFF' canvasBgAlpha='0' showBorder='0' showValues='0' showLimits='1' setAdaptiveYMin='1' chartLeftMargin='5' chartRightMargin='5' paletteColors='c70000,0372AB' labelDisplay='Rotate' labelStep='1' numVDivLines='10' vDivLineIsDashed='1' vDivLineDashLen='1' vDivLineDashGap='2' baseFont='Arial' baseFontSize ='11' baseFontColor ='003876' legendBorderColor='ffffff' legendShadow='0'>" +
"<categories><category label='Jan' /><category label='Feb' /><category label='Mar' /><category label='Apr' /><category label='May' /><category label='Jun' /><category label='Jul' /><category label='Aug' /><category label='Sep' /><category label='Oct' /><category label='Nov' /><category label='Dec' /></categories>" +
"<dataset seriesName='<?echo $graphseriesName1;?>'><?echo $graphseriesValue1;?>'</dataset>" +
"<dataset seriesName='<?echo $graphseriesName2;?>'><?echo $graphseriesValue2;?>'</dataset>" +
"<styles><definition><style name='globalFont' type='font' font='Arial' size='11' color='003876' margin='5' /></definition><application><apply toObject='DataLabels' styles='globalFont' /><apply toObject='XAxisName' styles='globalFont'/></application></styles>" +
"</chart>");
tempChart.setTransparent(true);
tempChart.render("chart_temp");
//-->
</script>
Obviously, the "FusionCharts.setCurrentRenderer('javascript');" is in there to force it into JS. Without that, all of the Flash renders fine. This code is in place in several spots, obviously with some adjustments based on the chart we are using.
The ultimate goal is to be able to display these on the iPad/iPhone, but I can't even get them to render in my browser. To verify, I also tried the page on an actual iPad device, but to no avail.
I welcome any help or suggestions and let me know if you want any other code posted.
