Pass Array to Javascript Array C# ASP.NET

Question

I have an array which I stored from my database(number are 8.00 and 9.00) in my page_load in c# which i want to pass into JavaScript to plot a High chart. I follow all the example that's given by Stack overflow but I will get error. Am I doing something wrong?

C#

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Script.Serialization;


public partial class Highchart : System.Web.UI.Page
{
    public String _Result { get; set; }

    protected void Page_Load(object sender, EventArgs e)
    {
        //Set the course object here
        ArrayList Course = new ArrayList();
        const string connectionString = "Data Source=localhost;" + "Initial Catalog=IBBTS_DB; Integrated Security =SSPI";
        const string query = "SELECT X from accelerometerReading";
        using (SqlConnection cn = new SqlConnection(connectionString))
        {
            using (SqlCommand cm = new SqlCommand(query, cn))
            {
                cn.Open();
                SqlDataReader reader = cm.ExecuteReader();
                while (reader.Read())
                {
                    Course.Add(reader.GetDecimal(0));
                }
            }
        }
        _Result = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Course);
    }
}

JavaScript

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
             <script type="text/javascript" src="~/js/highcharts.js"></script>
  <script type="text/javascript" src="~/js/modules/exporting.js"></script>
                <div id="container" style="width:100%; height:400px;">
<script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            <% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); %>
            var jsVariable = <%= serializer.Serialize(Course) %>;
            series: [{
                name: 'X axis',
                data: jsVariable
            }, {
                name: 'Y Axis',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

            }]
        });
    });



</script>

I will get a blank page when while a compile it.

This is the updated one with the line

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Highchart.aspx.cs" Inherits="Highchart" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
             <script type="text/javascript" src="~/js/highcharts.js"></script>
  <script type="text/javascript" src="~/js/modules/exporting.js"></script>
                <div id="container" style="width:100%; height:400px;">
<script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20
            },
            xAxis: {
                categories: ['Jan', 'Feb']
            },
            yAxis: {
                title: {
                    text: 'Temperature (°C)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '°C'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            var javaVariable = <%= _Result %>
            series: [{
                name: 'X axis',
                data: javaVariable 
            }, {
                name: 'Y Axis',
                data: [-0.2, 0.8]

            }]
        });
    });
</script>
    </div>
    </form>
</body>
</html>

User2012384 · Accepted Answer · 2015-11-11 08:36:54Z

1

Try creating a property named "_Result" for that:

In code behind:

//Add this line
public  String _Result {get;set;}

protected void Page_Load(object sender, EventArgs e)
{
    //Set the course object here
    ArrayList Course = new ArrayList();     
    const string connectionString = "Data Source=localhost;" + "Initial Catalog=IBBTS_DB; Integrated Security =SSPI";
    const string query = "SELECT X from accelerometerReading";
    using (SqlConnection cn = new SqlConnection(connectionString))
    {
        using (SqlCommand cm = new SqlCommand(query, cn))
        {
            cn.Open();
            SqlDataReader reader = cm.ExecuteReader();
            while (reader.Read())
            {
                Course.Add(reader.GetDecimal(0));
            }
        }
    }
    _Result = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Course);
}

Then in the markup page:

var javaVariable = <%= _Result %>

This error message shows because "Course" is not a global variable, so markup page is unable to access "Course" object.

edited Nov 11, 2015 at 8:36

answered Nov 11, 2015 at 6:39

User2012384

4,92717 gold badges73 silver badges107 bronze badges

There is no error anymore but when I compile, it give me a blank page. The chart is not being created at all but if I remove the serializer and add in the number manually, the chart is being created when I compile the page. - @User2012384

Zaki Ahmad Sahri
– Zaki Ahmad Sahri

11/11/2015 06:52:34
Commented Nov 11, 2015 at 6:52
@ZakiAhmadSahri Did the "Course" value correctly bind to the markup code? If not, try changing <%= to <%#

User2012384
– User2012384

11/11/2015 06:53:38
Commented Nov 11, 2015 at 6:53
It will give me an error when I did that. I've edited my javascript coding on how I plot the graph. Maybe there's error that I didn't notice from there you can help out.

Zaki Ahmad Sahri
– Zaki Ahmad Sahri

11/11/2015 07:00:13
Commented Nov 11, 2015 at 7:00
i had edited my codes but when i compile it still can't display the chart @User2012384

Zaki Ahmad Sahri
– Zaki Ahmad Sahri

11/11/2015 07:41:24
Commented Nov 11, 2015 at 7:41
1

It's okay. The problem is fix already. Thanks alot. Really appreciate it. @User2012384

Zaki Ahmad Sahri
– Zaki Ahmad Sahri

11/11/2015 10:04:00
Commented Nov 11, 2015 at 10:04

| Show 6 more comments

Collectives™ on Stack Overflow

Pass Array to Javascript Array C# ASP.NET

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related