Jquery High Charts In Asp.net(C#.net)

05:17
Here I am explaining how to use JQuery High Charts in Asp.Net Using C#.net

1.Create asp.net website using vs.
2.add one page to the website.
3. download the jquery file and jquery high chart file .
4.design the aspx page like below and write the jquery code like below.



<head runat="server">
    <title></title>
    <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/jquery.ui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="highcharts.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">
        $(function () {
            $('#linechart').highcharts({
            chart: {
                renderTo: 'linechart',           
                type: 'line',
                marginRight: 25,
                marginBottom: 40,
                marginTop: 40,
                marginLeft:50
            },
            exporting:{
              enabled:false
            },
            credits: {
              enabled: false
            },
            title: false,
            subtitle: false,
            xAxis: {
                gridLineColor:'#dddddd',
                tickInterval: 3
            },
            yAxis: {
                gridLineColor:'#dddddd',
                title: false,
                plotLines: [{
                    value: 0,
                    width: 1
                }]
            },
            tooltip: {
                         shared: true,
                         formatter: function() {
                         thisx = this.x;
                         series1 = <%=paymentData%>;
                         $.each(series1, function(n,v){
                         pre=v[0]
                         if(pre == thisx){
                         paymentdifference = v[1]
                                               }
                                               });
                         series2 = <%=moneyFac%>;
                         $.each(series2, function(n,v){
                         if(v[0] == thisx){
                         moneyfactor = v[1];
                                               }
                                               });
                         series3 = <%=resdual%>;
                         $.each(series3, function(n,v){
                         if(v[0] == thisx){
                         residiual = v[1];
                                          }
                                          });
                         resdualamt=parseInt(residiual * 72430 / 100);
        resdualamtwithcoma=resdualamt.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

 return '<p><label>Payment:</label> <span><strong>$' + this.y + '</strong></span></p><p><label>Payment Difference:</label> <span>$' + (580 - parseInt(this.y)) + '</span></p><p><label>Money Factor: </label><span>' + moneyfactor + '</span></p><p><label>Residual: </label><span>' + residiual + '%</span></p><p><label>Residual Amount: </label><span>$' +resdualamtwithcoma + '</span></p>';

                             },
                             useHTML: true,
                             borderWidth: 0,
                             shadow: false,
                             backgroundColor: 'rgba(255,255,255,0.95)',
                             borderWidth: 1,
                             borderColor: '#cccccc',
                             style: {
                                   color: '#333333',
                                   width: '100px',
                                   boxShadow: '0 0 5px rgba(0,0,0,0.15)'
                             },
                             crosshairs: true
            },
            legend: {
              enabled: false
            },
            series: [
            {
                name: 'Payment',
                data:<%=charData%>,
                color: '#663399',
                lineWidth:3,
                lineColor:'#999999',
                marker: {
                     fillColor:'#ffffff',
                     lineColor:'#999999',
                     radius:6,
                     lineWidth:3
                    }
                    }
            ]
           
                            });
                            });
                            </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="linechart" style="width: 100%; height: 260px;" class="chart-box">
                                                             
                                                              </div>
    </form>
</body>

5.After that add the below code in .cs file


public string charData
    {
        get;
        set;
    }
    public string paymentData
    {
        get;
        set;
    }
    public string moneyFac
    {
        get;
        set;
    }
    public string resdual
    {
        get;
        set;
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        charData = "[[24,515],[27,467],[30,504],[33,506],[36,496],[39,475],[42,458],[45,442],[48,420],[51,417],[54,406],[57,404],[60,395]]";
        paymentData = "[[24,-123],[27,-171],[30,-134],[33,-132],[36,-142],[39,-163],[42,-180],[45,-196],[48,-218],[51,-221],[54,-232],[57,-234],[60,-243]]";
        moneyFac = "[[24,0.00113],[27,0.00113],[30,0.00113],[33,0.00113],[36,0.00113],[39,0.00113],[42,0.00113],[45,0.00113],[48,0.00113],[51,0.00113],[54,0.00113],[57,0.00113],[60,0.00113]]";
        resdual = "[[24,71],[27,71],[30,66],[33,63],[36,61],[39,60],[42,59],[45,58],[48,58],[51,56],[54,55],[57,53],[60,52]]";
    }

then run the page observe the magic it's very simple enjoy and happy codinggggggg.......