Search code examples
asp.netarraysvb.netdatatabletypeconverter

putting array from vb codebehind into javascript datatable


So I'm trying to use this javascript with my asp.net website https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart

I have an array in codebehind that has my data which i converted to a multidimensional datatable like this.

<in codebehind vb>
Public Property datat As DataTable

For outerIndex As Integer = 0 To 2
    Dim newRow As DataRow = table.NewRow()
    For innerIndex As Integer = 0 To 2
            newRow(innerIndex) = Array(outerIndex, innerIndex)
    Next
    table.Rows.Add(newRow)
Next

datat = table

<in asp>

function drawChart() {
    var data = <%=datat%>

I always get an error datatable not defined.

My new work

<in asp>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawcharts);
    function drawcharts() {
        var data = google.visualization.arrayToDataTable([
            ['X', 'MW'],
      [<%=mwtimepublic%>, <%=mwarraypublic%>]
        ]);

        var options = {
            title: 'MW Trend'
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    });
</script>

Public Function Dtable() As DataTable Dim startdate As String Dim enddate As String

    If FirstRun = False Then
        datat.Clear()
    End If

    If FirstRun = True Then
        FirstRun = False
        enddate = Date.Today
        startdate = DateAdd(DateInterval.Day, -20, Date.Today)
    Else
        enddate = TextBox2.Text
        startdate = TextBox1.Text
    End If

'<confidential code></confidentialcode>

    Dim mwaray(pdata.Count)
    Dim mwtime(pdata.Count)
    Dim table As New DataTable
    table.Columns.Add("X")
    table.Columns.Add("MW")
    Dim i As Integer
    Dim x As Integer
    For i = 1 To pdata.Count
        mwaray(i) = pdata(i).Value
        If mwaray(i) > upperlimit Then
            upperlimit = mwaray(i) + 50
        End If
    Next

    For i = 1 To pdata.Count
        mwtime(i) = "'" & pdata(i).TimeStamp.LocalDate.Month.ToString() & "/" & pdata(i).TimeStamp.LocalDate.Day.ToString() & "/" & pdata(i).TimeStamp.LocalDate.Year.ToString() & " " & pdata(i).TimeStamp.LocalDate.TimeOfDay.Hours.ToString() & ":" & pdata(i).TimeStamp.LocalDate.TimeOfDay.Minutes.ToString() & ":" & pdata(i).TimeStamp.LocalDate.TimeOfDay.Seconds.ToString() & "'"
    Next

    For i = 1 To pdata.Count
        mwarraypublic.Add(mwaray(i))
    Next

    For i = 1 To pdata.Count
        mwtimepublic.Add(mwtime(i))
    Next

End Function

I'm still not getting the chart to draw


Solution

  • I made a video on how to create a jquery ui autocomplete while getting an array to javascript from codebehind

    skip to 6:00 to see how I made the array http://www.youtube.com/watch?v=ULHSqoDHP-U&list=UUgtKyNvllU9E6c2Mi8OtzCQ&index=6&feature=plcp

    PageMethods.YourWebMethod(function(results){
      var data = resluts;
      //the rest of your code goes here...
    });
    

    update:


    Google actually converts an array of arrays into a datatable. In other words, you have to return an array of rows, and the rows them self are an array of column values.

    So in you code behind you do the following first import webservices

    Imports System.Web.Services
    

    then create your webmethod with a function that returns an arraylist

    <WebMethod()>
    Public Shared Function Dtable() As ArrayList
    dim table As New ArrayList
    Dim YourDataSetTable as new Dataset.YorDataTable
    'fill you table here
    
    'first get column names as the first row/array
    dim colNames as New ArrayList
    
    For Each col as DataColumn in YourDataSetTable.Columns
       colNames.Add(col.ColumnName)
    Next
    table.Add(colNames)
    
    'then on to the data
    For Each r as DataRow in YourDataSetTable .Rows
      dim colVals as New ArrayList
      For Each col as DataColumn in YourDataSetTable.Columns
        colVals.Add(r.Item(col.ColumnName))
      Next
      table.Add(colVals)
    Next
    Return table
    End Function
    

    Then in javascript

    PageMethods.Dtable(function(results){
      var data = resluts;
      //the rest of your code goes here...
    });
    

    make sure you have a script manager on the page with pagemethods enabled.