passing json values to highcharts from .net code behind

Question

var Javascriptxvalue= $.parseJSON($("#hdnXaxis").val());
var Javascriptyvalue= $.parseJSON($("#hdnYaxis").val());  

$(document).ready(DrawMyGraph1);
      function DrawMyGraph1() {

       chart = new Highcharts.Chart(
       {
        chart: {
            type: 'column',
            renderTo: 'container3',
            defaultSeriesType: 'area'

        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: Javascriptxvalue,
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'No of Patients'
            }
        },

        credits: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return this.series.name + ' - ' + Highcharts.numberFormat(this.y, 0);
            }
        },
        series: Javascriptyvalue
    });

}

c# code void FastMovingStocksBarChart(string date1, string date2, string selperiod, string sql) { DataSet dschart = new DataSet(); dschart = _obj_MIS.DoctorpatientreportChart(date1, date2, selperiod,sql); List lstXaxis = new List(); List lstcolors = new List();

    lstcolors.Add("#3366DD");
    //lstcolors.Add("#FFEE22");
    //lstcolors.Add("#33BBCC");
    lstcolors.Add("#CC0022");
    //lstcolors.Add("#FF0000");
    lstcolors.Add("#339900");
    lstcolors.Add("#FF7700");
    lstcolors.Add("#33BBCC");
    lstcolors.Add("#99EEEE");
    lstcolors.Add("#6699FF");
    lstcolors.Add("#9966BB");
    lstcolors.Add("#99BB66");
    lstcolors.Add("#FF7700");
    lstcolors.Add("#FFEE22");
    lstcolors.Add("#FFCBB9");
    lstcolors.Add("EAEC93");
    lstcolors.Add("D7FBE6");
    lstcolors.Add("FFCACA");

    for (int i = 0; i < dschart.Tables[0].Rows.Count; i++)
    {
        lstXaxis.Add(dschart.Tables[0].Rows[i]["Doctor Name"].ToString());

    }
    List<ChartEx> lstseries = new List<ChartEx>();
    int count = 0;
    for (int i = 0; i < dschart.Tables[0].Rows.Count; i++)
    {

        ChartEx oEx = new ChartEx();
        oEx.name = dschart.Tables[0].Rows[i]["Doctor Name"].ToString();
        //oEx.data.Add(Convert.ToInt32(dschart.Tables[0].Rows[i]["Patients"]));
        oEx.data = new List<int>() { Convert.ToInt32(dschart.Tables[0].Rows[i]["Patients"]) };
        oEx.color = lstcolors[count];
        lstseries.Add(oEx);

        count++;
        if (count >= lstcolors.Count)
         count = 0; 


    }
    //Convert X axis data to JSON
    JavaScriptSerializer oSerializer1 = new JavaScriptSerializer();
    hdnXaxis.Value = oSerializer1.Serialize(lstXaxis);




    //Convert Y axis data to JSON
    JavaScriptSerializer oSerializer2 = new JavaScriptSerializer();
    hdnYaxis.Value = oSerializer1.Serialize(lstseries);

}

I am not getting the values for "Javascriptxvalue" and "Javascriptyvalue" inside the chart function

can anyone help me

Regards Prabhu

Answer 1

Presumably, 'hdnXaxis' is the id of a HiddenFieldControl server control? Perhaps the id is not what you think

var Javascriptxvalue= $.parseJSON($("#"+ <%= hdnXaxis.ClientId %>).val());

Instead of passing strings via an input, you could use server tags to directly inject the values into the page. Like this:

<%= "alert('" + MyPublicProperty + "')" %>

This should alert you to the value of the property defined in your code behind. You could then set it to a js variable like so:

<%= "var Javascriptxvalue = '" + xProperty + "';"  %>

You will need to run this bit of code directly in an aspx/ascx/razor page to set the variables though, I think it's better than relying on a control with a particular id though.