C# Online Compiler | .NET Fiddle

<no name> by Anonymous

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColumnChart.aspx.cs" Inherits="HighchartDemo.ColumnChart" %>

<!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 src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/highcharts.js" type="text/javascript"></script>
    <script src="Scripts/exporting.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        var count = 0;
        $(document).ready(function () {
            function callfunc() {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Services/HighchartService.asmx/transactionAnalysis",
                    data: "{}",
                    dataType: "json",
                    success: function (Result) {
                        count++;
                        document.getElementById("Countervalue").value = count;

                        Result = Result.d;
                        var data = [];
                        var merchantname = [];
                        var successtranscs = [];
                        var failedtranscs = [];
                        var servicetranscs = [];

                        for (var i in Result) {
                            var serie = new Array(Result[i].Name, Result[i].Value);
                            data.push(serie);
                            merchantname.push(Result[i].merchant_name);
                            successtranscs.push(Result[i].success_transcs);
                            failedtranscs.push(Result[i].failed_transcs);
                            servicetranscs.push(Result[i].service_transcs);


                        }

                        DrawChart(data);
                        StackedChart(merchantname, successtranscs, failedtranscs, servicetranscs);
                    },
                    error: function (Result) {
                        alert("Error");
                    }
                });
            }


            function StackedChart(xvalue, merch_name, succ_val, fail_val, ser_val) {

                $('#container1').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Stacked column chart'
                    },
                    xAxis: {
                        categories: xvalue
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'TransactionStatus'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                            }
                        }
                    },
                    legend: {
                        align: 'right',
                        x: -30,
                        verticalAlign: 'top',
                        y: 25,
                        floating: true,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        headerFormat: '<b>{point.x}</b><br/>',
                        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                            }
                        }
                    },
                    series: [{
                        name: 'Servicefailure',
                        data: ser_val
                    }, {
                        name: 'Failure',
                        data: fail_val
                    }, {
                        name: 'Success',
                        data: succ_val
                    }]
                });
            }

            

            function DrawChart(series) {

                $('#container3').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: 1, //null,
                        plotShadow: false,
                        backgroundColor: {
                            linearGradient: [0, 0, 500, 500],
                            stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(200, 200, 255)']
                            ]
                        }
                    },
                    title: {
                        text: 'fruit  market shares at a specific month, 2014'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Fruit share',
                        data: series
                    }]
                });


            }
            
            setInterval(callfunc, 30000);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container1" style="width:100%; height:400px;"></div>
     <div id ="container2" style="height:20px;"></div>
    <div id ="container3" style="width:100%; height:400px;"></div>
    <input type="hidden" id="Countervalue" runat="server" />


    </form>
</body>
</html>

​x
 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ColumnChart.aspx.cs" Inherits="HighchartDemo.ColumnChart" %>
​
<!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 src="Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/highcharts.js" type="text/javascript"></script>
    <script src="Scripts/exporting.js" type="text/javascript"></script>
   
    <script type="text/javascript">
        var count = 0;
        $(document).ready(function () {
            function callfunc() {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Services/HighchartService.asmx/transactionAnalysis",
                    data: "{}",
                    dataType: "json",
                    success: function (Result) {
                        count++;
                        document.getElementById("Countervalue").value = count;
​
                        Result = Result.d;
                        var data = [];
                        var merchantname = [];
                        var successtranscs = [];
                        var failedtranscs = [];
                        var servicetranscs = [];
​
                        for (var i in Result) {
                            var serie = new Array(Result[i].Name, Result[i].Value);
                            data.push(serie);
                            merchantname.push(Result[i].merchant_name);
                            successtranscs.push(Result[i].success_transcs);
                            failedtranscs.push(Result[i].failed_transcs);
                            servicetranscs.push(Result[i].service_transcs);
​
​
                        }
​
                        DrawChart(data);
                        StackedChart(merchantname, successtranscs, failedtranscs, servicetranscs);
                    },
                    error: function (Result) {
                        alert("Error");
                    }
                });
            }
​
​
            function StackedChart(xvalue, merch_name, succ_val, fail_val, ser_val) {
​
                $('#container1').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Stacked column chart'
                    },
                    xAxis: {
                        categories: xvalue
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'TransactionStatus'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                            }
                        }
                    },
                    legend: {
                        align: 'right',
                        x: -30,
                        verticalAlign: 'top',
                        y: 25,
                        floating: true,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        headerFormat: '<b>{point.x}</b><br/>',
                        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                            }
                        }
                    },
                    series: [{
                        name: 'Servicefailure',
                        data: ser_val
                    }, {
                        name: 'Failure',
                        data: fail_val
                    }, {
                        name: 'Success',
                        data: succ_val
                    }]
                });
            }
​
            
​
            function DrawChart(series) {
​
                $('#container3').highcharts({
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: 1, //null,
                        plotShadow: false,
                        backgroundColor: {
                            linearGradient: [0, 0, 500, 500],
                            stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(200, 200, 255)']
                            ]
                        }
                    },
                    title: {
                        text: 'fruit  market shares at a specific month, 2014'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Fruit share',
                        data: series
                    }]
                });
​
​
            }
            
            setInterval(callfunc, 30000);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container1" style="width:100%; height:400px;"></div>
     <div id ="container2" style="height:20px;"></div>
    <div id ="container3" style="width:100%; height:400px;"></div>
    <input type="hidden" id="Countervalue" runat="server" />
​
​
    </form>
</body>
</html>
​

Environment version: .NET 9.0.0 (9.0.0), Unix 6.8.0.1014
System.Text.Json version: System.Text.Json, Version=9.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51

{"Data":"namespace HelloWorld\n{\n class Hello { \n static void Main(string[] args)\n {\n System.Console.WriteLine(\u0022Hello World!\u0022);\n }\n }\n}","Repository":{"GitDirectory":"/app"}}

Cached Result
Last Run:	3:56:13 am
Compile:	0.017s
Execute:	0.14s
Memory:	11.12Mb
CPU:	0.157s

View IL Code