Sign in to follow this  
Followers 0
LangHC

Realtime angular gauge from SqlDB...again

By LangHC, in Using FusionWidgets XT

Recommended Posts

LangHC   

LangHC
Posted

FusionWidgets Representative,

I've read through all of the forum posts and the FusionWidgets documentation so I believe this may simply be a lack of knowledge on my part.  About 8 months ago I successfully built up chart pages using Visual Web Developer 2008 Express and FusionCharts using aspx pages with aspx.cs code behind.  I now would like to add realtime gauges to the same web page, using the same datasource as the charts. All of the data is coming from a Sql Server that is located on the web server.  I was able to get the gauges to work by simply modifying the code behind of the charts but not realtime. Below is my code...

HTML...

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AngularGraph.aspx.cs" Inherits="DB_DrillDown_Default" %>

<%@ Import Namespace="InfoSoftGlobal" %>

<html>

<head>

  <title>The Lang House Report Charts </title>

  <%

  //You need to include the following JS file, if you intend to embed the chart using JavaScript.

  //Embedding using JavaScripts avoids the "Click to Activate..." issue in Internet Explorer

  //When you make your own charts, make sure that the path to this JS file is correct. Else, you would get JavaScript errors.

  %>

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

<link href="default.css" rel="Stylesheet" type="text/css" />

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<meta http-equiv="refresh" content="120"/>

</head>

<body>

  <form id="form1" runat="server">

  <center>

  <h2>Jeremy's Report Page</h2>

  <table>

  <tr>

  <td><asp:Literal ID="FCLiteral20" runat="server"></asp:Literal></td>

  <td><asp:Literal ID="FCLiteral21" runat="server"></asp:Literal></td>

  </tr>

 

  </table>

  <br />

  <tr>

  <td><a href="./PowerMain.aspx">Daily Overview</a></td>

  <br />

 

  </center>

  <p>

   </p>

  </form>

</body>

</html>

ASPX.CS (code behind)

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using DataConnection;

using InfoSoftGlobal;

using System.Text;

public partial class DB_DrillDown_Default : System.Web.UI.Page

{

  protected void Page_Load(object sender, EventArgs e)

  {

  // Generate chart in Literal Control

  FCLiteral20.Text = CreateChart20();

  FCLiteral21.Text = CreateChart21();

  }

  public string CreateChart20()

  {

  //In this example, we show how to connect FusionCharts to a database.

  //Database Objects - Initialization

  SqlConn oRs; string strQuery;

  //strXML will be used to store the entire XML document generated

  StringBuilder strXML = new StringBuilder();

  strQuery = "SELECT TOP(1) (OutsideTemp/100) AS Outside FROM TempData ORDER by Date DESC";

  oRs = new SqlConn(strQuery);

  strXML.Append("<chart lowerLimit='0' upperLimit='100' gaugeStartAngle='180' gaugeEndAngle='0' palette='1' numberSuffix='F' tickValueDistance='20' showValue='1' decimals='2'>");

  strXML.Append("<colorRange>");

  strXML.Append("<color minValue='0' maxValue='40' code='5858FA'/>");

  strXML.Append("<color minValue='40' maxValue='85' code='01DF01'/>");

  strXML.Append("<color minValue='85' maxValue='100' code='FF0000'/>");

  strXML.Append("</colorRange>");

  strXML.Append("<dials>");

  oRs.ReadData.Read();

  {

  strXML.AppendFormat("<dial value='{0}' rearExtension='10'/>", oRs.ReadData["Outside"].ToString());

  }

  strXML.Append("</dials>");

  strXML.Append("</chart>");

  oRs.ReadData.Close();

  //Create the chart - Angular Gauge with data from strXML

  return FusionCharts.RenderChart("./FusionCharts/AngularGauge.swf", "", strXML.ToString(), "Temperature", "400", "400", false, false);

 

  }

...excluded "CreateChart21() for space reasons

I know you mentioned in previous posts that server side scripting is required to make the gauges realtime, but can you give me a hint on what step(s) in need to take next to make this work?

Regards,

Jeremy

Share this post

Link to post
Share on other sites

LangHC   

LangHC
Posted

All right.  This is what I've come up with after many hours of playing since my initial post a few days ago.  I was able to keep my code behind (aspx.cs) but return simply the xml string, nothing more.  I then used a literal control in my aspx page in addition to changing the "ContentType="text/xml"".  This told the aspx page to render raw xml when called.  This worked.  The data was placed in the <value> child appropriately.  I then created another plain html page (see below) to render the aspx page that rendered the raw xml :w00t:.  The result when the plain html page (below) is loaded, it displays the gauge just fine with the most recent value but the value doesn't update.  The debug mode tells me "No data received: The chart couldn't find any data values in the real-time feed."  Do I need to force a refresh on the raw xml .aspx page?  Please help.

*****BASIC HTML PAGE (WHEN RENDERED, DISPLAYS GAUGE BUT NO UPDATE) PAGE NAME: Pwr.aspx*****

<html>

<head>

