The sample solution using High Chart withy C# is as follows:
.ASPX File:
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<%@ Register Assembly="Highchart" Namespace="Highchart.UI" TagPrefix="highchart" %>
<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1" runat="Server" xmlns:asp="#unknown">
<style>
body
{
margin: 0;
background-color: #FFF; /*#369*/
overflow: auto;
}
#content
{
background: #FFF; /*369*/
height: 880px;
width: 950px;
position: relative;
top: 1200px;
z-index: 0;
}
#caption
{
position: relative;
top: -60px;
color: #FFF;
font-size: 25px;
font-family: "Lucida Sans Unicode" , "Lucida Grande" , sans-serif;
}
#pagecaption
{
position: relative;
top: -60px;
color: #FFF;
font-size: 25px;
font-family: "Lucida Sans Unicode" , "Lucida Grande" , sans-serif;
}
</style>
<!--buttons-->
High Chart Samples
<asp:label id="Label1" runat="server" text="Line Chart">
<highchart:linechart id="hcLinechart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
|
<asp:label id="Label2" runat="server" text="Column Chart">
<highchart:columnchart id="hcColumnChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
|
<asp:label id="Label3" runat="server" text="Pie Chart">
<highchart:piechart id="hcPieChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
|
<asp:label id="Label4" runat="server" text="Area Spline Chart">
<highchart:areasplinechart id="hcAreaSplineChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
|
<asp:label id="Label5" runat="server" text="Line Chart">
<highchart:linechart id="hcLineChartTheme" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
|
<asp:label id="Label6" runat="server" text="Scatter Chart">
<highchart:scatterchart id="hcScatterChart" runat="server" width="300" height="300" xmlns:highchart="#unknown" />
|
Code Behind File (.cs):
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Highchart.Core;
using Highchart.Core.Data.Chart;
using Highchart.Core.PlotOptions;
using Highchart.Core.Appearance;
using System.IO;
public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
try
{
#region Line chart
// Title
hcLinechart.Title = new Title("Rating Details");
//Defining Axis
hcLinechart.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
hcLinechart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });
//New data collection
//var series = new Collection<serie>();
var series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 } });
//bind data to chart
hcLinechart.DataSource = series;
hcLinechart.DataBind();
#endregion
#region Column chart
hcColumnChart.Title = new Title("Rating Details");
hcColumnChart.SubTitle = new SubTitle("Source: AiMedia Live");
// Axis
hcColumnChart.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
hcColumnChart.XAxis.Add(new XAxisItem
{
categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" }
});
// Data
series = new List<serie>();
series.Add(new Serie
{
name = "Items",
data = new Object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }
});
hcColumnChart.PlotOptions = new PlotOptionsColumn { borderColor = "#dedede", borderRadius = 4 };
hcColumnChart.Tooltip = new ToolTip("'
'+ this.series.name +'' + this.x + ': '+ this.y +''");
// Bind
hcColumnChart.DataSource = series;
hcColumnChart.DataBind();
#endregion
#region Pie chart
hcPieChart.Title = new Title("Rating Details");
//Data
series = new List<serie>();
series.Add(new Serie
{
size = 130,
data = new object[] {
new object[] { "ACVM2908U", 9.28 },
new object[] { "ACVM4998U", 6.21 },
new object[] { "ACVS3109W", 11.73 },
new object[] { "ACVS3308W", 10.18 },
new object[] { "ACVS3509W", 12.51 },
new object[] { "ACVM2808U", 10.37 },
new object[] { "ACVM4908U", 10.18 },
new object[] { "ACVM4708U", 10.18 },
new object[] { "ACVS4109W", 10.24 },
new object[] { "ACVS3107W", 9.12 }
}
});
hcPieChart.PlotOptions = new PlotOptionsPie
{
allowPointSelect = true,
cursor = "pointer",
dataLabels = new DataLabels { enabled = true }
};
hcPieChart.Tooltip = new ToolTip("'
'+ this.point.name +': '+ this.y +' %'");
hcPieChart.Theme = "pink-floral";
// Bind
hcPieChart.DataSource = series;
hcPieChart.DataBind();
#endregion
#region Area Spline chart
//Title
hcAreaSplineChart.Title = new Title("Rating Details");
//definining axis
hcAreaSplineChart.YAxis.Add(new YAxisItem { title = new Title("Rating Details") });
hcAreaSplineChart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });
//Data
series = new List<serie>();
series.Add(new Serie { name = "Ratings", data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 } });
hcAreaSplineChart.PlotOptions = new PlotOptionsAreaSpline { stacking = Stacking.normal, fillOpacity = 0.3 };
//customizing the tooltip
hcAreaSplineChart.Tooltip = new ToolTip("this.x +': '+ this.y +''");
//customizing the legend
hcAreaSplineChart.Legend = new Legend
{
layout = Layout.horizontal,
borderWidth = 3,
align = Align.center,
verticalAlign = Highchart.Core.VerticalAlign.bottom,
shadow = true //,
//backgroundColor = "#e3e6be"
};
//bind
hcAreaSplineChart.DataSource = series;
hcAreaSplineChart.DataBind();
#endregion
#region Line chart - theme
hcLineChartTheme.Title = new Title("Rating Details");
//hcLineChartTheme.SubTitle = new SubTitle("Gross Revenue");
//Defining Axis
hcLineChartTheme.YAxis.Add(new YAxisItem { title = new Title("Ratings") });
//hcLineChartTheme.XAxis.Add(new XAxisItem { categories = new[] { "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002" } });
hcLineChartTheme.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });
//New data collection
//var series = new Collection<serie>();
series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }, name = "Ratings" });
//series.Add(new Serie { data = new object[] { 254, 402, 576, 85, 257, 684, 601, 410, 543 }, name = "Clothing" });
//series.Add(new Serie { data = new object[] { 125, 471, 247, 120, 397, 451 }, name = "Sports" });
hcLineChartTheme.Theme = "gray";
hcLineChartTheme.Legend = new Legend { align = Align.center, layout = Layout.horizontal, verticalAlign = Highchart.Core.VerticalAlign.bottom, borderWidth = 0 };
//hcLineChartTheme.Appearance = new Appearance { marginBottom = 30, marginRight = 130, borderRadius = 15 };
//bind data to chart
hcLineChartTheme.DataSource = series;
hcLineChartTheme.DataBind();
#endregion
#region Scatter chart - theme
hcScatterChart.Title = new Title("Rating Details)");
//hcScatterChart.SubTitle = new SubTitle("Gross Revenue");
//Defining Axis
hcScatterChart.YAxis.Add(new YAxisItem { title = new Title("Rating Details") });
hcScatterChart.XAxis.Add(new XAxisItem { categories = new[] { "ACVM2908U", "ACVM4998U", "ACVS3109W", "ACVS3308W", "ACVS3509W", "ACVM2808U", "ACVM4908U", "ACVM4708U", "ACVS4109W", "ACVS3107W" } });
//New data collection
//var series = new Collection<serie>();
series = new List<serie>();
series.Add(new Serie { data = new object[] { 299, 200, 378, 328, 403, 334, 328, 328, 330, 294 }, name = "Ratings" });
series.Add(new Serie { data = new object[] { 400, 435, 446, 479, 554, 634, 687, 750, 831 }, name = "Rating 2" });
hcScatterChart.Theme = "gray";
hcScatterChart.Legend = new Legend { align = Align.center, layout = Layout.horizontal, verticalAlign = Highchart.Core.VerticalAlign.bottom, borderWidth = 0 };
//hcLineChartTheme.Appearance = new Appearance { marginBottom = 30, marginRight = 130, borderRadius = 15 };
//bind data to chart
hcScatterChart.DataSource = series;
hcScatterChart.DataBind();
#endregion
}
catch (Exception)
{
}
finally
{
DeleteImages();
}
}
}
// Method to delete temporary png files
private void DeleteImages()
{
string str = "";
try
{
str = AppDomain.CurrentDomain.BaseDirectory;
if (!String.IsNullOrEmpty(str))
{
DirectoryInfo d = new DirectoryInfo(str);//Assuming Test is your Folder
FileInfo[] Files = d.GetFiles("*.png"); //Getting Text files
foreach (FileInfo file in Files)
{
string temp = str + file;
if (temp.EndsWith("png"))
{
File.Delete(temp);
}
}
}
}
catch (IOException ee)
{
}
}
}