Hello, I am trying to get started with Highcharts using Visual Studio, I am using VB and SQL and ASP.net
I found lots of php examples, but really need an example using the criteria above. Does anyone have an example of this. I think I would need to use a JSON file as well.
any help would be much appreciated
here is a old page I used to get started.
chartDev.aspx
<%@ Page Title="" Language="VB" MasterPageFile="~/dev.master" AutoEventWireup="false" CodeFile="chartdev.aspx.vb" Inherits="chartdev" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <script type="text/javascript"> $(document).ready(function () { var options = { chart: { renderTo: 'container', defaultSeriesType: 'column' }, title: { text: 'Leads Bought' }, xAxis: { categories: [] }, //['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] }, yAxis: { title: { text: 'Leads' } }, series: [] }; $.ajax({ type: "POST", dataType: "json", data: "{'somedata': 'showhourdata'}", contentType: "application/json; charset=utf-8", url: "chartdev.aspx/getChartData", success: function (response) { var obj = eval('(' + response.d + ')'); for (ob in obj) { var series = { data: [] }; if (obj[ob].SeriesName != null) { series.name = obj[ob].SeriesName; var odata = obj[ob].SeriesData.split(','); for (od in odata) { var cdata = odata[od].split('='); options.xAxis.categories.push(cdata[0]); series.data.push(parseFloat(cdata[1])); } } options.series.push(series); } chart = new Highcharts.Chart(options); }, cache: false, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown); } }); }); </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <div id="container"></div> </asp:Content>
Code behind:
Imports System.Web.Script.Serialization Imports System.Data Imports System.Data.SqlClient Imports System.Linq Partial Class chartdev Inherits System.Web.UI.Page <System.Web.Services.WebMethod()> _ Public Shared Function getChartData(ByVal somedata As String) As String Dim result As String = String.Empty Try Dim chartData As New List(Of chartSeriesData) Dim dtData As New DataTable dtData.Columns.Add("contractname") dtData.Columns.Add("solddate") dtData.Columns.Add("conversions") Select Case somedata.ToLower Case "showhourdata" For ls As Integer = 1 To 3 For i As Integer = 0 To 10 Dim nr As DataRow = dtData.NewRow nr(0) = String.Format("Test {0}", ls) nr(1) = Now.AddDays(i) nr(2) = (Now.Hour * i) * ls dtData.Rows.Add(nr) Next Next Case Else End Select Using dt As DataTable = dtData Dim contractData = From dr In dt.Rows _ Group dr By key = dr("contractName") Into Group _ Select ContractName = key, chartDataGroup = Group For Each c In contractData Dim cdata As New chartSeriesData With {.SeriesName = c.ContractName} Dim dayData As New List(Of String) For Each g As DataRow In c.chartDataGroup dayData.Add(String.Format("{0}={1}", Format(CDate(g("solddate").ToString), "MM/dd"), g("conversions").ToString)) Next cdata.SeriesData = Join(dayData.ToArray, ",") chartData.Add(cdata) Next End Using Dim oSerialize As New JavaScriptSerializer result = oSerialize.Serialize(chartData) Catch ex As Exception End Try Return result End Function Public Class chartSeriesData #Region "Fields" Private _SeriesData As String Private _SeriesName As String #End Region 'Fields #Region "Properties" Public Property SeriesData() As String Get Return _SeriesData End Get Set(ByVal value As String) _SeriesData = value End Set End Property Public Property SeriesName() As String Get Return _SeriesName End Get Set(ByVal value As String) _SeriesName = value End Set End Property #End Region 'Properties End Class End Class