In this jquery tutorial you will learn how to develop charts and graphs for your website using jquery and charting library the HighCharts. It doesn't matter in which programming language you are developing your website; using Highcharts it's very easy to add interactive charts to your website. Following is the screen shot of the Chart that we will learn to implement. You can develop any sort of chart and graph depend upon your requirements, it doesn't matter how complex the chart or graph you want to develop, using Highcharts every complex chart is easy to develop :-)

Charts and graphs using jquery and charting library the HighCharts

Why HighCharts?

1) Highcharts is cross browser compatible. Even supported in Iphone/Ipad.

2) Easy to integrate.

3) Easy to use.

4) It's free for non commercial use.

5) Highcharts is solely based on native browser technologies and doesn't require any client side plugins like Flash Player or Java.

6) Highcharts supports column, line, spline, area, areaspline, bar, pie and scatter chart types. Further more, you can combine any of these in one chart.

7) Simple Configuration Syntax.

8) Export and Print facility.

To know about more features, please visit www.highcharts.com.

How to develop charts and graphs using Highcharts?

As I have already told you that highcharts is very easy to use. It requires two js files to run: The highcharts.js core and either the jquery or the MooTools framework.

Now let's begin. Go to www.highcharts.com, click on Demo Gallery link and then on left side of the page you will find numerous types of charts, click anyone of them, it will lead you to a webpage in which you will see your desired chart that you want to integrate in your website. Under chart you will see the View Options button, click on that button and you will get the code that you have to copy/paste in your webpage to integrate that chart in your website. Before copy/paste that code, please add jquery file, highcharts library and a div in your webpage code. Give an id to that div because chart will be embedded in that div. Now Let's have a look over the following example.

Highcharts.html

view plainprint?
<html>  
<head>  
<title>Using Highcharts to integrate charts and graphs in your webpage</title>  
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>  
<script type="text/javascript" src="highcharts.js"></script>  
<script type="text/javascript">  
var chart = null;  
var _MyArray = new Array(13, 25, 32);  
var _MyArray2 = new Array(8, 14, 54);  
$(document).ready(function () {  
chart = new Highcharts.Chart({  
chart: {  
renderTo: 'container',  
defaultSeriesType: 'column'  
},  
title: {  
text: 'Fruit Consumption'  
},  
xAxis: {  
categories: ['Apples', 'Oranges', 'Mangos']  
},  
yAxis: {  
title: {  
text: 'Fruit eaten'  
}  
},  
series: [{  
name: 'Haris',  
data: _MyArray  
},  
{  
name: 'Adeel',  
data: _MyArray2  
}]  
});  
  
  
$('tspan').last().remove();  
});  
</script>  
</head>  
<body>  
<form id="form1">  
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>  
</form>  
</body>  
</html>  

That's it, chart is ready to view. Now let's understand the code. First of all I include the jquery file and highcarts library. And then I copy/paste the code that I get from highcharts.com for the chart that I want to integrate in my webpage.

The code is quite simple. In first line, chart variable is declared that contains all of the settings of the chart. After that have declared two arrays containing three elements. InrenderTo option I have given the id of div that is available in body section of.html page, the chart will be embedded in that div. I have also specified the width and height of the div that will become the width and height of your chart. I have declared two series, one for Haris Fakhar and one for Adeel Fakhar and passed both arrays to those series respectively.

$('tspan').last().remove(); line removes the Highcharts.com label from your webpage but I personally think the highcharts.com label should be in your webpage because all credit goes to highcharts.

As you have seen, I hard code the data in both arrays. Now let's have a look over the following example to pass dynamic data to those highcharts' arrays using ASP.NET technology.

Highcharts.aspx

view plainprint?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="highcharts.aspx.cs" Inherits="highcharts" %>  
  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
<title>  
Charts and graphs using jquery and charting library the HighCharts  
</title>  
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>  
<script type="text/javascript" src="highcharts.js"></script>  
</head>  
<body>  
  
  
<form id="form1" runat="server">  
<script type="text/javascript" language="javascript">  
var firstSeries='<%=seriesOne %>';  
var secondSeries='<%=seriesTwo %>';  
  
  
//debugger;  
  
var seriesOne = new Array();  
seriesOne= firstSeries.split(',');  
for(var i=0;i<seriesOne.length;i++)  
{  
seriesOne[i]= parseInt(seriesOne[i]);  
}  
var seriesTwo = new Array();  
seriesTwo= secondSeries.split(',');  
for(var i=0;i<seriesTwo.length;i++)  
{  
seriesTwo[i]= parseInt(seriesTwo[i]);  
}  
var chart = null;  
var _MyArray = seriesOne;  
var _MyArray2 = seriesTwo;  
var _Series1='Haris Fakhar';  
var _Series2='Adeel Fakhar';  
  
$(document).ready(function ()  
{  
chart = new Highcharts.Chart({  
chart: {  
renderTo: 'container',  
defaultSeriesType: 'column'  
},  
title: {  
text: 'Fruit Consumption'  
},  
xAxis: {  
categories: ['Apples', 'Oranges', 'Mangos']  
},  
yAxis: {  
title: {  
text: 'Fruit eaten'  
}  
},  
series: [{  
name: _Series1,  
data: _MyArray  
},  
{  
name: _Series2,  
data: _MyArray2  
}]  
  
  
});  
$('tspan').last().remove();  
});  
</script>  
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">  
</div>  
</form>  
</body>  
</html>  

Highcharts.aspx.cs

view plainprint?
using System;  
using System.Collections;  
using System.Configuration;  
using System.Data;  
using System.Web;  
using System.Web.Security;  
using System.Web.UI;  
using System.Web.UI.HtmlControls;  
using System.Web.UI.WebControls;  
using System.Web.UI.WebControls.WebParts;  
  
  
public partial class highcharts : System.Web.UI.Page  
{  
string[] strSplitArr = new string[3];  
string[] strSplitArr2 = new string[3];  
protected string seriesOne { get; set; }  
protected string seriesTwo { get; set; }  
  
  
protected void Page_Load(object sender, EventArgs e)  
{  
//Assigning values to first Array  
strSplitArr[0] = "13";  
strSplitArr[1] = "25";  
strSplitArr[2] = "32";  
//Assigning values to second Array  
strSplitArr2[0] = "8";  
strSplitArr2[1] = "14";  
strSplitArr2[2] = "54";  
  
  
//Assigning comma splitted array values to the seriesOne variable  
foreach (string arrStr in strSplitArr)  
{  
seriesOne = seriesOne + arrStr + ",";  
}  
//Assigning comma splitted array values to the seriesTwo variable  
foreach (string arrStr in strSplitArr2)  
{  
seriesTwo = seriesTwo + arrStr + ",";  
}  
  
  
seriesOne = seriesOne.Remove(seriesOne.Length - 1);  
seriesTwo = seriesTwo.Remove(seriesTwo.Length - 1);  
  
  
}  
  
  
}  







try this charts..............it's good............

.Net and Sql BI

Pages

Wednesday, January 4, 2012

Charts and graphs using jquery and charting library the HighCharts in asp.net

Charts and graphs using jquery and charting library the HighCharts

How to develop charts and graphs using Highcharts?

No comments:

Post a Comment