Sign in to follow this  
zugzwang

Rendering Javascripts Only

Recommended Posts

Hello All,

About a year ago we built a web page with 5 fusion charts. It has worked well continuously since it was built. Recently we discovered that the charts will not render on I Pads. We found information about this on the knowledge base: http://kb.fusioncharts.com/questions/392/How+do+I+render+charts+using+JavaScript+%28without+Flash%29+%26+in+iPhone%7B47%7DiPod%7B47%7DiPad%3F

The help page says for fusion charts to render on Apple equipment javascript must be used - not flash. It also says to always use javascript insert the following line into our code:

FusionCharts.setCurrentRenderer('javascript');

 

We tried this but the charts still don't appear. There is a message for each chart that says: "Loading chart, Please wait", however the charts never load.

 

It occurred to us the problem might be that we are not using Fusioncharts XT - is there something I can examine to tell me if we are using Fusioncharts XT? Or perhaps I missed something on the help page or

is another error I am making that someone sees?

 

Thanks in advance for any help.

Larry Blankenship

Hollins Universithy

Share this post


Link to post
Share on other sites
Guest Sumedh

Hi Larry,

 

A warm welcome to FusionCharts Forum! smile.gif

 

What FusionCharts version are you using? If you are using prior to FusionCharts XT version, then JavaScript charts will not work.

 

JavaScript charts are introduced from the FusionCharts XT version, you can render the charts on devices where Flash player is not supported (like in iPhone or iPad), is not installed or is disabled using the built-in JavaScript rendering capabilities.

 

For rendering JavaScript charts, you would need to use FusionCharts XT version.

 

Also, you would need to include following JavaScript libraries into your project folder:

> FusionCharts.js

> FusionCharts.HC.js

> FusionCharts.HC.Charts.js

> jquery.min.js

 

For more information, please refer the following links:

http://docs.fusioncharts.com/charts/contents/?FirstChart/UsingPureJS.html

 

http://docs.fusioncharts.com/charts/contents/?Introduction/JSChartingCapabilities.html

 

Hope this helps!

Share this post


Link to post
Share on other sites

Hello Sumedh,

Thanks for replying B)

 

I have read the links you provided, and it is clear to me that we may not be on the proper version. It is true that we have the 4 files you mention in the projects folder:

> FusionCharts.js

> FusionCharts.HC.js

> FusionCharts.HC.Charts.js

> jquery.min.js

 

However located on the C:\ of the server is a folder FusionCharts that contains a file called Version.txt. Inside it says:

Current Version: FusionCharts v3.2.1 (Released on 6th October 2010)

 

So I have a stalemate - I am not sure if I am version XT or version 3.2.1.

 

Do you know of something else I may look at to break the tie?

Thanks again,

Larry.

Share this post


Link to post
Share on other sites

I am including the project folder as requested the problem file isUadm-Dashboard-Mockup.aspx - the line in question is line 66. Please note that UAdm-Dashboard-KPI.aspx is the same as Uadm-Dashboard-Mockup.aspx except the Mockup is the test version and has the additional line.

 

I tried to upload the file but I get an error message saying I am not allowed to upload this kind of file (it is an .aspx) file so I am posting the raw code below: If you need more please let me know and we can make arrangements...

Larry.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1"><title>

Undergrad Admissions KPI Data

</title>

<script type="text/javascript" src="FusionCharts.js">

</script>

<style type="text/css">

#chartContainer

{

height: 250px;

margin-top: 0px;

}

.style1

{

height: 50px;

}

#chartContainer2

{

height: 250px;

}

#chartContainer3

{

height: 250px;

}

#chartContainer4

{

height: 250px;

}

.style6

{

height: 30px;

text-align: left;

}

.auto-style1 {

height: 50px;

text-align: center;

}

.auto-style2 {

height: 30px;

text-align: center;

}

.auto-style3 {

font-family: Arial, Helvetica, sans-serif;

}

.auto-style5 {

text-align: left;

font-family: Arial, Helvetica, sans-serif;

}

</style>

</head>

<body>

 

<!-- Live data goes here -->

