how to bind 2 table dynamic data in bar chart using ajax call in mvc c#?

Question

I am trying to show last 7 days count in the bar charts.for that I am using bar charts and asp.net mvc c#.I have created store procedure that return 2 tables form the database. Now in this page I can able to show 1st table data.But no idea about how to show 2nd table data in the chart. Find table structure below

This is my 1st return table data =>

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 2nd table data =>

DateColumnForManual | TotalCountForManual
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 Class in c# =>

  public class Dashboard
  {
    public string DateColumn { get; set; }

    public int TotalCount { get; set; }

    public string DateColumnForManual { get; set; }

    public int TotalCountForManual { get; set; }
 } 

This is my status class=>

public class Status
{
    public bool Result { get; set; }
    public object Data { get; set; }        
}

This is my Server side method =>

public JsonResult GetCount()
    {
            Dashboard objDashboard = new Dashboard();
            var Count = objDashboard.GetDashboard();
            return Json(new { data = Count.Data }, JsonRequestBehavior.AllowGet);            
    } 

This My Dashboard.cs =>

 public Status GetDashboard()
     {
        Status Status = new Status();            
            DataSet ds = DataAccess.ExecuteDataset(Settings.ConnectionString(), "spGetDashboard");

            if (ds != null && ds.Tables.Count > 0)
            {
                List<Dashboard> ListActivity = new List<Dashboard>();
                for (int i = 0; i < ds.Tables[0].Rows.Count; i++) // this is my 1st table return 
                {
                    Dashboard objActivity = new Dashboard();
                    objActivity.DateColumn = ds.Tables[0].Rows[i]["DateColumn"].ToString();
                    objActivity.TotalCount = Convert.ToInt32(ds.Tables[0].Rows[i]["TotalCount"]);
                    ListActivity.Add(objActivity);
                }
                for (int i = 0; i < ds.tables[1].rows.count; i++) // this is my 2nd table return
                {
                   Dashboard objactivity = new Dashboard();
                   objactivity.datecolumnformanual = ds.tables[1].rows[i]["datecolumnformanual"].tostring();
                   objactivity.totalcountformanual = convert.toint32(ds.tables[1].rows[i]["totalcountformanual"]);
                   listactivity.add(objactivity);
                }
                Status.Data = ListActivity;
                Status.Result = true;
            }
            else
            {
                Status.Result = false;
            }           
        return Status;
    }

here my ajax call =>

<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) {
          var arrlable = new Array();
            var arrdata = new Array();
            var arrdataForManual = new Array();

            for (var i = 0; i < data.data.length; i++) {
                arrlable.push(data.data[i].DateColumn);
                arrdata.push(data.data[i].TotalCount);
                //arrdataForManual.push(data.data[i].TotalCountForManual);
            }
            AutoFollow(arrlable, arrdata);
    },
    error: function (xhr) {
        alert('error');
    }
});

});

 function AutoFollow(arrlable, arrdata)
 {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: arrlable, // here show date
        datasets: [{
            label: 'AutoFollow',
            data: arrdata
            backgroundColor: "rgba(153,255,51,1)"
        }, {
            label: 'Manual',
            data: [30, 29, 5, 5, 20, 3, 10], // here i want to show 2nd table data
            backgroundColor: "rgba(255,153,0,1)"
        }]
    },            
});
}

here in the sketch i am show autofollow count is dynamic show i want also want manual count from the database and this come from 2nd tabel data.

here above i show the my whole code and i want to show my 2nd table data in the bar charts any one have the idea how can do that please let me?

Answer 1

I think you could add another parameter to your AutoFollow function. This addition parameter will store manual data. Your script could look like this

<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) {
                var arrlable = new Array();
                var arrdata = new Array();
                var arrdataForManual = new Array();

                for (var i = 0; i < data.data.length; i++) {
                    if (data.data[i].DateColumn && data.data[i].DateColumn != "") {
                        arrlable.push(data.data[i].DateColumn);
                        arrdata.push(data.data[i].TotalCount);
                    } else {
                        arrdataForManual.push(data.data[i].TotalCountForManual);
                    }
                }
                AutoFollow(arrlable, arrdata, arrdataForManual);
        },
        error: function (xhr) {
            alert('error');
        }
    });
});

 function AutoFollow(arrlable, arrdata, arrdataForManual)
 {
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: arrlable, // here show date
        datasets: [{
            label: 'AutoFollow',
            data: arrdata,
            backgroundColor: "rgba(153,255,51,1)"
        }, {
            label: 'Manual',
            data: arrdataForManual,
            backgroundColor: "rgba(255,153,0,1)"
        }]
        },            
    });
}