Creating a Popup Plot with Highcharts

Prerequisites

Should be familiar with AJAX, and programming in .NET using C# (including properties, methods)

Summary

Demonstrates using the Highcharts.NET library and a Modal Popup extender to create a popup user control.

Topics Covered in this Video;

-Plotting
-Installing Highchart .NET
-Test plot routine
-References
-namespaces
-Popup controls
-Codebehind
-Titles within Charts
-Object Arrays within Charts
-Binding Data

Video

Reference Materials

TestPlotRoutine.aspx

<%@ Page Title=”” Language=”C#” MasterPageFile=”~/Site.Master” AutoEventWireup=”true” CodeBehind=”TestPlotRoutine.aspx.cs” Inherits=”SMADA2013.Pages.TestPlotRoutine” %>
<asp:Content ID=”Content1″ ContentPlaceHolderID=”HeadContent” runat=”server”>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”FeaturedContent” runat=”server”>
<highchart:LineChart id=”hcLine” runat=”server” Width=”500″ Height=”350″ />
</asp:Content>
<asp:Content ID=”Content3″ ContentPlaceHolderID=”MainContent” runat=”server”>
</asp:Content>

TestPlotRoutine.aspx.cs

using System;
using System.Collections.Generic;
using Highchart.Core;
using Highchart.Core.Data.Chart;

namespace SMADA2013.Pages
{
    public partial class TestPlotRoutine : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            hcLine.YAxis.Add(new YAxisItem { title = new Title(“Faturamento”) });
            hcLine.XAxis.Add(new XAxisItem { categories = new String[]{ “1994”, “1995”, “1996”, “1997”, “1998”, “1999”, “2000”, “2001”, “2002” } });

            //New data collection
            var series = new List<Serie>();
            series.Add(new Serie { data = new object[] { 400, 435, 446, 479, 554, 634, 687, 750, 831 } });

            //bind
            hcLine.DataSource = series;
            hcLine.DataBind();
            hcLine.Visible = true;

        }
    }
}

ucPlotWindow.aspx

<%@ Control Language=”C#” AutoEventWireup=”true” CodeBehind=”ucPlotWindow.ascx.cs” Inherits=”SMADA2013.UserControls.ucPlotWindow” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”ajax” %>

    <asp:Button ID=”btnPlot” runat=”server” Text=”Plot” CausesValidation=”false” />

    <ajax:modalpopupextender id=”ModalPopupExtender1″ runat=”server”
        TargetControlID=”btnPlot” PopupControlID=”Panel1″
        CancelControlID =”btnDonePlot” backgroundcssclass=”ModalPopupBG”>
    </ajax:modalpopupextender>

    <asp:panel id=”Panel1″ style=”display: none” runat=”server”>
   <div class=”PopupPanel”>
                <div class=”PopupHeader” id=”PopupHeader”>Plot Window</div>
                <div class=”PopupBody”>
                     <highchart:LineChart id=”hcLine” runat=”server” Width=”1000″ Height=”550″ /><br/>
                    <div style=”text-align: center;” ><asp:Button ID=”btnDonePlot” runat=”server” Text=”Done” /></div>
                </div>
        </div>
    </asp:panel>

ucPlotWindow.aspx.cs

using System;
using System.Collections.Generic;
using Highchart.Core;
using Highchart.Core.Data.Chart;

namespace SMADA2013.UserControls
{
    public partial class ucPlotWindow : System.Web.UI.UserControl
    {
        List<Serie> series = new List<Serie>();

        public string Title
        {
            set
            {
                hcLine.Title = new Title(value);
            }
        }

        public string SubTitle
        {
            set
            {
                hcLine.SubTitle = new SubTitle(value);
            }
        }

        public string YAxisTitle
        {
            set
            {
                hcLine.YAxis.RemoveAll(item => item.id == “Title”);
                hcLine.YAxis.Add(new YAxisItem { title = new Title(value), id = “Title”});
            }
        }

        public object[] XAxisValues
        {
            set
            {
                hcLine.XAxis.RemoveAll(item => item.id == “Values”);
                hcLine.XAxis.Add(new XAxisItem
                {
                    categories = value,
                    id = “Values”
                });
            }
        }

        public void AddYAxisValues(string legend, object[] value)
        {
                series.Add(new Serie { name = legend, data = value });
        }

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

        public void DataBind()
        {
            hcLine.DataSource = series;
            hcLine.DataBind();
            hcLine.Visible = true;
        }
    }
}

Additional Information

http://highcharts.codeplex.com/ – Highcharts .NET at Codeplex (library used in this video)

http://dotnethighcharts.codeplex.com/ – DOTNET.Highcharts at Codeplex ( a different library shown in video at Lecture – Using Highcharts in DOTNET

http://www.highcharts.com/ – Highcharts.COM library

http://msdn.microsoft.com/en-us/library/bfcke1bz.aspx – Documentation for Predicates

http://stackoverflow.com/questions/556425/predicate-delegates-in-c-sharp – great simple explanation of a predicate.

http://ajaxcontroltoolkit.codeplex.com/ – AJAX Control Toolkit

http://www.codeproject.com/Articles/34996/ASP-NET-AJAX-Control-Toolkit-ModalPopupExtender-Co– Great documentation of some interesting things you can do with a Modal Popup Extender.