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?

instead of putting all your code, please describe the scenario well.Then may be we can help you — Arunprasanth K V
– Arunprasanth K V, Commented May 10, 2017 at 7:11
@ArunprasanthKV see i am add sketch now any idea about this how can do that? — coderwill
– coderwill, Commented May 10, 2017 at 7:15
i am see in my chart two column 1st is autofollow and 2nd is manual so now in my chart 1st autofollow data is a dynamic now and 2nd for data is static so i want to this 2nd column want to also dynamic. — coderwill
– coderwill, Commented May 10, 2017 at 7:17

Trung Duong · Accepted Answer · 2017-05-10 07:21:18Z

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)"
        }]
        },            
    });
}

answered May 10, 2017 at 7:21

Trung Duong

3,4752 gold badges10 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

coderwill Over a year ago

yes i want to like this data but in my sketch date is full return with also time and in my database just return date and here c# side return whole date so i want to just get date so how can do that?any idea

Trung Duong Over a year ago

If you want to get only Date part, you could do it inside C# function GetDashboard: objActivity.DateColumn = ds.Tables[0].Rows[i]["DateColumn"].ToString("dd-MM-yyyy"); objActivity.DateColumnForManual = ds.Tables[1].Rows[i]["DateColumnForManual"].ToString("dd-MM-yyyy");

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related