SQL Server Create Chart using Fusionchart and get data from database in VB.NET

2j4z5cfb  于 2023-10-15  发布在  .NET
关注(0)|答案(1)|浏览(106)

I want to create a bar chart using fusionchart, and get the data from database

This is my UI, if I click this link will go to the chart page

FRONT CODE FOR UI PAGE (Statistics.aspx)

<form id="form_statistics" runat="server">
    <div>
      <label for="name"></label>
       <asp:DropDownList ID="ddlGender" runat="server"></asp:DropDownList>
        <asp:Button ID="BtnSearch" runat="server" Text="Search" />
        <br/><br/>
        
         <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        
        <asp:Repeater ID="repGender" runat="server">
            <HeaderTemplate>
                <table cellspacing="0" rules="all" border="1">
                    <tr>
                        <th>Gender</th>
                        <th>Total</th>
                    </tr>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <%# Eval("GENDER")%>
                    </td>
                    <td style="text-align: center">
                       <a href='<%# "Chart.aspx?GENDER_ID=" & Eval("GENDER") & ""%>'> <%# Eval("TOTAL")%></a>
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                <tr style="font-weight: bold">
                    <td>Grand Total</td>
                    <td style="text-align: center">
                        <asp:Label runat="server" ID="lblTotal"></asp:Label>
                    </td>
                </tr>
                </table>
            </FooterTemplate>
        </asp:Repeater>

    </div>
    </form>

BEHIND CODE Statistics.aspx

Imports System.Data.SqlClient
Imports System.IO
Imports WebUserCtrl
Imports System.Collections
Imports System.Configuration
Imports System.Data
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports FusionCharts.Charts
Imports System.Reflection
Partial Class Statistics
    Inherits App.Main

  
    Dim MyTotal As Integer
    Dim MethodBase As Object

    Private Property Label As Object

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindData()
            ddlGender_Bind()
        End If
    End Sub

    Sub BindData()
        Dim dal As New DBWrapper.DAL(strConnectionString, strProviderName)
        Dim dt As New DataTable
        dal.DB.Parameters.Clear()
        dal.DB.AddParameter("@GENDER", ddlGender.SelectedValue)
        If dal.DB.ExecuteProcedure(dt, "GENDER_BB") Then
            repGender.DataSource = dt
            repGender.DataBind()

        End If

    End Sub

    Protected Sub repGender_ItemCommand(source As Object, e As RepeaterCommandEventArgs) Handles repGender.ItemCommand
        Dim dal As New DBWrapper.DAL(strConnectionString, strProviderName)
        Dim dt As New DataTable
    End Sub
  

    Protected Sub repGender_ItemDataBound(sender As Object, e As RepeaterItemEventArgs) Handles repGender.ItemDataBound
        If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim gData As DataRowView = e.Item.DataItem

            MyTotal = MyTotal + gData.Item("TOTAL")

        End If

        If e.Item.ItemType = ListItemType.Footer Then

            ' set the total value in footer
            Dim lblTotal As Label = e.Item.FindControl("lblTotal")
            lblTotal.Text = MyTotal

        End If
    End Sub

    Public Sub ddlGender_Bind()
        Dim dal As New DBWrapper.DAL(strConnectionString, strProviderName)
        Dim dt As New DataTable

        If dal.DB.ExecuteProcedure(dt, "GENDER_R") Then
            Share.LoadList(ddlGender, "GENDER", "GENDER_ID", dt, Enums.MsgCode.PleaseSelect.ToString, ListOrder.ByValue)
        End If
    End Sub
     
    
    Protected Sub BtnSearch_Click(sender As Object, e As EventArgs) Handles BtnSearch.Click
        Dim dal As New DBWrapper.DAL(strConnectionString, strProviderName)
        Dim dt As New DataTable
        dal.DB.Parameters.Clear()
        dal.DB.AddParameter("@GENDER", ddlGender.SelectedValue)
        If dal.DB.ExecuteProcedure(dt, "GENDER_B") Then
            repGender.DataSource = dt
            repGender.DataBind()
        End If

    End Sub

End Class

FRONT CODE FOR Chart.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Chart.aspx.vb" Inherits="Chart" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
     <!-- Include jQuery -->
        <script type="text/javascript" src=" https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <!-- Include fusioncharts core library file -->
        <script type="text/javascript" src=" https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
        <!-- Include fusion theme file -->
        <script type="text/javascript" src=" https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
        <!-- Include fusioncharts jquery plugin -->
        <script type="text/javascript" src=" https://rawgit.com/fusioncharts/fusioncharts-jquery-plugin/develop/dist/fusioncharts.jqueryplugin.min.js"></script>
    <title>Chart</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
         <asp:Literal ID="Literal1" runat="server"></asp:Literal>
     </div>
    
    </form>
</body>
</html>

BEHIND CODE Chart.aspx

Imports System.Data.SqlClient
Imports System.IO
Imports WebUserCtrl
Imports System.Collections
Imports System.Configuration
Imports System.Data
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports FusionCharts.Charts
Imports System.Reflection

