1. สร้างตารางเก็บข้อมูล ภายใต้ SQL Server ดังนี้
2. ทำการเพิ่มข้อมูลให้กับตาราง ตามตัวอย่างดังภาพ
3. ให้เปิดโปรแกรม Visual Studio 201x จากนั้นทำการสร้างเว็บฟอร์ม
<!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"
/>
<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
ตัวอย่างผลลัพธ์
สวัสดีมีกราฟใช้งาน
