Sign in to follow this  

Adding Fusionwidget From Code Behind

Recommended Posts


I'm using the latest version of Fusionwidgets and I'm having difficulty with the following task: I'm using and I want to create a dynamic fusionwidget guage from code behind in page.


Here is what I have in the aspx page:


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="testGuage.aspx.vb" Inherits="liveChartsDemo_testGuage" %>
<html xmlns="[url=""][/url]">
<head id="Head1" runat="server">
   <script type="text/javascript" src="../FusionWidgets/FusionCharts.js"></script>
   <form id="form1" runat="server">
   <asp:Literal ID="FCLiteral" runat="server"></asp:Literal>


So I'm using a literal control that I will later fill in from the code behind page. which has the following code:


Imports InfosoftGlobal
Partial Class liveChartsDemo_testGuage
   Inherits System.Web.UI.Page
   Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
       Dim strxml As String
       strxml = ""
       strxml = strxml & "<chart lowerLimit='0' "
       strxml = strxml & "upperLimit='100' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='%' tickValueDistance='20' showValue='1' decimals='0'>"
       strxml = strxml & "<colorRange>"
       strxml = strxml & "<color minValue='0' maxValue='75' code='FF654F'/>"
       strxml = strxml & "<color minValue='75' maxValue='90' code='F6BD0F'/>"
       strxml = strxml & "<color minValue='90' maxValue='100' code='8BBA00'/>"
       strxml = strxml & "</colorRange>"
       strxml = strxml & "<dials>"
       strxml = strxml & "<dial id='CPU1' value='92' rearExtension='10' toolText='CPU 1 Usage'/>"
       strxml = strxml & "</dials>"
       strxml = strxml & "<styles>"
       strxml = strxml & "<definition>"
       strxml = strxml & "<style type='font' name='myValueFont' bgColor='F1f1f1' borderColor='999999' />"
       strxml = strxml & "</definition>"
       strxml = strxml & "<application>"
       strxml = strxml & "<apply toObject='Value' styles='myValueFont' />"
       strxml = strxml & "</application>"
       strxml = strxml & "</styles>"
       strxml = strxml & "</chart>"

       FCLiteral.Text = FusionCharts.RenderChart("../FusionWidgets/AngularGauge.swf", "", strxml, "MyMainChart", "600", "350", False, False)
   End Sub
End Class


Now all what I get when I browse to the page is the div tag content "Chart."


I have no idea why this is happening, the content that is getting to the literal control is correct with all necessary data for the chart, all pathes are verified to the js, swf, etc....


It works fine if I do it from the aspx page as in:

<div id="chartdiv" align="center">FusionGadgets</div>
  <script type="text/javascript">
      var myChart = new FusionCharts("../FusionWidgets/AngularGauge.swf", "myChartId", "270", "270", "0", "0");
      myChart.setDataURL("path of xml file here");



I cannot do that in my app because the number of Guages I want to create varies depending on how many devices I'm trying to monitor using these guages.



thanks for the help!

Edited by tyousef

Share this post

Link to post
Share on other sites
Guest Angshu



Welcome to FusionCharts Forum! smile.gif


Any of these listed reasons can cause this error to occur:


1. You have not set correct path of FusionCharts.js in your code.


2. The page contains JavaScript error.


3. If you are setting the data as XML/JSON String, you might be including new-line characters in the XML/JSON string. New line characters in XML/JSON string cause JavaScript error.


Hope this helps.

Share this post

Link to post
Share on other sites

The JS error showing in both IE and Chrome is:


Object doesn't support property or method 'setAttribute'

FusionCharts.js, line 27 character 12



, when I navigate to the js file, here is the line where the error is:

if(swf) { this.setAttribute('swf', swf); }
if(id) { this.setAttribute('id', id); }


you can simply take my code and create a project on your side, and try to recreate the problem.






Share this post

Link to post
Share on other sites

I got it to work, BUT this does not make any sense:


There are two FusionCharts.js files: one in FusionWidgets folder that came with FusionWidget Enterprise and another one in FusionCharts Folder from FusionCharts XT package,


The issue have gone away when I used the file from FusionCharts folder!!! From what I understand, realtime guages are part of the widgets and I was using the js from FusionWidget folder. Why I need to replace the JS file with the Charts XT version? this does not make any sense....

Share this post

Link to post
Share on other sites
Guest Angshu



Thanks for your response.


Please note that the latest version of FusionWidgets i.e FusionWidgets XT (v 3.2) would be available very soon to fix this issue.


The current version of FusionWidgets does not support all the JavaScript APIs of FusionCharts, as of now.


Thank you very much for your continued patience and patronage.


Hope you have a great day!

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