Highcharts en asp.net avec json et WebMethod

Highcharts est une bibliothèque graphique écrite en HTML5 et JavaScript, offrant des graphiques complets et complexes mais intuitifs et interactifs pour votre site ou votre application Web. Elle implémente différents types de graphiques (colonnes, lignes, aires, camemberts, nuages de points, etc.).

Pour plus d'infos veuillez consultez le site officiel www.highcharts.com.

Dans ce tutorial je vous présente une utilisation de cette bibliothèque avec asp.net Webmethod et json.

 

Chart ASP.NET avec Highcharts

Classes

  public class Chart
    {
        public string titre;
        public List<string> categories;
        public List<Serie> series;
    }
    public class Serie
    {
        public string name;
        public List<int> data = new List<int>();
    }

WebMethod

   [WebMethod]
   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   public static Chart NbVisiteursParPays()
        {

            Chart chart = new Chart();
            chart.titre = "Nombre de visiteurs par pays";
            List<Serie> series = new List<Serie>();
            Serie s;
            s = new Serie();
            s.name = "Maroc";
            Random rd = new Random();
            for (int i = 0; i < 12; i++)
            {
                s.data.Add(rd.Next(1,10000));
            }
            series.Add(s);
            s = new Serie();
            s.name = "France";
            rd = new Random();
            for (int i = 0; i < 12; i++)
            {
                s.data.Add(rd.Next(1, 50000));
            }
            series.Add(s);
            s = new Serie();
            s.name = "Espagne";
            rd = new Random();
            for (int i = 0; i < 12; i++)
            {
                s.data.Add(rd.Next(1, 63000));
            }
            series.Add(s);
            s = new Serie();
            s.name = "USA";
            rd = new Random();
            for (int i = 0; i < 12; i++)
            {
                s.data.Add(rd.Next(1, 56666));
            }
            series.Add(s);
            List<string> cat = new List<string>();
            cat.Add("JANVIER");
            cat.Add("FEVRIER");
            cat.Add("MARS");
            cat.Add("AVRIL");
            cat.Add("MAI");
            cat.Add("JUIN");
            cat.Add("JUILLET");
            cat.Add("AOUT");
            cat.Add("SEPTEMBRE");
            cat.Add("OCTOBRE");
            cat.Add("NOVEMBRE");
            cat.Add("DECEMBRE");
            chart.series = series;
            chart.categories = cat;
            return chart;
        }

Demo

 <ol class="round">
        <li class="one">
            <div id="container" style="min-width:310px; height: 300px; margin: 0 auto">
            </div>
        </li>
       
    </ol>

    <script src="Scripts/highcharts/jquery.1.9.1.min.js" type="text/javascript"></script>
    <script src="Scripts/highcharts/highcharts.js" type="text/javascript"></script>
    <script src="Scripts/highcharts/exporting.js" type="text/javascript"></script>
    <script type="text/javascript">
      
        $(function () {
            $.ajax({
                type: "POST",
                url: "Services/Rapport.aspx/NbVisiteursParPays",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var result = data.d
                    $('#container').highcharts({
                        chart: {
                            type: 'area'
                        },
                        title: {
                            text: result.titre
                        },
                        exporting: {
                            buttons: {
                                contextButton: {
                                    menuItems: [
                                                {
                                                    text: "Imprimer",
                                                    textKey: "printChart",
                                                    onclick: function () {
                                                        this.print()
                                                    }
                                                },
                                                {
                                                    separator: true
                                                },

                                                {
                                                    text: 'Télecharger en format jpg',
                                                    onclick: function () {
                                                        this.exportChart({ type: "image/jpeg" })
                                                    }
                                                },
                                                 {
                                                     text: 'Télecharger en format png',
                                                     onclick: function () {
                                                         this.exportChart()
                                                     }
                                                 }, {
                                                     text: "Télecharger en format pdf",
                                                     textKey: "downloadPDF", onclick: function () { this.exportChart({ type: "application/pdf" }) }
                                                 }

                                    ]
                                }
                            }
                        },
                        subtitle: {
                            text: ' '
                        },
                        xAxis: {
                            categories: result.categories,
                            tickmarkPlacement: 'on',
                            title: {
                                enabled: false
                            }
                        },
                        yAxis: {
                            title: {
                                text: 'Nombre de visiteurs'
                            },
                            labels: {
                                formatter: function () {
                                    return this.value;
                                }
                            }
                        },
                        tooltip: {
                            shared: true,
                            valueSuffix: ' Visteurs'
                        },
                        plotOptions: {
                            area: {
                                stacking: 'normal',
                                lineColor: '#666666',
                                lineWidth: 1,
                                marker: {
                                    lineWidth: 1,
                                    lineColor: '#666666'
                                }
                            }
                        },
                        series: [{
                            name: result.series[0].name,
                            data: result.series[0].data
                        }, {
                            name: result.series[1].name,
                            data: result.series[1].data
                        },

                         {
                             name: result.series[2].name,
                             data: result.series[2].data
                         }, {
                             name: result.series[3].name,
                             data: result.series[3].data
                         }]
                    });

                }
            });
        });


    </script>
    <script src="Scripts/highcharts/highcharts_dark_theme.js" type="text/javascript"></script>

Code source

demo_vs2012