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
<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. In renderTo 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
<%@ 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
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);
}
}
Let's start with .cs code behind file. I have declared two arrays that will contain three elements each and then declared two protected type string variables with get;set; properties. After that I am assigning values to the arrays' elements and then applying the foreach loop to get the values of both arrays' elements and store them respectively in seriesOne and seriesTwo variables.
Now seriesOne variable have the data of strSplitArr Array in comma splitted form like 8,14,32 and seriesTwo contains the data of strSplitArr2 Array in this format 8,14,54. I could also directly assign the values to the seriesOne and seriesTwo variables without using and populating any array, the reason why I used this indirect process is only I want to tell you that if you want to get data from database then you have to use the Array or List, get all the elements of array and stored in variable just like I did.
Now seriesOne and seriesTwo both variables are ready to get in .aspx side. So it's time to discuss the code written in .aspx side.
var firstSeries='<%=seriesOne %>';
var secondSeries='<%=seriesTwo %>';
I have declared two variables firstSeries, secondSeries and then assigning both of them the values of server side seriesOne and seriesTwo string variables. Now firstseries variable have data in this format 13, 25, 32 and secondSeries variable have data in this format 8, 14, 54.
As you all know highcharts accept data in the form of array, so I have to create an array first and the following lines do exactly what I require.
var seriesOne = new Array();
seriesOne= firstSeries.split(',');
And then I am using the built-in function of javascript, the Split function to split the seriesOne variable with comma (,) seprator and assign all the comma splitted values to the seriesOne array and hence seriesOne array is dynamically populated.
for(var i=0;i<seriesOne.length;i++)
{
seriesOne[i]= parseInt(seriesOne[i]);
}
Now what is this extra loop? I know this question arises in your mind. The reason why I applied this extra loop is to parse the values of array's elements into integer from string. Split function always perform over string because where any character comes there string becomes and in our case the character used rapidly is comma (,). So after performing splitting process and dynamically populating the seriesOne array, we have data in seriesOne array in the format mentioned in following line
seriesOne=["13","25","32"]
The above data format is not acceptable by highcharts as it contains double quotes ", so we have to remove the double quotes that's why I applied for loop in seriesOne array and parse all its elements' values into integer from string data type. Same process I have done for seriesTwo array and then assign both of these arrays to highcharts as mentioned in following code snippet.
var _MyArray = seriesOne;
var _MyArray2 = seriesTwo;
series: [{
name: _Series1,
data: _MyArray
},
{
name: _Series2,
data: _MyArray2
}]
So this is all about charts and graphs using jquery and charting library Highcharts. I hope you have found this tutorial interesting.
6 comments:
how to put the data from database to the series data.
thanks
What a strange way to get rid of "Highcharts.com"! Isn't it easier to set "credits: false"?
If "credits: false" works then its great and i prefer every one to use this because SIMPLICITY IS ALWAYS BEST.
how to assign array values into xAxis 'categories' property
Hi Ambi! It will be the same procedure that i did for data property of series object. You have to create the Array for this i.e;
var _CategoryArray=new Array('Apples','Oranges','Mangoes');
xAxis: {
categories: _CategoryArray
}
If you want to populate the array dynamically through server side then again you have to follow the same procedure that i did for data property by populating its Array dynamically through server side.
"$('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."
It's not needed, use chart options:
credits:{enabled:false}
Post a Comment