Multi Series Line Chart is not showing in ASP.Net with C#

Last Reply 12 days ago By dharmendr

Posted 14 days ago

I don't know why this doesn't show. It doesn't alert me any error also. I hope you can help. Thank you.

This is the code I have in aspx.cs

 [WebMethod]
        public static List<object> GetMultiSeriesLineChartData()
        {
            //Fetch the Statistical data from database.
            string query = "SELECT countryName, DATEPART(Year, startDate) AS [Year] , Count(formID) [NumberOfStudents] FROM TripFormStudent";
            query += " inner join Trip on TripFormStudent.tripID = Trip.tripID";
            query += " inner join Country on Trip.countryCode = Country.countryCode";
            query += " inner join TbStudentPro on TripFormStudent.adminNo = TbStudentPro.adminNO";
            query += " where TripFormStudent.status = 'accepted' AND paymentStatus = 'accepted'";
            query += " Group by countryName, DATEPART(Year, startDate)";
            DataTable dt = GetData(query);

            //Get the DISTINCT Countries.
            List<object> chartData = new List<object>();
            List<string> countries = (from p in dt.AsEnumerable()
                                      select p.Field<string>("countryName")).Distinct().ToList();

            //Insert Label for Country in First position.
            countries.Insert(0, "Country");

            //Add the Countries Array to the Chart Array.
            chartData.Add(countries.ToArray());


            //Get the DISTINCT Years.
            List<int> years = (from p in dt.AsEnumerable()
                               select p.Field<int>("Year")).Distinct().ToList();

            //Loop through the Years.
            foreach (int year in years)
            {

                //Get the Total of Orders for each Country for the Year.
                List<object> totals = (from p in dt.AsEnumerable()
                                       where p.Field<int>("Year") == year
                                       select p.Field<int>("NumberOfStudents")).Cast<object>().ToList();

                //Insert the Year value as Label in First position.
                totals.Insert(0, year.ToString());

                //Add the Years Array to the Chart Array.
                chartData.Add(totals.ToArray());
            }

            return chartData;
        }

And in aspx

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var options = {
                title: 'Number of student who went for the trip',
                legend: { position: 'top' },
                width: 600,
                height: 400
            };
            $.ajax({
                type: "POST",
                url: "viewStatistics.aspx/GetMultiSeriesLineChartData",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    var data = google.visualization.arrayToDataTable(r.d);
                    var chart = new google.visualization.LineChart($("#mslChart")[0]);
                    chart.draw(data, options);
                    console.log(JSON.stringify(r.d));
                },
                failure: function (r) {
                    console.log(JSON.stringify(r.d));
                    alert(r.d);

                },
                error: function (r) {
                    console.log(JSON.stringify(r.d));
                    alert(r.d);

                }
            });
        }
    </script>
 <div id="mslChart"></div>
You are viewing reply posted by: dharmendr 12 days ago.
Posted 12 days ago

Hi kitty,

Change Javascript code with the below.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        var options = {
            title: 'Number of student who went for the trip',
            legend: { position: 'top' },
            width: 600,
            height: 400
        };
        $.ajax({
            type: "POST",
            url: "viewStatistics.aspx/GetMultiSeriesLineChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.LineChart($("#mslChart")[0]);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>