Click here to Skip to main content
15,895,084 members
Please Sign up or sign in to vote.
1.80/5 (2 votes)
Hello Friends...

I m working with high-charts, I refer its examples in that data is hard coded. That's why it shows correct data on charts. but in my case, Data comes from SQL Server as follows

XML
public partial class Default : System.Web.UI.Page
    {
        public List<string> ObjMonthList = new List<string>();
        public List<decimal> ObjMumbaiValues = new List<decimal>();
        public List<decimal> ObjNewYorkValues = new List<decimal>();
        public List<decimal> ObjBerlinValues = new List<decimal>();
        public JavaScriptSerializer ObjJavaScriptSerializer = new JavaScriptSerializer();

        protected void Page_Load(object sender, EventArgs e)
        {
            GetData();
        }

        void GetData()
        {
            SqlConnection ObjConnection = new SqlConnection("Data Source=abc; Initial Catalog=test; Integrated Security=True;");
            SqlDataAdapter ObjDataAdapter = new SqlDataAdapter("select * from test", ObjConnection);
            DataTable ObjTable = new DataTable();
            ObjDataAdapter.Fill(ObjTable);
            GridView1.DataSource = ObjTable;
            GridView1.DataBind();

            for (int i = 0; i < ObjTable.Rows.Count; i++)
            {
                ObjMonthList.Add(ObjTable.Rows[i][0].ToString());
            }


        }
    }


I have passed ObjMonthList to Javascript as follows

var monthnames = <%=ObjJavaScriptSerializer.Serialize(ObjMonthList) %>;

It shows data in monthnames as follows

C#
var monthnames = ["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"];

        $(function () {
            $('#container').highcharts({
                title: {
                    text: 'Monthly Average Temperature',
                    x: -20 //center
                },
                subtitle: {
                    text: 'Source: WorldClimate.cyesom',
                    x: -20
                },
                xAxis: {
                    categories: monthnames
                },
                yAxis: {
                    title: {
                        text: 'Temperature (°C)'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: '°C'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [{
                    name: 'Tokyo',
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'New York',
                    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]
                }, {
                    name: 'Berlin',
                    data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
                }, {
                    name: 'London',
                    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
            });
        });


But it doesn't show data in categories. it shows only variable name as follows

C#
xAxis: {
                   categories: monthnames
               },


Please help me.
Posted
Comments
Sinisa Hajnal 1-Oct-15 9:18am    
What does documentation say?
ZurdoDev 1-Oct-15 11:15am    
Make sure your setting the data in C# properly.
Moykn 2-Oct-15 10:23am    
Can't see the problem:
http://jsfiddle.net/moykn/1a8b15hx/
What exacly do you expect on the output?

1 solution

if u use on single quotes for array values
ex:
C#
ar A = ['Sunday','Monday','Tuesday','Wednesday','Thursday']
array = A + ""
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900