ĐÀO TẠO DOANH NGHIỆP : SỞ KHOA HỌC CÔNG NGHỆ TỈNH ĐỒNG NAI

ENTERPRISE TRAINING: DONG NAI DEPARTMENT OF SCIENCE AND TECHNOLOGY.

HÌNH ẢNH TẬP HUẤN LỚP SHAREPOINT WORKFLOW VÀ KIẾN TRÚC SHAREPOINT

PHOTOS OF SHAREPOINT WORKFLOW AND ARCHITECTURE CLASS.

HÌNH ẢNH TẬP HUẤN LỚP SHAREPOINT WORKFLOW VÀ KIẾN TRÚC SHAREPOINT

PHOTOS OF SHAREPOINT WORKFLOW AND ARCHITECTURE CLASS.

Monday, January 6, 2014

High Chart ASP.NET / WebPart

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.