Prerequisites
Good to have some experience with Highcharts plots, lectures here:
JavaScript Libraries – Charting
Summary
Covers downloading the correct libraries and setting them up. How to create highcharts plots in .NET using the libraries.
Topics Covered in this Video;
-Charting in .NET
-Chart Library
-Placing/Adding Chart data to Project
-References
-Plotting
-Creating Axis Items
Video
Reference Materials
http://highcharts.codeplex.com/ – The library for adding Highcharts
http://msdn.microsoft.com/en-us/library/system.collections.generic.aspx – Collections, important to using HighCharts
http://www.highcharts.com/ – Highcharts web site.
PlotExample.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="PlotExample.aspx.cs" Inherits="SampleApplicationCOP4834.Pages.PlotExample" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.7.1.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
<highchart:LineChart runat="server" ID="hcLine" Width="500" Height="400" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
</asp:Content>PlotExample.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Highchart.UI;
using Highchart.Core;
using Highchart.Core.Data.Chart;
using Highchart.Core.PlotOptions;
namespace SampleApplicationCOP4834.Pages
{
public partial class PlotExample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//Defining Axis
hcLine.YAxis.Add(new YAxisItem { title = new Title("Future") });
hcLine.XAxis.Add(new XAxisItem { categories = new[] { "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();
}
}
}