<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Chart.aspx.vb" Inherits="CustomizedMarketTicker.Chart" %>
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Line Chart For Last Trading Price</title>
<link href="Content/jqx.base.css" rel="stylesheet" />
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/json2.js"></script>
<script type="text/javascript" src="Scripts/jqxcore.js"></script>
<script type="text/javascript" src="Scripts/jqxdata.js"></script>
<script type="text/javascript" src="Scripts/jqxchart.js"></script>
<script type ="text/javascript" >
$(document).ready(function () {
var source =
{
datatype: "json",
datafields: [
{ name: 'LTP' },
{ name: 'DT' }
],
type: "POST",
url: '/WebService1.asmx/convertTojson'
};
var dataAdapter = new $.jqx.dataAdapter(source,
{
async: false,
autoBind: true,
loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); }
});
var settings = {
title: "Last Trading Price",
description: "NSE",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
dataField: 'DT',
formatFunction: function (value) {
return $.jqx.dataFormat.formatdate(value, "h:mm:ss tt");
},
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: '#888888',
unitInterval: 1,
showGridLines: true,
gridLinesInterval: 10,
gridLinesColor: '#888888',
valuesOnTicks: false
},
colorScheme: 'scheme04',
seriesGroups:
[
{
type: 'line',
valueAxis:
{
unitInterval: 100,
minValue: 0,
maxValue: 1000,
displayValueAxis: true,
description: 'Last Trade Price',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'Ltp', displayText: 'Ltp' }
]
}
]
};
// setup the chart
$('#chartContainer').jqxChart(settings);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DropDownList ID="ddlsymbol" runat="server"
OnSelectedIndexChanged="ddlsymbol_SelectedIndexChanged" AutoPostBack="True">
<asp:Chart ID="Chart1" runat="server" Height="400px" Width="680px" Visible="False" >
<Titles>
<asp:Title ShadowOffset="3" Name="Items" />
</Titles>
<legends>
<asp:Legend Alignment="Center" Docking="Bottom" IsTextAutoFit="False" Name="Default" LegendStyle="Row" />
<series>
<asp:Series Name="LTP" ChartType="Line" ToolTip ="LTP:#VALY
TIME:#VALX" />
<chartareas>
<asp:ChartArea Name="ChartArea1" BorderWidth="0" />
</form>
</body>
</html>
Chart.aspx.vb
Imports System.Data.SqlClient
Imports System.Data
Imports System.Web.UI
Imports System.Web.UI.DataVisualization.Charting
Imports System.Web.Services
Imports System.Web.Script.Services
Public Class Chart
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim query As String = "Select Symbol from LastRate"
Dim dt As DataTable = GetData(query)
ddlsymbol.DataSource = dt
ddlsymbol.DataTextField = "Symbol"
ddlsymbol.DataValueField = "Symbol"
ddlsymbol.DataBind()
ddlsymbol.Items.Insert(0, New ListItem("Select", ""))
End If
End Sub
Protected Sub Chart1_Load(sender As Object, e As EventArgs) Handles Chart1.Load
End Sub
Protected Sub ddlsymbol_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ddlsymbol.SelectedIndexChanged
Chart1.Visible = ddlsymbol.SelectedValue <> ""
Dim query As String = String.Format("SELECT LTP,CONVERT(VARCHAR,DT,108) FROM LastRate Where Symbol='{0}'", ddlsymbol.SelectedValue)
Dim dt As DataTable = GetData(query)
Dim x As Date() = New Date(dt.Rows.Count - 1) {}
Dim y As Double() = New Double(dt.Rows.Count - 1) {}
For i As Integer = 0 To dt.Rows.Count - 1
x(i) = dt.Rows(i)(1)
y(i) = dt.Rows(i)(0)
Next
'Chart1.Series.Add("Time")
'Chart1.Series.Clear()
'Chart1.Series("Series 1").XValueMember = "Time"
'Chart1.Series("Series 1").YValueMembers = "LTP"
Chart1.Series(0).Points.DataBindXY(x, y)
Chart1.DataBind()
Chart1.Series(0).ChartType = SeriesChartType.Line
Chart1.ChartAreas("ChartArea1").Area3DStyle.Enable3D = False
Chart1.Legends(0).Enabled = True
Chart1.ChartAreas(0).AxisX.IntervalType = DateTimeIntervalType.Hours
End Sub
Private Shared Function GetData(query As String) As DataTable
Dim dt As New DataTable()
Dim cmd As New SqlCommand(query)
Dim constr As [String] = ConfigurationManager.ConnectionStrings("CIOSqlConnetionString").ConnectionString
Dim con As New SqlConnection(constr)
Dim sda As New SqlDataAdapter()
cmd.CommandType = CommandType.Text
cmd.Connection = con
sda.SelectCommand = cmd
sda.Fill(dt)
convertTojson(dt)
Return dt
End Function
#Region "Page Methods"
<webmethod()>
Public Shared Function convertToJson(ByVal dt As DataTable) As String
Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
Dim rows As New List(Of Dictionary(Of String, Object))()
Dim row As Dictionary(Of String, Object)
For Each dr As DataRow In dt.Rows
row = New Dictionary(Of String, Object)()
For Each col As DataColumn In dt.Columns
row.Add(col.ColumnName, dr(col))
Next
rows.Add(row)
Next
Return serializer.Serialize(rows)
End Function
#End Region
End Class
webservice1.asmx
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
Imports System.Data.SqlClient
Imports System.Web
Imports System.Data
Imports System.Collections.Specialized
Imports System.Collections.Generic
' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<System.Web.Services.WebService(Namespace:="http://tempuri.org/")>
<System.Web.Services.WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)>
<ToolboxItem(False)>
Public Class WebService1
Inherits System.Web.Services.WebService
<WebMethod()> _
Public Function convertToJson1() As String
Dim ds As DataSet = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteDataset(ConfigurationManager.ConnectionStrings("CIOSqlConnetionString").ConnectionString, CommandType.Text, "SELECT LTP,CONVERT(VARCHAR,DT,108) FROM LastRate Where Symbol='{0}'")
Dim dt As DataTable = ds.Tables(0)
Dim serializer As New System.Web.Script.Serialization.JavaScriptSerializer()
Dim rows As New List(Of Dictionary(Of String, Object))()
Dim row As Dictionary(Of String, Object)
For Each dr As DataRow In dt.Rows
row = New Dictionary(Of String, Object)()
For Each col As DataColumn In dt.Columns
row.Add(col.ColumnName, dr(col))
Next
rows.Add(row)
Next
Return serializer.Serialize(rows)
End Function
End Class
I am new in vb.net and also try to do charting. and i create database in which i take table which store all value with date and time.now i want to show that value on line by select in dropdown list. in this code i tried to do that thing but m not success.on x-axis only time show from that field which store both date and time and on y axis it shows ltp means last trade price which store in database.chart show as line up down and i also use one example of jqchart from jq widget but ther also erro in json that is internal error on Webservice1.asmx/converTojson" in url so please help me to solve this project. Its urgent please try top solev it and help it. i am new and i dont know where i m wrong so please help.
Submit an article or tip