<table style="width: 86%; height: 600px; margin-bottom: 0px;">

<tr>

 

<!-- <td class="auto-style1" colspan="2" style="height: 78px">chart -->

<!-- here</td> -->

<td class="auto-style1" colspan="2" style="height: 52px"><div id="chartContainer0"><br />

FusionWidgets will load here!<br />

</div>

 

<script type="text/javascript">('javascript');<!--

FusionCharts.setCurrentRenderer('javascript');

var myChart = new FusionCharts("Charts/HLinearGauge.swf", "myChartId", "500", "100", "0", "1");

myChart.setXMLUrl("data/BLOSSOM/LiveEnroll.xml");

myChart.render("chartContainer0");

FusionCharts.setCurrentRenderer;

// -->

</script></td>

 

</tr>

 

<tr>

 

<!-- <td class="auto-style1" colspan="2">text here</td> -->

 

<td class="auto-style2" colspan="2">

<strong><span class="auto-style3">Enrollment Count Hollins 2013 (live data)</span><br class="auto-style3" />

</strong>

</td>

 

</tr>

 

 

 

<tr>

 

<!-- Chart for cell 1,1 -->

<td class="style1" style="width: 717px"><div id="chartContainer"><br />

FusionWidgets will load here!<br />

</div>

<script type="text/javascript"><!--

var myChart = new FusionCharts("Charts/AngularGauge.swf", "myChartId", "600", "250", "0", "1");

myChart.setXMLUrl("data/BLOSSOM/Data.xml");

myChart.render("chartContainer");

// -->

</script></td>

 

 

<!-- Chart for cell 1,2 -->

<td class="style1"><div id="chartContainer2"><br />

FusionWidgets will load here!<br />

</div>

<script type="text/javascript"><!--

var myFunnelChart = new FusionCharts("Charts/Column2D.swf", "myChartId", "500", "250", "0", "1");

myFunnelChart.setXMLUrl("data/BLOSSOM/Recruiter.xml");

myFunnelChart.render("chartContainer2");

// -->

</script></td>

</tr>

 

 

 

<tr>

<!-- Cell 2,1 a title for the chart in cell 1,1-->

<td class="style6" style="width: 717px">

<strong><span class="auto-style3">                     

Number of Freshmen Applications to Hollins 2013<br />

</span><br class="auto-style3" />

</strong>

</td>

 

 

<!-- Cell 2,2 a title for the chart in cell 1,2-->

<td class="auto-style5" style="height: 30px" valign="top">

<strong>                          YTD 

Count of Deposits by Counselor Initials</strong></td>

</tr>

 

 

<tr>

<!-- Chart for cell 3,1 -->

<td class="style1" style="width: 717px"><div id="chartContainer3"><br />

FusionWidgets will load here!<br />

</div>

<script type="text/javascript"><!--

var myChart = new FusionCharts("Charts/AngularGauge.swf", "myChartId", "600", "250", "0", "1");

myChart.setXMLUrl("data/BLOSSOM/Completed.xml");

myChart.render("chartContainer3");

// -->

</script></td>

 

 

<!-- Chart for cell 3,2 -->

<td class="style1"><div id="chartContainer4"><br />

FusionWidgets will load here!<br />

</div>

<script type="text/javascript"><!--

var my2DColChart = new FusionCharts("Charts/Column2D.swf", "myChartId", "500", "250", "0", "1");

my2DColChart.setXMLUrl("data/BLOSSOM/EnrollHist.xml");

my2DColChart.render("chartContainer4");

// -->

</script></td>

 

</tr>

 

 

<tr>

<!-- Cell 4,1 a title for the chart in cell 3,1-->

<td class="style6" style="width: 717px">

<strong><span class="auto-style3">                                            

Completed Apps 2013</span><br class="auto-style3" />

</strong>

</td>

 

 

<!-- Cell 4,2 a title for the chart in cell 3,2-->

<td class="auto-style5" style="height: 30px" valign="top">

<strong>                                                 

7-Year Enrollment History

</strong>

</td>

</tr>

 

</table>

</body>

</html>

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
Sign in to follow this