  <title>My first chart using FusionWidgets</title>

  <script language="JavaScript" src="./FusionCharts/FusionCharts.js"></script>

</head>

<body bgcolor="#ffffff">

  <div id="chartdiv2" align="center">

The chart will appear within this DIV. This text will be replaced by the chart.

  </div>

  <script type="text/javascript">

  var myChart = new FusionCharts("./FusionCharts/AngularGauge.swf", "myChartId", "400", "200", "1", "0");

  myChart.setDataURL("ASPPagePower.aspx");

  myChart.render("chartdiv2");

  </script>

</body>

</html>

*******RAW XML .ASPX PAGE (WHEN RENDERED, DISPLAYS RAW XML) PAGE NAME: ASPPagePower.aspx*****

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ASPPagePower.aspx.cs" Inherits="ASPPagePower" ContentType="text/xml" %>

 

<asp:Literal ID="FCLiteral31" runat="server"></asp:Literal>

*****CODE BEHIND ASPPagePower.aspx.cs******

public partial class ASPPagePower : System.Web.UI.Page

{

  protected void Page_Load(object sender, EventArgs e)

  {

  // Generate chart in Literal Control

  FCLiteral31.Text = CreateChart31(); 

 

  }

  public string CreateChart31()

  {

  //In this example, we show how to connect FusionCharts to a database.

  //Database Objects - Initialization

  SqlConn oRs2; string strQuery;

  //strXML will be used to store the entire XML document generated

  StringBuilder strXML2 = new StringBuilder();

  strQuery = "SELECT TOP(1) Power FROM PowerRawData ORDER by ID DESC";

  oRs2 = new SqlConn(strQuery);

  strXML2.Append("<chart lowerLimit='0' upperLimit='200' gaugeStartAngle='180' gaugeEndAngle='0' palette='3' numberSuffix='Wh/m' tickValueDistance='20' showValue='1' decimals='2' dataStreamURL='ASPPagePower.aspx' refreshInterval='3'>");

  strXML2.Append("<colorRange>");

  strXML2.Append("<color minValue='0' maxValue='20' code='01DF01'/>");

  strXML2.Append("<color minValue='20' maxValue='50' code='F4FA58'/>");

  strXML2.Append("<color minValue='50' maxValue='200' code='FF0000'/>");

  strXML2.Append("</colorRange>");

  strXML2.Append("<dials>");

  oRs2.ReadData.Read();

  {

  strXML2.AppendFormat("<dial value='{0}' rearExtension='10'/>", oRs2.ReadData["Power"].ToString());

  }

  strXML2.Append("</dials>");

  strXML2.Append("</chart>");

  //Finally, close <graph> element

  oRs2.ReadData.Close();

  //Create the chart - Angular Gauge with data from strXML

  return strXML2.ToString();

  }

Share this post

Link to post
Share on other sites

LangHC   

LangHC
Posted

I figured it out.  Sorry for the panic.  Whether it's right or wrong, it works great the way I did it.  I have one aspx page that renders the entire gauge xml, including the realtime value.  This aspx page I entered in the html chart1.setDataURL() method.  I then created a second aspx page (...2.aspx) that only returns the &value=xx.  The ...2.aspx is the page that is called from with the xml dataStreamURL=.  I then have third html page that simply renders the graph.  Going back through the documentation I realized that this was the mentioned procedure.  I simply did not interpret the information correctly before. 

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  
Followers 0
Go To Topic Listing Using FusionWidgets XT