24 ธันวาคม 2558

ASP.NET dynamic HighCharts with SQL Server

การแสดงผลด้วยกราฟ ด้วย HighCharts

1. สร้างตารางเก็บข้อมูล ภายใต้ SQL Server ดังนี้

USE yourDatabase 
GO
CREATE TABLE [dbo].[tblTicker](
[RowOrder] [int] IDENTITY(1,1) NOT NULL,
[year] [nchar](4) NULL,
[Symbol] [nvarchar](15) NULL,
[Value1] [numeric](12, 2) NULL,
[value2] [numeric](12, 2) NULL
) ON [PRIMARY]

GO 

2. ทำการเพิ่มข้อมูลให้กับตาราง ตามตัวอย่างดังภาพ

3. ให้เปิดโปรแกรม Visual Studio 201x จากนั้นทำการสร้างเว็บฟอร์ม

- ไฟล์นามสกุล .aspx ป้อนคำสั่งดังนี้

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 <meta charset= "utf-8" />
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="https://code.highcharts.com/highcharts.js"></script>
 <script src="https://code.highcharts.com/modules/data.js"></script>
 <script src="https://code.highcharts.com/modules/exporting.js"></script>
 <script type="text/javascript">
 if ('<%=hidXCategories1%>' == '') {
 execScript();
 }
 var firstSeries = '<%=hidValues1%>';
 var secondSeries = '<%=hidValues2%>';
 var xAxis = '<%=hidXCategories1%>';
 var categories = new Array();
 categories = xAxis.split(',');
 var seriesOne = new Array();
 seriesOne = firstSeries.split(',');
 for (var i = 0; i < seriesOne.length; i++) {
 seriesOne[i] = parseInt(seriesOne[i]);
 }
 var seriesTwo = new Array();
 seriesTwo = secondSeries.split(',');
 for (var i = 0; i < seriesTwo.length; i++) {
 seriesTwo[i] = parseInt(seriesTwo[i]);
 }
 $(document).ready(function () {
 chart = new Highcharts.Chart({
 chart: {
 renderTo: 'container',
 defaultSeriesType: 'line'
 },
 title: {
 text: 'ทดสอบ Line Chat'
 },
 xAxis: {
 categories: categories
 },
 yAxis: {
 title: {
 text: 'แกน Y'
 }
 },
 series: [
 { name: 'ข้อมูลที่ 1', data: seriesOne },
 { name: 'ข้อมูลที่ 2', data: seriesTwo }
 ]
 });
 });
 </script>
 </head>
 <body>
 <form id="form1" runat="server">
 <h4>Display line chart using Highcharts in Asp.net</h4>
 <asp:DropDownList ID="DropDownList1" runat="server">
 <asp:ListItem>2014</asp:ListItem>
 <asp:ListItem>2015</asp:ListItem>
<asp:ListItem>2016</asp:ListItem>
 <asp:ListItem>2017</asp:ListItem>
</asp:DropDownList>
 <asp:Button ID="Button1" runat="server" Text="Button" /&gt
 <br />
 <div>
 <div id="container" style="width: 500px; height: 500px"></div>
 </div>
 </form>
 </body>
 </html>



- ไฟล์นามสกุล .aspx.vb ป้อนคำสั่งดังนี้

Imports System.Data
Imports System.Data.SqlClient
Public Class highcharts
    Inherits System.Web.UI.Page
    Private dsSeries As New DataSet()
    Public hidValues1 As String
    Public hidValues2 As String
    Public hidXCategories1 As String
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Public Function BindData() As DataSet
        Dim connString As String = ConfigurationManager.ConnectionStrings("SQLConnect").ToString()
        Dim con As New SqlConnection(connString)
        Dim cmd As New SqlCommand()
        cmd.Connection = con
        cmd.CommandText = "SELECT symbol,value1,value2 FROM tblTicker WHERE year ='" & DropDownList1.SelectedValue & "'"
        Dim da As New SqlDataAdapter(cmd)
        Try
            Dim ds As New DataSet()
            da.Fill(ds)

            Return ds
        Catch ex As Exception
            Throw ex
        End Try
    End Function

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Dim ri As Integer = 0
        'If Not IsPostBack Then
        dsSeries = BindData()
        'End If
        If dsSeries Is Nothing Then
            Return
        End If
        For Each dr As DataRow In dsSeries.Tables(0).Rows
            hidXCategories1 = (hidXCategories1 & dr("symbol").ToString()) + ","
            hidValues1 = (hidValues1 & dr("value1").ToString()) + ","
            hidValues2 = (hidValues2 & dr("value2").ToString()) + ","
            ri += 1
        Next
        If ri > 0 Then
            hidXCategories1 = Left(hidXCategories1, hidXCategories1.Length - 1)
            hidValues1 = Left(hidValues1, hidValues1.Length - 1)
            hidValues2 = Left(hidValues2, hidValues2.Length - 1)
        End If
    End Sub
End Class

- ไฟล์ web.config

 <configuration> 
 <system.web> 
 <compilation debug="true" strict="false" explicit="true" targetFramework="4.5" /> 
 <httpRuntime targetFramework="4.5" /> 
 </system.web> 
 <connectionStrings> 
 <add name="SQLConnect" connectionString="server=ชื่อServer;database=ชื่อDatabase;uid=sa;password=1234;" /> 
 </connectionStrings> 
 </configuration>

ให้ทำการกำหนด ชื่้อ Server, ชื่อ Database , ชื่อ User และรหัสผ่าน ให้ตรงกับที่กำหนดใน SQL Server

ตัวอย่างผลลัพธ์

สวัสดีมีกราฟใช้งาน

ไม่มีความคิดเห็น:

"I Believe in You"

Copyright(c) 2007 - 2022 by Kasem Kamolchaipisit.