dotnet HighCharts inside UpdatePanel

Read my article about the HighCharts.net databind?

A frequently question regards the possibility to get functioning a dotnet.HighCharts chart inside and updatepanel.

I’m speaking about the webform C# environement.

The solution to this problem is very simple, so read the following articole to know how to deal with this problem.

As usual you’ll find the complete code in my bitbucket repository.

Let’s start.

Objective of this tutorial.

Referring to our pizzaDB I want a chart of all the kind of pizza eaten per month. Also I want the possibility to chose a specific type refreshing the chart.

The chart itself is placed inside an updatepanel in order to avoid a page reload.

The Code

Let’s place a dropdown, a button and a literal for the chart rendering inside an updatepanel,

<asp:UpdatePanel ID="updPanel" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="cmbPizza" DataSourceID="sqlPizza" DataTextField="pizza" DataValueField="pizza" OnDataBound="cmbPizza_DataBound" runat="server"></asp:DropDownList>
        <asp:Button ID="btnRefresh" Text="Refresh" OnClick="btnRefresh_Click" runat="server" />
        <div>
            <asp:Literal ID="chrtMyChart" runat="server"></asp:Literal>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

Obviously we should have loaded the highchart js components (see here on how to do)

The dropdown is filled by a datasource (sqlPizza) that asks the database gathering the pizza’s names.

<asp:SqlDataSource ID="sqlPizza" runat="server"
    ConnectionString="<%$ ConnectionStrings:exportDB %>"
    SelectCommand="SELECT distinct pizza from pizzaDB order by pizza"></asp:SqlDataSource>

Since I want to add the possibility to chose all the kind of pizza, I’ve added a onDatabound handler to the dropdown control: OnDataBound=”cmbPizza_DataBound”

Every time the dropdown cmbPizza is bounded, the cmbPizza_Databound method is called.

The method itself add a new item with Text=”All” and Value=”%” an the top of the dropdown.

protected void cmbPizza_DataBound(object sender, EventArgs e)
{
    cmbPizza.Items.Insert(0, new ListItem("All", "%"));
    cmbPizza.SelectedIndex = 0;
    cmbPizza.SelectedValue = "%";
}

We will use this % in the select query.

string commandText = "select period, count(pizza) from pizzaDB where pizza like @pizza group by period order by period";
SqlCommand myComm = new SqlCommand(commandText, myConn);
// Open the connection
myConn.Open();
myComm.Parameters.Add("@pizza", SqlDbType.VarChar).Value = pizza;
// and execute the query
SqlDataReader reader = myComm.ExecuteReader();

The pizza parameter has passed to the Render_Chart method

protected void Render_Chart(string pizza)
{
    ...
}

Until here all is quite clear and usual.

The UpdatePanel magic

The magic is inside the Page_Load method.

Remember my article about the C# sql editor? I’ve yet spoken about the controls inside an updatepanel and the necessity to place a trigger for each controls that we want to fire.

Here the mechanism is the same

So, let’s register the postback triggers for the btnRefresh and the cmbPizza controls inside the Page_Load method:

protected void Page_Load(object sender, EventArgs e)
{
    ScriptManager.GetCurrent(this).RegisterPostBackControl(btnRefresh);
    ScriptManager.GetCurrent(this).RegisterPostBackControl(cmbPizza);
    Render_Chart("%");
}

Note: the trigger must be registered as PostBack and not as AsyncPostBack!

Now the chart will be rendered correctly.

Read also this example in wich I show how to update the chart every N seconds.

You can find the complete example in my bitbucket repository (click on the image)

I hope you can find useful this article.

Feel free to post comments or to ask me for additional info.