locked
Page with Visifire Chart working but cant ammend!? RRS feed

  • Question

  • User1225369314 posted

    Hi, I'm trying to use an example somebody has created in the link below so that I can use my own database to show a visifire chart.

    http://www.visifire.com/forums/index.php?showtopic=571

    The problem I have is that even though I change some of the codes, it does not update the chart! Im not sure why that is though.

    This is the data.aspx.vb code

    Imports System
    Imports System.Collections.Generic
    Imports System.Linq
    Imports System.Web
    Imports System.Web.UI
    Imports System.Web.UI.WebControls
    Imports System.Data
    Imports System.Text
    Imports System.Data.Odbc
    
    Partial Public Class Data
    
        Inherits System.Web.UI.Page
    
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim connectionString As String = "Driver={Microsoft Access Driver (*.mdb, *.accdb)};DBQ=" + Server.MapPath("App_Data\Northwind.accdb") + ";Uid=Admin;Pwd=;"
            Dim con As OdbcConnection = New OdbcConnection(connectionString)
    
            Dim query As String = "SELECT DISTINCTROW TOP 10 [Customers Extended].Company AS CompanyName, [Order Subtotals].Subtotal AS SaleAmount "
            query += " FROM [Customers Extended] INNER JOIN "
            query += " (Orders INNER JOIN [Order Subtotals] ON Orders.[Order ID]=[Order Subtotals].[Order ID]) "
            query += " ON [Customers Extended].ID=Orders.[Customer ID] "
            query += " ORDER BY [Order Subtotals].Subtotal DESC"
    
            con.Open()
            Dim dt As DataTable = New DataTable()
            Dim odbcDataAdapter As OdbcDataAdapter = New OdbcDataAdapter(Query, con)
            odbcDataAdapter.Fill(dt)
            odbcDataAdapter.Dispose()
            con.Close()
    
            Dim chartXml As StringBuilder = New StringBuilder()
    
            chartXml.Append("<vc:Chart xmlns:vc=""clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"" Width=""500"" Height=""300"" Theme=""Theme1"" >")
    
            chartXml.Append("    <vc:Chart.AxesY>")
            chartXml.Append("        <vc:Axis Prefix=""$""></vc:Axis>")
            chartXml.Append("    </vc:Chart.AxesY>")
    
            chartXml.Append("    <vc:Chart.Titles>")
            chartXml.Append("        <vc:Title Text=""Top 10 Biggest Orders"" FontSize=""14""/>")
            chartXml.Append("    </vc:Chart.Titles>")
    
            chartXml.Append("    <vc:Chart.Series>")
            chartXml.Append("        <vc:DataSeries YValueFormatString=""$#####.###""  RenderAs=""Column"" LabelEnabled=""True"">")
            chartXml.Append("            <vc:DataSeries.DataPoints>")
    
            For Each dataRow As DataRow In dt.Rows
                chartXml.Append(" <vc:DataPoint AxisXLabel=""" + dataRow("CompanyName").ToString() + """ YValue=""" + dataRow("SaleAmount").ToString() + """/>")
            Next
    
            chartXml.Append("            </vc:DataSeries.DataPoints>")
            chartXml.Append("        </vc:DataSeries>")
            chartXml.Append("    </vc:Chart.Series>")
            chartXml.Append("</vc:Chart>")
    
            Response.Write(chartXml)
    
        End Sub
    
    End Class

    As an example is even though I change this...

            chartXml.Append("        <vc:Title Text=""Top 10 Biggest Orders"" FontSize=""14""/>")

    To this...

            chartXml.Append("        <vc:Title Text=""Top 1000 Biggest Orders"" FontSize=""14""/>")

    It doesnt show a change when I run the page!?

    Thanks for any advice

    Thursday, December 22, 2011 9:51 AM

Answers

  • User-1149899445 posted

    In the above code, you have created a DataTable with the name "dataTable" but you are using "dt" which is no where defined. Please follow the code below:

    Example:

    For Each dataRow As DataRow In dataTable.Rows
                chartXml.Append("<vc:DataPoint AxisXLabel=""" + dataRow("CategoryName").ToString() + """ YValue=""" + dataRow("CategorySales").ToString() + """/>")
            Next

    Also, you are creating a dataAdapter using the code below.

    dataAdapter = New System.Data.OleDb.OleDbDataAdapter(Sql, con)

    Here Sql is the query which will retrieve data from DataBase.

    Example:

    Dim Sql As [String] = "SELECT CategoryName, SUM(ProductSales) AS CategorySales" + " FROM [Product Sales for 1997] " + "GROUP BY CategoryName"
    
    dataAdapter = New System.Data.OleDb.OleDbDataAdapter(Sql, con)



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 27, 2011 7:39 AM
  • User-1149899445 posted

    Please make sure that the path for SL.Visifire.Charts.xap and Visifire.js files is correct. Also, check whether MIME types for .xap files are properly configured in the server.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 29, 2011 4:46 AM
  • User-1149899445 posted

    Please try calling the setDataXml() function as shown below:

    /* Create a new chart object. Arguments are SL.Visifire.Charts.xap uri, width, height */
    var vChart = new Visifire("./Visifire/SL.Visifire.Charts.xap");

    /* Set the data XAML where response text contains the Data xaml is passed as argument */
    vChart.setDataXml(xmlHttp.responseText.substr(0, xmlHttp.responseText.indexOf("<html>")));

    /* Render the chart, target div element id is passed as argument */
    vChart.render("Visifire1");

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 22, 2012 11:39 PM

All replies

  • User-1149899445 posted

    Are you trying to change the Title text at realtime? If yes then you have to do it as shown below:

     var vChart = new Visifire("SL.Visifire.Charts.xap", "MyChart", 500, 300);
    
                vChart.loaded = function (args)
    { var chart = args[0];
    chart.MouseLeftButtonUp = function (sender, eventArgs)
    { chart.Titles[0].SetPropertyFromJs("Text", "Top 1000 Biggest Orders"); }; }; vChart.setDataUri(xmlHttp.responseText); // data xml as response text vChart.render("Div1");

    Here I am changing the Title text on mouse event of chart.

    Thursday, December 22, 2011 10:53 PM
  • User1225369314 posted
    Hi thanks for that. It's not no sorry, it's just basically I wanted to change the chart title on the page. Even though I change it in data.vb where the line of code is it doesn't update the page when I load the page? Thanks
    Friday, December 23, 2011 2:33 AM
  • User-1149899445 posted

    Please try clearing the browser cache and see.

    Friday, December 23, 2011 2:40 AM
  • User1225369314 posted

    Yep I've tried that, its totally confused me I dont understand, do I need to re-compile or re-build before I run it?

    I've tried...

    - Downloading the example on a new pc, changing the data.aspx.vb code before even running it once with a simple change like the chart title

    - Clearing browser cache

    - restarting IIS

    - restarting the PC

    Would it be possible for anyone to download the sample and see if they get the same?  Somebody else on that forum had the same problem.

    Many Thanks! Smile

    Friday, December 23, 2011 3:06 AM
  • User-1149899445 posted

    You don't have to restart the IIS and PC. I tried it here and didn't find such issue. Can you please tell me from where have you downloaded the SL.Visifire.Charts.xap and Visifire2.js? Please note that Visifire2.js is not supported now. It was available in Visifire v2.x only. From v3.x onwards we renamed it as Visifire.js. If you downlaod latest binaries from our site, you will get Visifire.js not Visifire2.js. Make sure that Visifire.js file is present in the visifire folder. Then rename Visifire2 to Visifire whereever present.

    Example:

    <script type="text/javascript" src="./visifire/Visifire.js"></script>
    var vChart = new Visifire("visifire/SL.Visifire.Charts.xap", "MyChart", 500, 300);
    Friday, December 23, 2011 4:17 AM
  • User1225369314 posted

    Thanks for your help I really appreciate it, I've been trying for hours just to get it working. If I can get the example working I can use this for my project!

    Those are the two places I made the change in the code after downloading visifre v3.6.8 from here - http://code.google.com/p/visifire/downloads/list

    And after putting the two files in the visifire folder SL.Visifire.Charts.xap and visifire.js

     

    The chart runs fine, its just trying to change it. I can ammend the database values and the bars do change. And I can change default.aspx and the change appears on the page.

    But if I try change data.aspx.vb where I think all of the codes are for the chart, it doesnt seem to update the chart when I run the page!

     

    I can only find one warning and its in AspDotNetDatabaseVB.vbproj in this section

        <Compile Include="My Project\MyExtensions\MyWebExtension.vb">
          <VBMyExtensionTemplateID>Microsoft.VisualBasic.Web.MyExtension</VBMyExtensionTemplateID>
          <VBMyExtensionTemplateVersion>1.0.0.0</VBMyExtensionTemplateVersion>
        </Compile>

    Which is... 

    Warning 1 The element 'Compile' in namespace 'http://schemas.microsoft.com/developer/msbuild/2003' has invalid child element 'VBMyExtensionTemplateVersion' in namespace 'http://schemas.microsoft.com/developer/msbuild/2003'. List of possible elements expected: 'SubType, DependentUpon, AutoGen, DesignTime, Link, DesignTimeSharedInput, Visible, CopyToOutputDirectory, VBMyExtensionTemplateID' in namespace 'http://schemas.microsoft.com/developer/msbuild/2003'. C:\MyWebsites\AspDotNetDatabaseVB\AspDotNetDatabaseVB.vbproj 114 8 C:\MyWebsites\AspDotNetDatabaseVB\

    Friday, December 23, 2011 4:32 AM
  • User1225369314 posted

    I did manage to get this one to work, the only problem is that its in C# and my project is in VB

    http://www.visifire.com/blog/2009/05/21/creating-silverlight-charts-from-sql-data-using-aspnet-and-visfire/

    Would anybody be kind enough to help me convert it to vb?

    Thank you

    Friday, December 23, 2011 4:44 AM
  • User-1149899445 posted

    Instead of downloading the example, I would suggest you to create the similar example from scratch and see if it works.

    Friday, December 23, 2011 4:45 AM
  • User1225369314 posted

    Just realised that example was posted by vivek, I dont know if it was you!? - http://www.visifire.com/blog/2009/05/21/creating-silverlight-charts-from-sql-data-using-aspnet-and-visfire/

    Its a lot better example, seems much more simple, its just in c# how could I go about converting it to VB. Are there any website which would convert it for me?

    Starting from scratch didnt work on the other example...

    Many Thanks

    Friday, December 23, 2011 5:02 AM
  • User1225369314 posted

    Fantastic!!!!! I manage to convert that example using this great site - http://converter.telerik.com/

    These are the files I added and then changed to how they are below to get it to work

    Data.aspx

    <%@ Page Language="VB" AutoEventWireup="true" CodeFile="Data.aspx.vb" Inherits="Data" %>

     

    Data.asp.vb

    Imports System
    Imports System.Collections.Generic
    Imports System.Linq
    Imports System.Web
    Imports System.Web.UI
    Imports System.Web.UI.WebControls
    Imports System.Data
    Imports System.Data.SqlClient
    Imports System.Text
    
    Partial Public Class Data
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, e As EventArgs)
            ' Set the NORTHWND.MDF file path
            Dim path As [String] = Server.MapPath("App_Data/NORTHWND.MDF")
    
            ' Set the connection string
            Dim connectionString As [String] = "Data Source=.\SQLEXPRESS;AttachDbFilename=" + path + ";Integrated Security=True;User Instance=True"
    
            ' Query DataBase
            Dim query As [String] = "SELECT CategoryName, SUM(ProductSales) AS CategorySales" + " FROM [Product Sales for 1997] " + "GROUP BY CategoryName"
    
            ' Initialize the Sql connection
            Dim con As New SqlConnection(connectionString)
    
            ' Open connection
            con.Open()
    
            ' Initialize DataTable class
            Dim dt As New DataTable()
    
            ' Initialize SqlDataAdapter class
            Dim da As New SqlDataAdapter()
    
            ' Set the Sql command
            da.SelectCommand = New SqlCommand(query, con)
    
            ' Fill DataSet with rows
            da.Fill(dt)
    
            ' Close connection
            con.Close()
    
            ' Initialize StringBuilder class
            Dim chartXml As New StringBuilder()
    
            ' Append chart XML data
            chartXml.Append("<vc:Chart xmlns:vc=""clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"" Width=""500"" Height=""300"" Theme=""Theme2"" >")
    
            chartXml.Append("<vc:Chart.AxesY>")
            chartXml.Append("<vc:Axis Prefix=""$""></vc:Axis>")
            chartXml.Append("</vc:Chart.AxesY>")
    
            chartXml.Append("<vc:Chart.Titles>")
            chartXml.Append("<vc:Title Text=""Category wise Sales for the year 197"" FontSize=""14""/>")
            chartXml.Append("</vc:Chart.Titles>")
    
            chartXml.Append("<vc:Chart.Series>")
            chartXml.Append("<vc:DataSeries RenderAs=""Column"" >")
            chartXml.Append("<vc:DataSeries.DataPoints>")
    
            For Each dataRow As DataRow In dt.Rows
                chartXml.Append("<vc:DataPoint AxisXLabel=""" + dataRow("CategoryName").ToString() + """ YValue=""" + dataRow("CategorySales").ToString() + """/>")
            Next
    
            chartXml.Append("</vc:DataSeries.DataPoints>")
            chartXml.Append("</vc:DataSeries>")
            chartXml.Append("</vc:Chart.Series>")
            chartXml.Append("</vc:Chart>")
    
            ' Write object to an HTTP response stream
            Response.Write(chartXml)
        End Sub
    End Class

     

    Default.aspx

    <%@ Page Language="VB" AutoEventWireup="true"  CodeFile="Default.aspx.vb" Inherits="_Default" %>
    
    <!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" runat="server">
        <title>Visifire Basic Chart Sample from DataBase</title>
        <script type="text/javascript" src="./Visifire/Visifire2.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="VisifireChart0">
    
            <script type="text/javascript">
    
                // Create Visifire object
                var vChart = new Visifire2('Visifire/SL.Visifire.Charts.xap', "MyChart", 500, 300);
    
                // Set Chart Data xml source
                vChart.setDataUri("Data.aspx?reqtime=" + (new Date()).getTime());
    
                // Render the chart
                vChart.render("VisifireChart0");
                
            </script>
    
        </div>
        </form>
    </body>
    </html>

    Default.aspx.vb

    Imports System
    Imports System.Collections.Generic
    Imports System.Linq
    Imports System.Web
    Imports System.Web.UI
    Imports System.Web.UI.WebControls
    
    Partial Public Class _Default
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, e As EventArgs)
    
        End Sub
    End Class
    Friday, December 23, 2011 5:11 AM
  • User-1149899445 posted

    Yes it was me only who posted that example. It seems you are able to convert that C# example into VB.

    Friday, December 23, 2011 5:16 AM
  • User1225369314 posted

    Yep its a much better example I think, easier to understand than the other one, a much cleaner example.

    One last question though which will really help.

    What should I change the codes to, so that I can use an access database instead of a SQL server database

    Thanks Vivek you've been brilliant!

    Friday, December 23, 2011 5:20 AM
  • User-1149899445 posted

    You can refer the following links.

    http://www.codeproject.com/KB/database/accessdb.aspx

    http://www.codeproject.com/KB/applications/myaspnetguestbook.aspx

    There are lot of such examples present in the net.

    Friday, December 23, 2011 5:40 AM
  • User1225369314 posted

    Hi, I've spent hours trying to get it to work with access.

    The example works great with SQL, but cant get it to work with a basic northwind database.

    Please could somebody help?

    Many Thanks 

    Monday, December 26, 2011 10:34 AM
  • User1225369314 posted

    This is the code from another page where I display an access table on a page. I'd like to display the data then show the visifre chart below.

    My page with the table uses an Access DB and the page with a chart uses a SQL DB. I'm trying to combine the two by converting the page code which connecting to the SQL database but cant seem to do it!

    This is the code I use to connect to the database...

                Dim dbconn, sql, dbcomm, dbread
                dbconn = New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;  data source=" & Server.MapPath("\ProductsWorks\App_Data\Products.mdb"))
                dbconn.Open()
                sql = "SELECT * FROM Fruits where YearTotal='" + strCurrentYear + "'"
                dbcomm = New OleDbCommand(sql, dbconn)
                dbread = dbcomm.ExecuteReader()
                Fruits.DataSource = dbread
                Fruits.DataBind()
    
    
    
                dbread.Close()
                dbconn.Close()

    This is the code I use to connect to the SQL database for the chart...

     ' Set the NORTHWND.MDF file path
            Dim path As [String] = Server.MapPath("App_Data/NORTHWND.MDF")
    
            ' Set the connection string
            Dim connectionString As [String] = "Data Source=.\SQLEXPRESS;AttachDbFilename=" + path + ";Integrated Security=True;User Instance=True"
    
            ' Query DataBase
            Dim query As [String] = "SELECT CategoryName, SUM(ProductSales) AS CategorySales" + " FROM [Product Sales for 1997] " + "GROUP BY CategoryName"
    
            ' Initialize the Sql connection
            Dim con As New SqlConnection(connectionString)
    
            ' Open connection
            con.Open()
    
            ' Initialize DataTable class
            Dim dt As New DataTable()
    
            ' Initialize SqlDataAdapter class
            Dim da As New SqlDataAdapter()
    
            ' Set the Sql command
            da.SelectCommand = New SqlCommand(query, con)
    
            ' Fill DataSet with rows
            da.Fill(dt)
    
            ' Close connection
            con.Close()
    
            ' Initialize StringBuilder class
            Dim chartXml As New StringBuilder()
    
            ' Append chart XML data
            chartXml.Append("<vc:Chart xmlns:vc=""clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"" Width=""500"" Height=""300"" Theme=""Theme1"" >")
    
            chartXml.Append("<vc:Chart.AxesY>")
            chartXml.Append("<vc:Axis Prefix=""$""></vc:Axis>")
            chartXml.Append("</vc:Chart.AxesY>")
    
            chartXml.Append("<vc:Chart.Titles>")
            chartXml.Append("<vc:Title Text=""Category wise Sales for the year 197"" FontSize=""14""/>")
            chartXml.Append("</vc:Chart.Titles>")
    
            chartXml.Append("<vc:Chart.Series>")
            chartXml.Append("<vc:DataSeries RenderAs=""Column"" >")
            chartXml.Append("<vc:DataSeries.DataPoints>")
    
            For Each dataRow As DataRow In dt.Rows
                chartXml.Append("<vc:DataPoint AxisXLabel=""" + dataRow("CategoryName").ToString() + """ YValue=""" + dataRow("CategorySales").ToString() + """/>")
            Next
    
            chartXml.Append("</vc:DataSeries.DataPoints>")
            chartXml.Append("</vc:DataSeries>")
            chartXml.Append("</vc:Chart.Series>")
            chartXml.Append("</vc:Chart>")
    
            ' Write object to an HTTP response stream
            Response.Write(chartXml)

                Dim dbconn, sql, dbcomm, dbread            dbconn = New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;  data source=" & Server.MapPath("\ProductsWorks\App_Data\Products.mdb"))            dbconn.Open()            sql = "SELECT * FROM Fruits where YearTotal='" + strCurrentYear + "'"            dbcomm = New OleDbCommand(sql, dbconn)

             

      dbread = dbcomm.ExecuteReader()

                Fruits.DataSource = dbread            Fruits.DataBind()


                dbread.Close()            dbconn.Close()

    Monday, December 26, 2011 10:52 AM
  • User-1149899445 posted

    You can try the code below:

    Dim conString As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("\ProductsWorks\App_Data\Products.mdb");        
    Dim con As System.Data.OleDb.OleDbConnection  
    con = New System.Data.OleDb.OleDbConnection(conString)  
    Dim dataAdapter As System.Data.OleDb.OleDbDataAdapter  
    dataAdapter = New System.Data.OleDb.OleDbDataAdapter(SQL, con)  
    Dim dataTable As DataTable = New DataTable()  
    dataAdapter.Fill(dataTable)  
    con.Close()  
    .
    
    .
    
    .
    
    For Each dataRow As DataRow In dataTable.Rows
                chartXml.Append("<vc:DataPoint AxisXLabel=""" + dataRow("CategoryName").ToString() + """ YValue=""" + dataRow("CategorySales").ToString() + """/>")
            Next
    
    .
    
    .
    
    .

    For more info, please refer the following link.

    http://urenjoy.blogspot.com/2008/10/basic-data-access-layer-for-msaccess.html

    Tuesday, December 27, 2011 1:31 AM
  • User1225369314 posted

    Thanks Vivek, thats a great help. I've tried that and got a bit further. This is the code I used and the errors

    Imports System
    Imports System.Collections.Generic
    Imports System.Linq
    Imports System.Web
    Imports System.Web.UI
    Imports System.Web.UI.WebControls
    Imports System.Data
    Imports System.Data.SqlClient
    Imports System.Text
    
    Partial Public Class Data
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, e As EventArgs)
       
            Dim conString As String = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("\ProductsWorks\App_Data\Products.mdb")
            Dim con As System.Data.OleDb.OleDbConnection
            con = New System.Data.OleDb.OleDbConnection(conString)
            Dim dataAdapter As System.Data.OleDb.OleDbDataAdapter
            dataAdapter = New System.Data.OleDb.OleDbDataAdapter(Sql, con)
            Dim dataTable As DataTable = New DataTable()
            dataAdapter.Fill(dataTable)
            con.Close()
    
            ' Initialize StringBuilder class
            Dim chartXml As New StringBuilder()
    
            ' Append chart XML data
            chartXml.Append("<vc:Chart xmlns:vc=""clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"" Width=""500"" Height=""300"" Theme=""Theme1"" >")
    
            chartXml.Append("<vc:Chart.AxesY>")
            chartXml.Append("<vc:Axis Prefix=""$""></vc:Axis>")
            chartXml.Append("</vc:Chart.AxesY>")
    
            chartXml.Append("<vc:Chart.Titles>")
            chartXml.Append("<vc:Title Text=""Category wise Sales for the year 197"" FontSize=""14""/>")
            chartXml.Append("</vc:Chart.Titles>")
    
            chartXml.Append("<vc:Chart.Series>")
            chartXml.Append("<vc:DataSeries RenderAs=""Column"" >")
            chartXml.Append("<vc:DataSeries.DataPoints>")
    
            For Each dataRow As DataRow In dt.Rows
                chartXml.Append("<vc:DataPoint AxisXLabel=""" + dataRow("CategoryName").ToString() + """ YValue=""" + dataRow("CategorySales").ToString() + """/>")
            Next
    
            chartXml.Append("</vc:DataSeries.DataPoints>")
            chartXml.Append("</vc:DataSeries>")
            chartXml.Append("</vc:Chart.Series>")
            chartXml.Append("</vc:Chart>")
    
            ' Write object to an HTTP response stream
            Response.Write(chartXml)
        End Sub
    End Class

    Error 1 C:\Documents and Settings\Dan\Desktop\VS\Visifire Chart Example\Data.aspx.vb(17): error BC30037: Character is not valid.

    Error 2 'System.Data.Sql' is a namespace and cannot be used as an expression. C:\Documents and Settings\Dan\Desktop\VS\Visifire Chart Example\Data.aspx.vb 20 62 C:\...\Visifire Chart Example\

    Error 3 'dt' is not declared. It may be inaccessible due to its protection level. C:\Documents and Settings\Dan\Desktop\VS\Visifire Chart Example\Data.aspx.vb 43 40 C:\...\Visifire Chart Example\

    Thank You!

    Tuesday, December 27, 2011 4:08 AM
  • User-1149899445 posted

    In the above code, you have created a DataTable with the name "dataTable" but you are using "dt" which is no where defined. Please follow the code below:

    Example:

    For Each dataRow As DataRow In dataTable.Rows
                chartXml.Append("<vc:DataPoint AxisXLabel=""" + dataRow("CategoryName").ToString() + """ YValue=""" + dataRow("CategorySales").ToString() + """/>")
            Next

    Also, you are creating a dataAdapter using the code below.

    dataAdapter = New System.Data.OleDb.OleDbDataAdapter(Sql, con)

    Here Sql is the query which will retrieve data from DataBase.

    Example:

    Dim Sql As [String] = "SELECT CategoryName, SUM(ProductSales) AS CategorySales" + " FROM [Product Sales for 1997] " + "GROUP BY CategoryName"
    
    dataAdapter = New System.Data.OleDb.OleDbDataAdapter(Sql, con)



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 27, 2011 7:39 AM
  • User1225369314 posted

    Thanks Vivek that has worked!!!! :-)

    Tuesday, December 27, 2011 4:56 PM
  • User1225369314 posted

    Hi, I've found that my chart displays on the page when developing it in Visual Web Developer 2010 fine.

    But when I copy the folder to the IIS server location, and then run the page it just comes up blank.

    I have created other projects and followed the same steps. I've made the virtual directory in IIS into an application, and changed the asp.net version to 4.0.30319

    Thanks

    Wednesday, December 28, 2011 4:45 AM
  • User-1149899445 posted

    Please make sure that the path for SL.Visifire.Charts.xap and Visifire.js files is correct. Also, check whether MIME types for .xap files are properly configured in the server.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, December 29, 2011 4:46 AM
  • User1225369314 posted

    Great Thanks!

    I followed this guide

    http://www.adefwebserver.com/dotnetnukehelp/misc/Silverlight/SettingMimeType.html

    Thank You

    Saturday, December 31, 2011 5:49 AM
  • User1225369314 posted

    Is there a way I could add the chart to another poject I have created?  My other project displays the table and it would be great to show the chart below it. I've managed to create my chart by ammending the data.asp.vb file.  

    I've copied the Visifire folder and the data pages into my project.

    Im struggling to combine the two though default.aspx pages though, they seem to be in a different format. This is the code I want to combine into my existing page...

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" %>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Visifire Basic Chart Sample from DataBase</title>
        <script type="text/javascript" src="./Visifire/Visifire.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="VisifireChart0">
    
            <script type="text/javascript">
    
                // Create Visifire object
                var vChart = new Visifire("./Visifire/SL.Visifire.Charts.xap", "MyChart", 500, 300);
    
                // Set Chart Data xml source
                vChart.setDataUri("Data.aspx?reqtime=" + (new Date()).getTime());
    
                // Render the chart
                vChart.render("VisifireChart0");
                
            </script>
    
        </div>
        </form>
    </body>
    </html>

    This is my page where I'm trying to add to my existing page... 

    <%@ Page Title="Home Page" Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false" 
        CodeFile="Default.aspx.vb" Inherits="_Default" %> 
     
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> 
    
    </asp:Content> 
     
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">  
    
        <asp:Repeater ID="MyTable" runat="server">  
            <HeaderTemplate>  
                <table border="1" width="100%">  
                    <tr>  
                        <th>  
                            Post Year  
                        </th>  
                        <th>  
                            Period  
                        </th>  
                        <th>  
                            Fee Earner 
                        </th>  
                        <th>  
                            Billed 
                        </th>   
                    </tr>  
            </HeaderTemplate>  
            <ItemTemplate>  
                <tr>  
                    <td width="50%">  
                        <%#Container.DataItem("PostYear")%></td>  
                    <td>  
                        <%#Container.DataItem("Period")%></td>  
                    <td>  
                        <%#Container.DataItem("FeeEarner")%></td>
                    <td>  
                        <%# Container.DataItem("BilledTotal")%></td>
                </tr>  
            </ItemTemplate>  
            <FooterTemplate>  
                </table>  
            </FooterTemplate>  
        </asp:Repeater> 
     
    </asp:Content>

    Thank You!

    Saturday, December 31, 2011 9:23 AM
  • User1225369314 posted

    Hi this example has been so useful, I've been able to do lots of great charts

    Is there any way I could make it into just one page which is needed?

    At the moment I need Default.aspx and Data.aspx

    Many Thanks

    Wednesday, January 18, 2012 5:42 PM
  • User-1149899445 posted

    Yes you can use one page (Default.aspx). You have to write the same code in Default.aspx.cs page and before writing the object to HTTP response stream, clear it first.

    Example:

    Response.Clear();

    Response.Write(chartXaml);

    Thursday, January 19, 2012 2:19 AM
  • User1225369314 posted

    Great, I didnt realise it was so simple, I'm struggling to get that to work though. I am using...

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ChartPage.aspx.vb" %>
    
    <!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" runat="server">
        <title>Visifire Basic Chart Sample from DataBase</title>
        <script type="text/javascript" src="./Visifire/Visifire.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div id="VisifireChart0">
    
            <script type="text/javascript">
    
                // Create Visifire object
                var vChart = new Visifire("./Visifire/SL.Visifire.Gauges.xap", "MyChart", 300, 311);
    
                // Set Chart Data xml source
                vChart.setDataUri("ChartPage.aspx?reqtime=" + (new Date()).getTime());
    
                // Render the chart
                vChart.render("VisifireChart0");
                
            </script>
    
        </div>
        </form>
    </body>
    </html>
    

     and...

    Partial Public Class _Default
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, e As EventArgs)
    
            Dim chartXml As New StringBuilder()
    
            chartXml.Append("<vg:Gauge xmlns:vg=""clr-namespace:Visifire.Gauges;assembly=SLVisifire.Gauges"" Width=""380"" Height=""311"" Type=""Circular"" >")
            chartXml.Append("<vg:Gauge.Indicators>")
            chartXml.Append("<vg:BarIndicator Value=""45""/>")
            chartXml.Append("<vg:MarkerIndicator Value=""20""/>")
            chartXml.Append("<vg:NeedleIndicator Value=""45""/>")
            chartXml.Append("</vg:Gauge.Indicators>")
            chartXml.Append("</vg:Gauge>")
    
            Response.Clear()
    
            Response.Write(chartXml)
    
        End Sub
    End Class

     

    Where did I go wrong?  

    Visifire  4.1.5.0 error log:

    1) Exception: Error: Invalid gauge Data XML found..
    7016 An error has occurred. [Line: 3 Position: 3]

    2) XML:

    <!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>
     Visifire Basic Chart Sample from DataBase
    </title>
        <script type="text/javascript" src="./Visifire/Visifire.js"></script>
    </head>
    <body>
        <form method="post" action="ChartPage.aspx?reqtime=1326964091886" id="form1">
    <div class="aspNetHidden">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNzgzNDMwNTMzZGRQuKfBj6Csi52J2UqNxdE5ssHsq+Opeoz/T9RUv4QFRg==" />
    </div>

        <div id="VisifireChart0">

            <script type="text/javascript">

                // Create Visifire object
                var vChart = new Visifire("./Visifire/SL.Visifire.Gauges.xap", "MyChart", 300, 311);

                // Set Chart Data xml source
                vChart.setDataUri("ChartPage.aspx?reqtime=" + (new Date()).getTime());

                // Render the chart
                vChart.render("VisifireChart0");
               
            </script>

        </div>
        </form>
    </body>
    </html>

    3) In case you are an Enterprise Customer, please create a ticket for priority support directly from Visifire Developers.
        Otherwise, please copy-paste the contents of this log in forum and our community members will help you.
        Ticket: http://visifire.com/support
        Forum: http://visifire.com/forums

    4) StackTrace:
       at SLVisifireGaugesXap.App.CreateGauge()
       at SLVisifireGaugesXap.App.RenderEngine()
       at SLVisifireGaugesXap.App.webclient_DownloadStringCompleted(Object sender, DownloadStringCompletedEventArgs e)
       at System.Net.WebClient.OnDownloadStringCompleted(DownloadStringCompletedEventArgs e)
       at System.Net.WebClient.DownloadStringOperationCompleted(Object arg)

     

    I just copied a working example to the code behind the main page and added the line of code you suggested

    Thank You!

    Thursday, January 19, 2012 4:13 AM
  • User-1149899445 posted

    Please check out the similar post below.

    http://www.visifire.com/forums/index.php?showtopic=1373&st=0&p=5726&hl=substr&fromsearch=1&#entry5726

    Thursday, January 19, 2012 8:19 AM
  • User1225369314 posted

    Thanks for your reply Vivek, I've looked at those similar posts and changed...

    vChart.setDataUri("ChartPage.aspx?reqtime=" + (new Date()).getTime());

    to....

    vChart.setDataXml(chartXml.responseText.substr(0, chartXml.responseText.indexOf("<!DOCTYPE ")));

    I get this error though

    Line: 25
    Error: 'chartXml' is undefined

    Please could you help?

    thanks so much, sorry to keep asking

    Thursday, January 19, 2012 8:37 AM
  • User-1149899445 posted

    In this case, you need to follow a different approach using Ajax. Please check out the sample below.

    http://www.visifire.com/documentation/Visifire_Documentation/Charts/Samples/Silverlight/asp.net_code_example.htm

    Thursday, January 19, 2012 8:40 AM
  • User1225369314 posted

    Great I'm getting there!!

    One last thing and I'm sorted, how can I put this block of code from example.aspx in my example.aspx.vb page load sub?  My sql statement is in there. 

      <% 
         If Request.QueryString("action") = "GetXML" Then

             Dim chartTitle As String = "Infant Mortality Rate"           
    Dim chartSubTitle = "(Global Survey)"              
             Dim axisXtitle = "Year"                                    
             Dim axisYtitle = "IMR Rate"                                
             Dim myXAML As String                                       
             Dim numberOfDataPoints As Integer = 6                      

             Dim dataSeries(,) As String = {{"2000", "100"}, {"2001", "100"}, {"2002", "60"}, {"2003", "70"}, {"2004", "80"}, {"2005", "15.1"}}
             myXAML = "<vc:Chart Theme=""Theme2"" Width=""600"" Height=""400"" xmlns:vc=""clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"">"
             myXAML = myXAML + "<vc:Chart.Titles>"
             myXAML = myXAML + "<vc:Title Text=""" & chartTitle & """/>"
             myXAML = myXAML + "<vc:Title Text=""" & chartSubTitle & """/>"
             myXAML = myXAML + "</vc:Chart.Titles>"
             myXAML = myXAML + "<vc:Chart.AxesX>"
             myXAML = myXAML + "<vc:Axis Title=""" & axisXtitle & """/>"
             myXAML = myXAML + "</vc:Chart.AxesX>"
             myXAML = myXAML + "<vc:Chart.AxesY>"
             myXAML = myXAML + "<vc:Axis Title=""" & axisYtitle & """  ValueFormatString=""#0.##'%'""/>"
             myXAML = myXAML + "</vc:Chart.AxesY>"
             myXAML = myXAML + "<vc:Chart.Series>"
             myXAML = myXAML + "<vc:DataSeries RenderAs=""Column"">"
             myXAML = myXAML + "<vc:DataSeries.DataPoints>"

             For dataPointIndex As Integer = 0 To numberOfDataPoints - 1
                 myXAML = myXAML + "<vc:DataPoint AxisXLabel=""" & dataSeries(dataPointIndex, 0) & """ YValue=""" & dataSeries(dataPointIndex, 1) & """/>"
             Next

             myXAML = myXAML + "</vc:DataSeries.DataPoints>"
             myXAML = myXAML + "</vc:DataSeries>"
             myXAML = myXAML + "</vc:Chart.Series>"
             myXAML = myXAML + "</vc:Chart>"
             
             Response.Clear()
            Response.Write(myXAML)

         End If
                %>


    If anyone tries the example there was a bug in the example code too. It wouldnt update on new values, I changed this...

    xmlHttp.open("GET", "example.aspx" + "?action=GetXML", true);

    to this to make it update...

            var currentTime = new Date();
            xmlHttp.open("GET", "example.aspx" + "?action=GetXML&time=" + currentTime.getTime(), true); 

    Thanks so much!

    Thursday, January 19, 2012 9:56 AM
  • User-1149899445 posted

    Please check the code below:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
        Handles Me.Load
    
        If Request.QueryString("action") = "GetXML" Then
        .
        .
        .
    
        End Sub
    Friday, January 20, 2012 1:21 AM
  • User1225369314 posted

    Thanks Vivkek, your help is greatly appreciated.

    Please could you check my page and page code below, this is what I had tried to do but after many attempts and different ways of trying I cant get it working!

    <%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" CodeFile="example.aspx.vb" Inherits="Data" %>
    
    <html>
    
    <head>
    
    <title>Visifire example using ASP.NET and VB</title>
    
    <script type="text/javascript" src="./Visifire/Visifire.js"></script>
    
    <script type="text/javascript">
    
        function GetXMLHttpObj() {
    
            var objXmlHttp; 
            try {
                // Firefox, Opera 8.0+, Safari
                objXmlHttp = new XMLHttpRequest();
            }
            catch (e) {
                // Internet Explorer
                try {
                    objXmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        objXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {
                        alert("Your browser does not support AJAX!");
                        return null;
                    }
                }
            }
            return objXmlHttp;
        }
    
            function onLoad() {
    
            var xmlHttp = GetXMLHttpObj();
    
            xmlHttp.onreadystatechange = function () {
    
                if (xmlHttp.readyState == 4) {
    
                    /* Create a new chart object. Arguments are SL.Visifire.Charts.xap uri, width, height */
                    var vChart = new Visifire("./Visifire/SL.Visifire.Charts.xap");
    
                    /* Set the data XAML where response text contains the Data xaml is passed as argument */
                    vChart.setDataXml(xmlHttp.responseText);
    
                    /* Render the chart, target div element id is passed as argument */
                    vChart.render("Visifire1");
                }
            }
    
            var currentTime = new Date();
            xmlHttp.open("GET", "example.aspx" + "?action=GetXML&time=" + currentTime.getTime(), true); 
    
            xmlHttp.send(null);
        }
    
    </script>
    
    </head>
    
    <body onload = "onLoad()">
    
        <div style="width:800px;height:600px;" id="Visifire1" ></div>
    
    </body>
    
    </html>
        Partial Public Class Data
            Inherits System.Web.UI.Page
            Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    
                If Request.QueryString("action") = "GetXML" Then
    
                    Dim chartTitle As String = "Infant Mortality Rate"          
    Dim chartSubTitle = "(Global Survey)"
    Dim axisXtitle = "Year"
    Dim axisYtitle = "IMR Rate"
    Dim myXAML As String Dim numberOfDataPoints As Integer = 6 Dim dataSeries(,) As String = {{"2000", "20"}, {"2001", "100"}, {"2002", "60"}, {"2003", "70"}, {"2004", "80"}, {"2005", "15.1"}} myXAML = "<vc:Chart Theme=""Theme2"" Width=""600"" Height=""400"" xmlns:vc=""clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"">" myXAML = myXAML + "<vc:Chart.Titles>" myXAML = myXAML + "<vc:Title Text=""" & chartTitle & """/>" myXAML = myXAML + "<vc:Title Text=""" & chartSubTitle & """/>" myXAML = myXAML + "</vc:Chart.Titles>" myXAML = myXAML + "<vc:Chart.AxesX>" myXAML = myXAML + "<vc:Axis Title=""" & axisXtitle & """/>" myXAML = myXAML + "</vc:Chart.AxesX>" myXAML = myXAML + "<vc:Chart.AxesY>" myXAML = myXAML + "<vc:Axis Title=""" & axisYtitle & """ ValueFormatString=""#0.##'%'""/>" myXAML = myXAML + "</vc:Chart.AxesY>" myXAML = myXAML + "<vc:Chart.Series>" myXAML = myXAML + "<vc:DataSeries RenderAs=""Column"">" myXAML = myXAML + "<vc:DataSeries.DataPoints>" For dataPointIndex As Integer = 0 To numberOfDataPoints - 1 myXAML = myXAML + "<vc:DataPoint AxisXLabel=""" & dataSeries(dataPointIndex, 0) & """ YValue=""" & dataSeries(dataPointIndex, 1) & """/>" Next myXAML = myXAML + "</vc:DataSeries.DataPoints>" myXAML = myXAML + "</vc:DataSeries>" myXAML = myXAML + "</vc:Chart.Series>" myXAML = myXAML + "</vc:Chart>" Response.Clear() Response.Write(myXAML) End If End Sub End Class

    The error is

    1) Exception: Error: Invalid chart Data XML found..
    2502 An error has occurred. [Line: 3 Position: 6]

    2) XML:
    <vc:Chart Theme="Theme2" Width="600" Height="400" xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"><vc:Chart.Titles><vc:Title Text="Infant Mortality Rate"/><vc:Title Text="(Global Survey)"/></vc:Chart.Titles><vc:Chart.AxesX><vc:Axis Title="Year"/></vc:Chart.AxesX><vc:Chart.AxesY><vc:Axis Title="IMR Rate"  ValueFormatString="#0.##'%'"/></vc:Chart.AxesY><vc:Chart.Series><vc:DataSeries RenderAs="Column"><vc:DataSeries.DataPoints><vc:DataPoint AxisXLabel="2000" YValue="20"/><vc:DataPoint AxisXLabel="2001" YValue="100"/><vc:DataPoint AxisXLabel="2002" YValue="60"/><vc:DataPoint AxisXLabel="2003" YValue="70"/><vc:DataPoint AxisXLabel="2004" YValue="80"/><vc:DataPoint AxisXLabel="2005" YValue="15.1"/></vc:DataSeries.DataPoints></vc:DataSeries></vc:Chart.Series></vc:Chart>

    Thanks again

     

     

    Friday, January 20, 2012 4:17 AM
  • User1225369314 posted

    hmm, I cant really see why its not working!

    I've just copied and pasted the code from the bottom of my aspx page and put it in the vb code page load sub.

    The code works great in <% %> at the bottom of the aspx page Cry

    Friday, January 20, 2012 5:04 AM
  • User1225369314 posted

    Ah, I think I possibly know why it is throwing an error, but not sure how to fix.

    I think it is including the aspx page in the chart data XML. I've tried a more basic chart data and got...

    The error is

    1) Exception: Error: Invalid chart Data XML found..
    2502 An error has occurred. [Line: 26 Position: 6]

    2) XML:
    <vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts" Width="500" Height="300" BorderThickness="0" Theme="Theme1" ToolBarEnabled="True" >

    <vc:Chart.Titles>
    <vc:Title Text="Global Fortune 5 Companies 2007" />
    </vc:Chart.Titles>
    <vc:Chart.AxesX>
    <vc:Axis Title="Companies" />
    </vc:Chart.AxesX>
    <vc:Chart.AxesY>
    <vc:Axis Title="Revenue in Million dollars" AxisType="Primary" />
    </vc:Chart.AxesY>
    <vc:Chart.Series>
    <vc:DataSeries RenderAs="Column" AxisYType="Primary" >
    <vc:DataSeries.DataPoints>
    <vc:DataPoint AxisXLabel="Wall-Mart" YValue="351139" />
    <vc:DataPoint AxisXLabel="Exxon Mobil" YValue="345254" />
    <vc:DataPoint AxisXLabel="Shell" YValue="318845" />
    <vc:DataPoint AxisXLabel="BP" YValue="274316" />
    <vc:DataPoint AxisXLabel="General Motors" YValue="207349" />
    </vc:DataSeries.DataPoints>
    </vc:DataSeries>
    </vc:Chart.Series>
    </vc:Chart>
     

    <html> <<----------- THE ERROR LINE IS HERE

    <head>

    <title>Visifire example using ASP.NET and VB</title>

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

    <script type="text/javascript">

        // Returns XmlHttp object

        function GetXMLHttpObj() {

            var objXmlHttp; // XMLHttpRequest object

            try {

    I've tried changing....

    xmlHttp.open("GET", "example.aspx" + "?action=GetXML&time=" + currentTime.getTime(), true); 

     to...

    xmlHttp.open("GET", "example.aspx.vb" + "?action=GetXML&time=" + currentTime.getTime(), true); 

    But then I get an error which doesnt have any visifire codes, and it fails on the first line which is <html>

    Thanks for any advice

     

    Friday, January 20, 2012 5:34 AM
  • User-1149899445 posted

    Please try calling the setDataXml() function as shown below:

    /* Create a new chart object. Arguments are SL.Visifire.Charts.xap uri, width, height */
    var vChart = new Visifire("./Visifire/SL.Visifire.Charts.xap");

    /* Set the data XAML where response text contains the Data xaml is passed as argument */
    vChart.setDataXml(xmlHttp.responseText.substr(0, xmlHttp.responseText.indexOf("<html>")));

    /* Render the chart, target div element id is passed as argument */
    vChart.render("Visifire1");

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, January 22, 2012 11:39 PM
  • User1225369314 posted

    Thanks so Much Vivek, you've helped me learn so much.

    I spent all weekend trying to get that to work!

    Thanks again

    Monday, January 23, 2012 4:01 AM