How to bind dynamic data in bar chart using ajax call in mvc c#?

Question

I am try for the show last 7 days count in the bar charts. For that I am used bar charts and ASP.NET MVC and C#. Now in this page I have added static bar charts show now I want to this chart create dynamic in the chart x axis on the set date.

Here below my table data to show:

DateColumn | Count
09-05-2017    10
08-05-2017    05
07-05-2017    20
06-05-2017    4000
05-05-2017    30
04-05-2017    5000
03-05-2017    40

This is my data come from the table in SQL Server using a stored procedure.

Here this is my html page code =>

 <div class="box box-without-bottom-padding">            
        <canvas id="myChart"></canvas>
    </div>

this is my script code =>

    <script type="text/javascript">
    $(document).ready(function () {        
    $.ajax({
        url: 'Home/GetCount',
        dataType: "json",
        type: "GET",
        contentType: 'application/json; charset=utf-8',
        async: false,
        processData: false,
        cache: false,
        delay: 15,
        success: function (data) {
            for (var i in data) {
                // here come the data as object in the object 2 value 1 is datecolumn and 2 is total count.

            }
            AutoFollow();
        },
        error: function (xhr) {
            alert('error');
        }
    });
});


function AutoFollow()
{
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["M", "T", "W", "T", "F", "S", "S"], // here i want to show my date value
            datasets: [{
                label: 'AutoFollow',
                data: [12, 19, 3, 17, 28, 24, 7], // here show my total count date wise 
                backgroundColor: "rgba(153,255,51,1)"
            }, {
                label: 'Manual',
                data: [30, 29, 5, 5, 20, 3, 10],
                backgroundColor: "rgba(255,153,0,1)"
            }]
        },            
    });
}

this is my static chart sketch =>

show here above my static charts can you please any one know how can set my own data in the charts.

Your chart needs array of data. Provide array of data's by using JSON Result via AJAX. Does your table data always have 7 rows representing days in a week? — Kumar_Vikas
– Kumar_Vikas, Commented May 9, 2017 at 8:37

Ashiquzzaman · Accepted Answer · 2017-05-11 04:23:12Z

Example:

Model:

 public class MyModel
    {
        public string DateColumn { get; set; }
        public int Count { get; set; }

        public static List<MyModel> GetList()
        {
            return new List<MyModel>
            {
                new MyModel {DateColumn = "09-05-2017",Count = 10},
                new MyModel {DateColumn = "10-05-2017",Count = 30},
                new MyModel {DateColumn = "11-05-2017",Count = 50},
                new MyModel {DateColumn = "12-05-2017",Count = 10},
                new MyModel {DateColumn = "13-05-2017",Count = 100},
                new MyModel {DateColumn = "14-05-2017",Count = 20},
                new MyModel {DateColumn = "15-05-2017",Count = 10},
                new MyModel {DateColumn = "16-05-2017",Count = 150},
                new MyModel {DateColumn = "17-05-2017",Count = 15},
                new MyModel {DateColumn = "18-05-2017",Count = 11},
                new MyModel {DateColumn = "19-05-2017",Count = 5},
            };
        }
    }

Clontoller:

 public class HomeController : Controller
    {   
        public JsonResult GetCount()
        {
            var model = MyModel.GetList();//Lode data from database
            return Json(model, JsonRequestBehavior.AllowGet);
        }
    }

view:

<div class="box box-without-bottom-padding">            
        <canvas id="myChart"></canvas>
    </div>

