Download the sample project at here
Open the website
Run the website (index.htm)
We just demo for 2 chart (Pie chart and Basic line chart,
others is same similar) click choose Pie chart
View the result
And click to Basic line chart
View the result
Here is code sample of Pie chart
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific
website, 2010'
},
tooltip: {
pointFormat: '{series.name}:
<b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f}
%'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
</script>
</head>
<body>
<div id="container"
style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
The important code is: Just change the segment code
data: [
['Firefox', 45.0],// change to 'Firefox1', 44.0 …
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
And here is code sample of Basic line chart
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug',
'Sep', 'Oct',
'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9,
9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6,
2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
});
</script>
</head>
<body>
<div id="container"
style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
The important code is: Just change the segment code
categories: ['Jan',
'Feb', 'Mar',
'Apr', 'May',
'Jun',
'Jul', 'Aug',
'Sep', 'Oct',
'Nov', 'Dec']
And
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9,
9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6,
2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
Create your website
Create 2 html page: PieChartDemo.htm and
BasicLineChartDemo.htm
Download The JS file at here
Create Folder HighChartLibrary and Add Existing item all
your downloaded files
Open highcharts.js and search for html
Change http://code.highcharts.com/3.0.7/modules/canvas-tools.js
to HighChartLibrary/canvas-tools.js
And http://code.highcharts.com/3.0.7/gfx/vml-radial-gradient.png
to HighChartLibrary/vml-radial-gradient.png
Open PieChartDemo.htm
and paste this code
<!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>
<title>Highcharts Example</title>
<script type="text/javascript"
src="HighChartLibrary/jquery.min.js"></script>
<script src="HighChartLibrary/highcharts.js"></script>
<script type="text/javascript"
src="HighChartLibrary/json2.js"></script>
</head>
<body>
<div id="container"
style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
Add your JavaScript:
Here is you data: "Category1#Category2#Category3#Category4#;50#40#37#18#"
Using the JSON (HighChartLibrary/json2.js) to
parse to json like
data: [
[Category1', 50.0],
['Category2', 40.0],
['Category3', 37.0],
['Category4', 18.9]
]
<script type="text/javascript">
var data = "Category1#Category2#Category3#Category4#;50#40#37#18#";
var categoryAndNumberOfView = data.split(';');
var category = "";
var numberOfView = "";
for (var i = 0; i
< categoryAndNumberOfView.length; i++) {
if (i == 0) {
category = categoryAndNumberOfView[0].split('#');
}
else {
numberOfView = categoryAndNumberOfView[1].split('#');
}
}
var chartData = [];
for (i = 0; i < category.length - 1; i++) {
chartData.push([category[i], parseInt(numberOfView[i])])
}
var
jsonTest1 = JSON.stringify(chartData);
var jsonTest = $.parseJSON(jsonTest1);
</script>
Continue paste this code
All code like this
<!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>
<title>Highcharts Example</title>
<script type="text/javascript"
src="HighChartLibrary/jquery.min.js"></script>
<script type="text/javascript"
src="HighChartLibrary/highcharts.js"></script>
<script type="text/javascript"
src="HighChartLibrary/json2.js"></script>
<script type="text/javascript">
var data = "Category1#Category2#Category3#Category4#;50#40#37#18#";
var categoryAndNumberOfView = data.split(';');
var category = "";
var
numberOfView = "";
for (var i = 0; i
< categoryAndNumberOfView.length; i++) {
if (i == 0) {
category = categoryAndNumberOfView[0].split('#');
}
else {
numberOfView = categoryAndNumberOfView[1].split('#');
}
}
var chartData = [];
for (i = 0; i < category.length - 1; i++) {
chartData.push([category[i], parseInt(numberOfView[i])])
}
var jsonTest1 = JSON.stringify(chartData);
var jsonTest = $.parseJSON(jsonTest1);
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific
website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f}
%'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: jsonTest
}]
});
});
</script>
</head>
<body>
<div id="container"
style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
View the result
Open BasicLineChartDemo.htm
and paste this code
<!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>
<title>Highcharts Example</title>
<script type="text/javascript"
src="HighChartLibrary/jquery.min.js"></script>
<script src="HighChartLibrary/highcharts.js"></script>
<script type="text/javascript"
src="HighChartLibrary/json2.js"></script>
</head>
<body>
<div id="container"
style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
Add your JavaScript:
Here is you data: “Category1# Category2#
Category3#&17#0#33#!6#0#15#!0#10#10#!&12/5/2013#12/11/2013#12/13/2013
”
Using the Array to push data into categories like
categories: ['12/5/2013',
'12/11/2013', '12/13/2013']
Using the JSON (HighChartLibrary/json2.js) to
parse to json like
And
series: [{
name: 'Category1',
data: [17.0, 0.0, 33.0]
}, {
name: 'Category2',
data: [6.0, 0.0, 15.0]
}, {
name: 'Category3',
data: [0.0, 10.0, 10.0]
}]
<script type="text/javascript">
//BuyInNews3#BuyInNews2#BuyInNews1#&17#0#33#!6#0#15#!0#10#10#!&12/5/2013#12/11/2013#12/13/2013#
var data = "Category1#Category2#Category3#&17#0#33#!6#0#15#!0#10#10#!&12/5/2013#12/11/2013#12/13/2013";
var hiddenField2 = data.split('&');
//BuyInNews3#BuyInNews2#BuyInNews1#
var categoryOfLineChart = hiddenField2[0].split('#');
//17#0#33#!6#0#15#!0#10#10#!
var numberOfViewLineChart = hiddenField2[1].split('!');
//12/5/2013#12/11/2013#12/13/2013
var createdOfLineChart = hiddenField2[2].split('#');
function Category(name) {
this.name = name;
this.data
= new Array();
return this;
};
var arraySeries = new
Array();
for (var i = 0; i
< categoryOfLineChart.length - 1; i++) {
var sery = new
Category(categoryOfLineChart[i]);
var arrayValueChart = numberOfViewLineChart[i].split('#');
for (var j = 0; j
< arrayValueChart.length - 1; j++) {
sery.data.push(parseInt(arrayValueChart[j]));
}
arraySeries.push(sery);
}
var chart = null;
var jsonTest1 = JSON.stringify(arraySeries);
var jsonTest = $.parseJSON(jsonTest1);
</script>
Continue paste this code
All code like this
<!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>
<title>Highcharts Example</title>
<script type="text/javascript"
src="HighChartLibrary/jquery.min.js"></script>
<script src="HighChartLibrary/highcharts.js"></script>
<script type="text/javascript"
src="HighChartLibrary/json2.js"></script>
<script type="text/javascript">
//BuyInNews3#BuyInNews2#BuyInNews1#&17#0#33#!6#0#15#!0#10#10#!&12/5/2013#12/11/2013#12/13/2013#
var data = "Category1#Category2#Category3#&17#0#33#!6#0#15#!0#10#10#!&12/5/2013#12/11/2013#12/13/2013";
var hiddenField2 = data.split('&');
//BuyInNews3#BuyInNews2#BuyInNews1#
var categoryOfLineChart = hiddenField2[0].split('#');
//17#0#33#!6#0#15#!0#10#10#!
var numberOfViewLineChart = hiddenField2[1].split('!');
//12/5/2013#12/11/2013#12/13/2013
var createdOfLineChart = hiddenField2[2].split('#');
function Category(name) {
this.name = name;
this.data = new
Array();
return this;
};
var arraySeries = new
Array();
for (var i = 0; i
< categoryOfLineChart.length - 1; i++) {
var sery = new
Category(categoryOfLineChart[i]);
var arrayValueChart = numberOfViewLineChart[i].split('#');
for (var j = 0; j
< arrayValueChart.length - 1; j++) {
sery.data.push(parseInt(arrayValueChart[j]));
}
arraySeries.push(sery);
}
var chart = null;
var jsonTest1 = JSON.stringify(arraySeries);
var jsonTest = $.parseJSON(jsonTest1);
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Fruit Consumption',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: createdOfLineChart
},
yAxis: {
title: {
text: 'Fruit
eaten'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: jsonTest
});
});
</script>
</head>
<body>
<div id="container"
style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
View the result
Done!!!
Download the HighChartDemo at here
More HighCharts Get Json from code behind
For Pie Chart:
Code Behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
public partial class PieChartDemoGetJsonFromCodebehind : System.Web.UI.Page
{
public string data { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
var results = new List<SimpleClass>();
SimpleClass simple = new SimpleClass();
simple.x = "Test1";
simple.y = 50;
results.Add(simple);
simple = new SimpleClass();
simple.x = "Test2";
simple.y = 100;
results.Add(simple);
results.Add(new SimpleClass { x = "test3", y = 42 });
results.Add(new SimpleClass { x = "test4", y = 99 });
JavaScriptSerializer oSerializer1 = new JavaScriptSerializer();
data = oSerializer1.Serialize(results);
}
class SimpleClass
{
public string x { set; get; }
public double y { set; get; }
}
}
Code Inline
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PieChartDemoGetJsonFromCodebehind.aspx.cs" Inherits="PieChartDemoGetJsonFromCodebehind" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="HighChartLibrary/jquery.min.js"></script>
<script type="text/javascript" src="HighChartLibrary/highcharts.js"></script>
<script type="text/javascript" src="HighChartLibrary/json2.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: <%=data %>
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
For BasicLine Chart:
Code Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Script.Serialization;
public partial class BasicLineChartDemoGetJsonFromCodebehind : System.Web.UI.Page
{
public string Series1 { get; set; }
public string Xaxis { get; set; }
protected void Page_Load(object sender, EventArgs e)
{
/*X axis coordinates*/
List<int> lstXaxis = new List<int>();
lstXaxis.Add(2007);
lstXaxis.Add(2008);
lstXaxis.Add(2009);
lstXaxis.Add(2010);
JavaScriptSerializer oSerializer = new JavaScriptSerializer();
Xaxis = oSerializer.Serialize(lstXaxis);
/*Series1 - Yaxis*/
List<ChartEx> chartEx = new List<ChartEx>();
ChartEx oEx = new ChartEx();
oEx.data = new List<int>();
oEx.name = "Revenue";
oEx.data.Add(350);
oEx.data.Add(410);
oEx.data.Add(220);
oEx.data.Add(421);
chartEx.Add(oEx);
oEx = new ChartEx();
oEx.data = new List<int>();
oEx.name = "Revenue1";
oEx.data.Add(50);
oEx.data.Add(10);
oEx.data.Add(20);
oEx.data.Add(21);
chartEx.Add(oEx);
JavaScriptSerializer oSerializer1 = new JavaScriptSerializer();//"{\"name\":\"Revenue\",\"data\":[350,410,220,421]}"
Series1 = oSerializer1.Serialize(chartEx);
//"[{\"name\":\"Revenue\",\"data\":[350,410,220,421]}]"
//"[{\"name\":\"Revenue\",\"data\":[350,410,220,421]},{\"name\":\"Revenue1\",\"data\":[50,10,20,21]}]"
char[] arr = new char[] { '[', ']'}; // Trim these characters
Series1 = Series1.TrimStart(arr);
Series1 = Series1.TrimEnd(arr);
//{\"name\":\"Revenue\",\"data\":[350,410,220,421]},{\"name\":\"Revenue1\",\"data\":[50,10,20,21]}
}
public class ChartEx
{
public string name { get; set; }
public List<int> data { get; set; }
}
}
Code Inline
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BasicLineChartDemoGetJsonFromCodebehind.aspx.cs" Inherits="BasicLineChartDemoGetJsonFromCodebehind" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="HighChartLibrary/jquery.min.js"></script>
<script type="text/javascript" src="HighChartLibrary/highcharts.js"></script>
<script type="text/javascript" src="HighChartLibrary/json2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'Container',
defaultSeriesType: 'line'
},
title: {
text: 'Fruit Consumption',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: <%=Xaxis %>
},
yAxis: {
title: {
text: 'Fruit eaten'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [<%=Series1 %>]
});
});
</script>
</head>
<body>
<div id="Container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div>
</body>
</html>
You can Download more Example at here
The GOD will bless to all of you.
