Introduction
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.
Main Highchart Features
COMPATIBLE
It works in all modern mobile and desktop browsers including the iPhone/iPad and Internet Explorer from version 6. On iOS and Android, multitouch support provides a seamless user experience.
OPEN
One of the key features of Highcharts is that under any of the licenses, free or not, you are allowed to download the source code and make your own edits. This allows for personal modifications and a great flexibility.
PURE JAVASCRIPT
Highcharts is solely based on native browser technologies and doesn't require client side plugins like Flash or Java.
NUMEROUS CHART TYPE
Highcharts supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange and polar chart types. Many of these can be combined in one chart.
SIMPLE CONFIGURATION SYNTAX
Setting the Highcharts configuration options requires no special programming skills. The options are given in a JavaScript object notation structure, which is basically a set of keys and values connected by colons, separated by commas and grouped by curly brackets.
Export and print
With the exporting module enabled, your users can export the chart to PNG, JPG, PDF or SVG format at the click of a button, or print the chart directly from the web page.
Step 1-Installation
Highcharts requires three files to run, highcharts.js,exporting.js and jquery.min.js. exporting.js is an optional javascript file for exporting charts. you can download these files from here.
http://www.highcharts.com/download
Step 2-Create table in database
In real time, you may take records from more than one table using joins.Now for this demo,I am creating simple one table in database. We need to design a table in the database to get data from the database.
After completion of table design, enter some of the names and value in the table to work for our sample.
You can take script.sql file from download folder and execute in database. Now, we will create a web method
in the web service and we will use that method to call it from jQuery. You need to follow the steps given below.
Step 3-Create an ASP.NET Web Service
So add an .asmx page to the current solution and modify the code as in the following exampleusing System.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;using System.Data.SqlClient;namespace HighchartDemo.Services
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class HighchartService : System.Web.Services.WebService
{
public class FruitEnity
{
public string Name { get; set; }
public int Value { get; set; }
}
[WebMethod]
public List<FruitEnity> FruitAnalysis()
{
List<FruitEnity> fruitinfo = new List<FruitEnity>();
DataSet ds = new DataSet();
using (SqlConnection con = new SqlConnection("Data Source=XXXX;User Id=XXXX;
Password=XXXX;DataBase=XXXX"))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select name,value from tbl_fruitanalysis";
cmd.Connection = con;
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(ds, "FruitAnalysis");
}
}
}
if (ds != null)
{
if (ds.Tables.Count > 0)
{
if (ds.Tables["FruitAnalysis"].Rows.Count > 0)
{
foreach (DataRow dr in ds.Tables["FruitAnalysis"].Rows)
{
fruitinfo.Add(new FruitEnity { Name = dr["name"].ToString(),
Value = Convert.ToInt32(dr["value"]) });
}
}
}
}
return fruitinfo;
}
}
}
Step 4-Implement Jquery AJAX
First you need to drag and drop the jQuery library and high library in your ASPX page
$(document).ready(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Services/HighchartService.asmx/FruitAnalysis",
data: "{}",
dataType: "json",
success: function (Result) {
Result = Result.d;
var data = [];
for (var i in Result) {
var serie = new Array(Result[i].Name, Result[i].Value);
data.push(serie);
}
DreawChart(data);
},
error: function (Result) {
alert("Error");
}
});
});
function DreawChart(series) {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 1, plotShadow: false
},
title: {
text: 'fruit market shares at a specific month, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Fruit share',
data:series
}]
});
}
Output
Next article comming soon with drilldrown for column or pi chart.
Points of Interest
Don't forget to enable the attribute [System.Web.Script.Services.ScriptService], and add the [Web Method] attribute before the function definition in web service.
For highcharts documentation click here http://api.highcharts.com/highcharts
For highcharts Forum click here http://forum.highcharts.com
if you looking for DotNet Highchart(write in code behind) click here http://dotnethighcharts.codeplex.com
