Tuesday, 11 June 2013

chart highchart

 url:- http://api.highcharts.com/highcharts#plotOptions.pie.innerSize

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="pichart_2.aspx.cs" Inherits="pichart_2" %>

<!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="Scripts/jquery.min.js"></script>
     <script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"> </script>
     <script type="text/javascript" src="Scripts/exporting.js"></script>
    <script type="text/javascript" src="Scripts/highcharts.js"></script>
   
</head>
<body>
    <form id="form1" runat="server">
      <asp:HiddenField ID="asstesID" runat="server" />
  <div id="divdata" runat="server">
   
    </div>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.Data;

public partial class pichart_2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable _dt = new DataTable();
        DataColumn col1 = new DataColumn("AssetsName");
        DataColumn col2 = new DataColumn("Percentage");
        col1.DataType = System.Type.GetType("System.String");
        col2.DataType = System.Type.GetType("System.Int32");

        _dt.Columns.Add(col1);
        _dt.Columns.Add(col2);


        //fore each loop while for etc
        _dt.Rows.Add("Equity ", 75);
        _dt.Rows.Add("Debt", 25);

        string strDataAssets = getPieChartAsstesDataformat(_dt, "divdata");
        //ScriptManager.RegisterClientScriptBlock(this.Page, GetType(), "alertT", strDataAssets, false);
        Page.ClientScript.RegisterClientScriptBlock(GetType(), "al", strDataAssets);

    }

    public string getPieChartAsstesDataformat(DataTable dt, String strDivName)
    {
        //define string
        string seriesData = "";
        string strCol1 = "{type: 'pie',  name: 'AssetsName  Percentage' ,data: [";

        try
        {
            //check if dt is not null
            if (dt != null)
            {
                //chk if has rows
                if (dt.Rows.Count > 0)
                {
                    //loop thru the rows
                    foreach (DataRow dr in dt.Rows)
                    {

                        //if (asstesID.Value == dr["AssetsName"].ToString())
                        //{
                           // strCol1 += "{ name: '" + dr["AssetsName"].ToString() + "',y: " + dr["Percentage"].ToString() + ",sliced: true,selected: true},";
                        //}
                        //else
                        //{
                            strCol1 += " ['" + dr["AssetsName"].ToString() + "' , " + dr["Percentage"].ToString() + "] ,";
                        //}

                        //strCol1 += " ['" + dr["AssetsName"].ToString() + "' , " + dr["Percentage"].ToString() + "] ,";
                    }
                    if (strCol1.EndsWith(","))
                    {
                        strCol1 = strCol1.Substring(0, strCol1.LastIndexOf(",")) + "";
                    }
                }
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }

        //close strngs
        strCol1 += "]}";
        //strCol2 += "]},";

        //append
        seriesData = strCol1;//+ strCol2;

        //create chart data
        StringBuilder strData = new StringBuilder();
        strData.Append("<script type=\"text/javascript\">");
        strData.Append("var chartA;");
        //strData.Append("  document.getElementById('" + strDivName + "').style.visibility = 'visible';");
        strData.Append("$(document).ready(function() {");
        strData.Append("chartA = new Highcharts.Chart({");
        strData.Append("chart: {  ");
        strData.Append("renderTo: '" + strDivName + "',");
        strData.Append("plotBackgroundColor: null,");
        strData.Append("plotBorderWidth: null,");
        strData.Append("plotShadow: true");
        strData.Append("}, ");
        strData.Append("title: {");
        strData.Append("text: '' ");
        //  strData.Append("x: -20 ");
        strData.Append("},");
        strData.Append(" tooltip: { shadow : true,borderWidth: 1, ");
        strData.Append("formatter: function() {");
        strData.Append("return '<b>'+ this.point.name +'</b><br/>'+");
        strData.Append("this.y +' %';");
        strData.Append("}");
        strData.Append("},");

        strData.Append("  plotOptions: {  ");
        strData.Append(" pie: { borderColor: '#C0C0C0',  borderWidth: 5,");
        strData.Append(" allowPointSelect: true,animation:true, ");
        strData.Append(" cursor: 'pointer', ");
        //strData.Append(" point: {events: { ");
        //strData.Append(" click: function(event) { ");
        //strData.Append(" console.log(event.point);");
        //strData.Append(" }");
        //strData.Append(" }},");
        strData.Append(" dataLabels: {  ");
        strData.Append(" enabled: true,   ");
        strData.Append(" formatter: function() {");
        strData.Append(" return '<b>'+ this.point.name +'</b>: '+ this.y +' %';}");
        strData.Append(" },");
        strData.Append(" showInLegend: true ");
        strData.Append(" } ");
        strData.Append(" },");

        strData.Append("subtitle: {   ");
        strData.Append("text: '',");
        strData.Append("x: -20");
        strData.Append("},");
        strData.Append("xAxis: {  ");
        strData.Append("},");
        strData.Append("yAxis: { ");
        strData.Append("lineWidth :1,");
        strData.Append("title: {");
        strData.Append("text: ''");
        strData.Append("}");
        strData.Append("},");


        strData.Append("series: [" + seriesData + "]");
        strData.Append("});");
        strData.Append("});");
        strData.Append("</script>");

        //return string
        return strData.ToString();
    }
}

No comments:

Post a Comment