Partial Class Chart
    Inherits App.Main
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
        If Not IsPostBack Then
            CreateChart()
        End If

    End Sub

    Sub CreateChart()
        Dim dal As New DBWrapper.DAL(strConnectionString, strProviderName)
        Dim dt As New DataTable
        Dim jsonData As New StringBuilder()
        Dim ReqComma As Boolean = False

        jsonData.Append("{'chart': {")
        jsonData.Append("'caption': 'Chart',")
        jsonData.Append("'yAxisName': 'Number',")
        jsonData.Append("'theme': 'fusion'")
        jsonData.Append("},")

        jsonData.Append("'data' : [")
        For Each dr As DataRow In dt.Rows
            If ReqComma Then
                jsonData.Append(",")
            Else
                ReqComma = True
            End If
            jsonData.Append("{" + "'label': '" & Replace(dr("GENDER"), "'", "\'") & "', 'value': '" & dr("TOTAL") & "'" + "}")
        Next
        jsonData.Append("]")
        jsonData.Append("}")

        Dim ChartOutput As New FusionCharts.Charts.Chart("column2d", MethodBase.GetCurrentMethod().Name, "100%", "300", "json", jsonData.ToString())
        Literal1.Text = ChartOutput.Render()
    End Sub

End Class



I can go to the other page(Chart.aspx) but I did not get the output, the data is not display. I am not sure where should I put the


 

Sub CreateChart()
        Dim dal As New DBWrapper.DAL(strConnectionString, strProviderName)
        Dim dt As New DataTable
        Dim jsonData As New StringBuilder()
        Dim ReqComma As Boolean = False

        jsonData.Append("{'chart': {")
        jsonData.Append("'caption': 'Chart',")
        jsonData.Append("'yAxisName': 'Number',")
        jsonData.Append("'theme': 'fusion'")
        jsonData.Append("},")

        jsonData.Append("'data' : [")
        For Each dr As DataRow In dt.Rows
            If ReqComma Then
                jsonData.Append(",")
            Else
                ReqComma = True
            End If
            jsonData.Append("{" + "'label': '" & Replace(dr("GENDER"), "'", "\'") & "', 'value': '" & dr("TOTAL") & "'" + "}")
        Next
        jsonData.Append("]")
        jsonData.Append("}")

        Dim ChartOutput As New FusionCharts.Charts.Chart("column2d", MethodBase.GetCurrentMethod().Name, "100%", "300", "json", jsonData.ToString())
        Literal1.Text = ChartOutput.Render()
    End Sub

It is either at behind code at Statistics.aspx or Chart.aspx. Please help me, I am new with vb.net

sql-server

1条答案

按热度按时间
byqmnocz

byqmnocz1#

You can refer this document to rendering FusionCharts in VB.NET Using Database

https://www.fusioncharts.com/blog/rendering-fusioncharts-vb-net-using-database/

Imports FusionCharts.Charts
Public Class index
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'store label-value pair
Dim dataValuePair As New Dictionary(Of String, Double)
dataValuePair.Add("Venezuela", 290)
dataValuePair.Add("Saudi", 260)
dataValuePair.Add("Canada", 180)
dataValuePair.Add("Iran", 140)
dataValuePair.Add("Russia", 115)
dataValuePair.Add("UAE", 100)
dataValuePair.Add("US", 30)
dataValuePair.Add("China", 30)
Dim jsonData As New StringBuilder
Dim data As New StringBuilder
'store chart config name-config value pair
Dim chartConfig As New Dictionary(Of String, String)
chartConfig.Add("caption", "Countries With Most Oil Reserves [2017-18]")
chartConfig.Add("subCaption", "In MMbbl = One Million barrels")
chartConfig.Add("xAxisName", "Country")
chartConfig.Add("yAxisName", "Reserves (MMbbl)")
chartConfig.Add("numberSuffix", "k")
chartConfig.Add("theme", "fusion")
'json data to use as chart data source
jsonData.Append("{'chart':{")
For Each config In chartConfig
jsonData.AppendFormat("'{0}':'{1}',", config.Key, config.Value)
Next
jsonData.Replace(",", "},", jsonData.Length - 1, 1)
'build data object from label-value pair
data.Append("'data':[")
For Each pair In dataValuePair
data.AppendFormat("{{'label':'{0}','value':'{1}'}},", pair.Key, pair.Value)
Next
data.Replace(",", "]", data.Length - 1, 1)
jsonData.Append(data.ToString())
jsonData.Append("}")
'Create chart instance
'charttype, chartID, width, height, data format, data
Dim MyFirstChart As New Chart("column2d", "first_chart", "600", "350", "json", jsonData.ToString())
Literal1.Text = MyFirstChart.Render()
End Sub
End Class

Also refer - https://www.fusioncharts.com/dev/getting-started/aspnet/your-first-chart-using-aspnet#installation-2

赞(0）分享  回复(0）举报  2023-10-15
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com