mvc C＃でajax呼び出しを使用して棒グラフで動的データをバインドする方法は？

Question

私は棒グラフで最後の7日間のカウントを表示しようとしています。そのために私は棒グラフとASP.NET MVCとC＃を使用しています。今、このページでは、静的な棒グラフを追加しました。このグラフには、設定された日付のチャートx軸にダイナミックを作成します。

ここに私のテーブルのデータの下表示するには：

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 

これが私のデータは、ストアドプロシージャを使用してSQL Serverのテーブルから来ています。

ここでは、これは私のhtmlページのコード=>

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

これは私のスクリプトコード=>

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

これは私の静的なグラフのスケッチ=>

です

上記の私の静的なチャートは、どのようにして自分のデータをチャートに設定することができるか知っていますか？

Answer 1

例：

モデル：

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); 
     } 
    } 

ビュー：

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

スクリプト：

<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** 
       -------------------------- 

モデル：

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

処置：

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 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>