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.

Answer 1

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>