script:

  <script type="text/javascript">
        $(function() {
            var data = getData();
            AutoFollow(data);
        });

        function getData() {
            var dateValue = [];
            var countValue = [];
            $.ajax({
                url: "/home/GetCount/",
                dataType: 'json',
                async: false
            }).done(function(data) {
                data.forEach(function(obj) {
                    dateValue.push(obj.DateColumn);
                    countValue.push(obj.Count);
                });
            });
            return {
                dateValue: dateValue,
                countValue: countValue
            };
        }


        function AutoFollow(data) {
            var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx,
                {
                    type: 'bar',
                    data: {
                        labels: data.dateValue, // here i want to show my date value
                        datasets: [
                            {
                                label: 'AutoFollow',
                                data: data.countValue, // here show my total count date wise 
                                backgroundColor: "rgba(153,255,51,1)"
                            }, {
                                label: 'Manual',
                                data: [30, 29, 5, 5, 20, 3, 10],
                                backgroundColor: "rgba(255,153,0,1)"
                            }
                        ]
                    }
                });
        }
    </script>

=================================================================================================================================================

                 --------------------------
                   **As Per Your Request**
                 --------------------------

Model:

 public class MyModel
    {
        public string DateColumn { get; set; }
        public string Lable { get; set; }
        public int Count { get; set; }

        public static List<MyModel> GetList()
        {
            return new List<MyModel>
            {
                new MyModel {DateColumn = "09-05-2017",Count = 10,Lable = "Lable1"},
                new MyModel {DateColumn = "10-05-2017",Count = 30,Lable = "Lable1"},
                new MyModel {DateColumn = "11-05-2017",Count = 50,Lable = "Lable1"},
                new MyModel {DateColumn = "12-05-2017",Count = 10,Lable = "Lable1"},
                new MyModel {DateColumn = "13-05-2017",Count = 100,Lable = "Lable1"},
                new MyModel {DateColumn = "14-05-2017",Count = 20,Lable = "Lable2"},
                new MyModel {DateColumn = "15-05-2017",Count = 10,Lable = "Lable2"},
                new MyModel {DateColumn = "16-05-2017",Count = 150,Lable = "Lable2"},
                new MyModel {DateColumn = "17-05-2017",Count = 15,Lable = "Lable2"},
                new MyModel {DateColumn = "18-05-2017",Count = 11,Lable = "Lable2"},
                new MyModel {DateColumn = "19-05-2017",Count = 5,Lable = "Lable2"},
            };
        }
    }

Action :

public JsonResult GetCount()
{
    var data = MyModel.GetList()
        .GroupBy(s => s.Lable)
        .Select(s => new
        {
            DateColumn = s.Select(d => d.DateColumn),
            data = new
            {
                Lable = s.Key,
                Count = s.Select(d => d.Count)
            }

        }); //Lode data from database
    var model = new
    {
        DateColumn = data.First().DateColumn,
        CountColumn = data.Select(s => s.data)
    };
    return Json(model, JsonRequestBehavior.AllowGet);
}

Script:

    <script type="text/javascript">
        $(function() {
            var data = getData();
            AutoFollow(data);
        });

        function getData() {
            var dateValue ;
            var countValue;
            $.ajax({
                url: "/Chart/GetCount/",
                dataType: 'json',
                async: false
            }).done(function (data) {
                dateValue = data.DateColumn;
                countValue = data.valueColumn;
            });
            return {
                dateValue: dateValue,
                countValue: countValue
            };
        }


        function AutoFollow(data) {
            var ctx = document.getElementById("myChart").getContext('2d');
            var myChart = new Chart(ctx,
                {
                    type: 'bar',
                    data: {
                        labels: data.dateValue, // here i want to show my date value
                        datasets: [
                            {
                                label: data.countValue[0].Lable,
                                data: data.countValue[0].Count, // here show my total count date wise
                                backgroundColor: "rgba(153,255,51,1)"
                            }, {
                                label: data.countValue[1].Lable,
                                data: data.countValue[1].Count,
                                backgroundColor: "rgba(255,153,0,1)"
                            }
                        ]
                    }
                });
        }
</script>

thank you so much for the helping i want to need like this code.
Hello can you please help me on this solution??i have one confusion here
here i want to also in the chart show label: 'Manual' on data also show dynamic show how can do that can you please help me?
in my store procedure i have return 2 table so i want to 2nd table data show in the chart for manual

Collectives™ on Stack Overflow

How to bind dynamic data in bar chart using ajax call in mvc c#?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related