Как сделать динамическую диаграмму диаграммы Google в MVC4

Question

Это моя текущая линейная диаграмма. Мне нужно сделать число динамических строк. (Стандартный, последний, самый ранний, средний) должны быть изменены в зависимости от записей базы данных. Мой код почти как this.

function drawChart() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Month', 'Standard', 'Latest', 'Earliest', 'Average'], 
      ['Original Documents', @Convert.ToDecimal(@Standard[0].ToString()), @Convert.ToDecimal(@Latest[0].ToString()), @Convert.ToDecimal(@Earliest[0].ToString()), @Convert.ToDecimal(@Average[0].ToString())], 
      ["Filing of Entries", @Convert.ToDecimal(@Standard[1].ToString()), @Convert.ToDecimal(@Latest[1].ToString()), @Convert.ToDecimal(@Earliest[1].ToString()), @Convert.ToDecimal(@Average[1].ToString())], 
      ["Assessment of Duties", @Convert.ToDecimal(@Standard[2].ToString()), @Convert.ToDecimal(@Latest[2].ToString()), @Convert.ToDecimal(@Earliest[2].ToString()), @Convert.ToDecimal(@Average[2].ToString())], 
      ["Payment of Duties", @Convert.ToDecimal(@Standard[3].ToString()), @Convert.ToDecimal(@Latest[3].ToString()), @Convert.ToDecimal(@Earliest[3].ToString()), @Convert.ToDecimal(@Average[3].ToString())], 
      ["Releasing", @Convert.ToDecimal(@Standard[4].ToString()), @Convert.ToDecimal(@Latest[4].ToString()), @Convert.ToDecimal(@Earliest[4].ToString()), @Convert.ToDecimal(@Average[4].ToString())], 
      ["Gate Pass", @Convert.ToDecimal(@Standard[5].ToString()), @Convert.ToDecimal(@Latest[5].ToString()), @Convert.ToDecimal(@Earliest[5].ToString()), @Convert.ToDecimal(@Average[5].ToString())], 
      ["Delivery", @Convert.ToDecimal(@Standard[6].ToString()), @Convert.ToDecimal(@Latest[6].ToString()), @Convert.ToDecimal(@Earliest[6].ToString()), @Convert.ToDecimal(@Average[6].ToString())] 
     ]); 

Answer 1

Почему бы не изменить функцию, чтобы принять массив JSON как это:

function drawChart(jsonData) { 
    var array = JSON.parse(jsonData); 
    var data = google.visualization.arrayToDataTable(array); 
    var options = { 
     hAxis: { 
      title: 'X-Axis Legend' 
     }, 
     vAxis: { 
      title: 'Y-Axis Legend' 
     } 
    }; 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 
} 

Примечание строка-за-х позиционный, колонка-в-строке формата данных, described in the documentation:

строка: Каждая строка в таблице представляет собой набор точек данных с одинаковое расположение по оси x.

Тогда вы можете отправить JSon из метода контроллера немного, как это, с каждой новой строки и ее данные добавляются с помощью какой-то цикл или любой другой (вы можете легко решить, как это сделать):

var data = new[] { 
    new[] {"Month", "Line1", "Line2", "Line3", "Line4"}, // add new lines, e.g. new[] {"Month", "Line1", "Line2", "Line3", "Line4", ...., ...., "LineN"}, 
    new object[] {"x-label1", 1, 2, 3, 4 }, // add new data points as above 
    new object[] {"x-label2", 11, 12, 13, 14 }, 
    new object[] {"x-label3", 7, 6, 2, 17 }, 
    new object[] {"x-label3", 17, 19, 23, 9 }, 
    new object[] {"x-label3", 12, 4, 11, 18 } 
}; 
var json = Newtonsoft.Json.JsonConvert.SerializeObject(data); 

Этот пример возвращает следующий JSON:

[["Month","Line1","Line2","Line3","Line4"],["x-label1",1,2,3,4],["x-label2",11,12,13,14],["x-label3",7,6,2,17],["x-label3",17,19,23,9],["x-label3",12,4,11,18]] 

Наконец, here is a JSFiddle example я постучал вверх, который включает в себя вышеупомянутые данные JSON жестко закодированы и рисует график.

EDIT: Ниже приведен пример кода C# для преобразования данных вашей строки из строки в формат столбцов. Он генерирует столько строк данных, сколько вы хотите. Очевидно, вы прочтете эти данные из других источников. В вашем случае исходные строки данные в настоящее время хранятся в переменных с именами, как Standard, Latest и т.д. Измените значение для numberOfLines и вставьте результирующий JSon в пример JSFiddle, чтобы увидеть:

var numberOfLines = 7; // Choose how many lines you want. 
var xAxisHeadings = new object[] { "NOT USED", "Original Documents", "Filing of Entries", "Assessment of Duties", "Payment of Duties", "Releasing", "Gate Pass", "Delivery" }; 
var lines = new List<object[]>(); 
lines.Add(xAxisHeadings); 

// Each line needs to be an array with the first value being the name of the line 
// (e.g. Standard, Latest, Earliest, Average in your case) and the rest 
// being the actual values in order. 
// In the following example, line n has values n, 2n, 3n, 4n, 5n, 6n, 7n 
// e.g. line seven has the values 7, 14, 21, 28, 35, 42, 49 
for (int i=0; i<numberOfLines; i++) 
{ 
    lines.Add(new object[] { "L" + i, 1 * (i+1), 2 * (i+1), 3 * (i+1), 4 * (i+1), 5 * (i+1), 6 * (i+1), 7 * (i+1) }); 
} 

var answer = new List<object>{}; 
for (int i=0; i<lines.Count; i++) 
{ 
    var x = lines.Select(a => a[i]).ToArray(); 
    answer.Add(x); 
} 

var json = Newtonsoft.Json.JsonConvert.SerializeObject(answer); 

Этого новый пример возвращает следующий Json:

[["NOT USED","L0","L1","L2","L3","L4","L5","L6"],["Original Documents",1,2,3,4,5,6,7],["Filing of Entries",2,4,6,8,10,12,14],["Assessment of Duties",3,6,9,12,15,18,21],["Payment of Duties",4,8,12,16,20,24,28],["Releasing",5,10,15,20,25,30,35],["Gate Pass",6,12,18,24,30,36,42],["Delivery",7,14,21,28,35,42,49]] 

Оклейка это в предыдущем примере JSFiddle дает нам эту new JSFiddle example.