ASP.Net Web Forms and CanvasJS

[JMcCarthy]

My university is looking for a web charting tool that allows the university to “stand out” on charts/graphs. In the past, we’ve manually customized Excel charts to highlight USF and presented the data in a printed book (see examples below). We are building a website take the place of the book. The ASP.Net Web Form website pulls from a Microsoft SQL Server database. The charts are in a .aspx file with the code file in the aspx.cs file, which is written in C#.

Bar chart example from Excel:

Line chart example from Excel:

I’ve tried looking up the following in the forums but can’t find anything relevant to ASP.Net Web Forms.

1) Can CanvasJS use a data table created in C# from a SQL Server query? If so, how? In other words, how do I pass the data table contents to the javascript code?

The C# code in the aspx.cs file:

    public void BuildDataTable()
    {
        string panda_db = ConfigurationManager.ConnectionStrings["panda_db"].ConnectionString;  // stored in web.config file

        SqlConnection conn = new SqlConnection(panda_db);

        conn.Open();

        string query = "SELECT  InstitutionName, DataValue FROM dbo.EXT_DataValues where SourceVariableName = 'Total Student Headcount' and StandardYear = '2013' order by InstitutionName";

        SqlCommand cmd = new SqlCommand(query, conn);

        dtHeadCount = new DataTable();

        using (SqlDataAdapter a = new SqlDataAdapter(cmd))
        {
            try
            {
                a.Fill(dtHeadCount);
            }
            catch (Exception ex)
            {
                lblStatus.Text = ex.ToString();
            }
        }
    }

2) Will CanvasJS allow me to change the color and other attributes of a specific bar or line in a chart, see URL above for examples? If so, how? How do I cycle through the data to find “USF” and change only its bar or line attributes?

Any help would be appreciated!