Анализ данных ASP.NET C# данных в диаграмме визуализации Google

Question

У меня есть приложение ASP.net с C# в качестве серверного языка. У меня есть словарь с данными, который я хочу добавить в диаграмму визуализации Google. Я должен динамически создавать диаграмму во время выполнения, так что не будет жестко закодированной HTML-разметки. У меня есть документ, который я хочу, чтобы напечатать на сайт, но заполнить мои собственные данные:

<script type="text/javascript"> 
    var data; 
    var chart; 

     // Load the Visualization API and the piechart package. 
     google.charts.load('current', {'packages':['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.charts.setOnLoadCallback(drawChart); 

     // Callback that creates and populates a data table, 
     // instantiates the pie chart, passes in the data and 
     // draws it. 
     function drawChart() { 

     // Create our data table. 
     data = new google.visualization.DataTable(); 
     data.addColumn('string', ''); 
     data.addColumn('number', 'Serie1'); // DATA HERE 
     data.addColumn('number', 'Serie2'); // DATA HERE 
     data.addRows([ 
      ['Mushrooms', 3,4], // DATA HERE 
      ['Onions', 1,4],// DATA HERE 
      ['Olives', 1,6],// DATA HERE 
      ['Zucchini', 1,7], 
      ['Pepperoni', 2,4]// DATA HERE 
     ]); 


     // Set chart options 
     var options = {'title':'How Much Pizza I Ate Last Night', 
         'width':400, 
         'height':300}; 

     // Instantiate and draw our chart, passing in some options. 
     chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
     google.visualization.events.addListener(chart, 'select', selectHandler); 
     chart.draw(data, options); 
     } 

     function selectHandler() { 
     var selectedItem = chart.getSelection()[0]; 
     var value = data.getValue(selectedItem.row, 0); 
     alert('The user selected ' + value); 
     } 

    </script> 
    <!--Div that will hold the pie chart--> 
    <div id="chart_div" style="width:400; height:300"></div> 

Так как я форматировать словарь данные и заменить фиктивные данные ???

Answer 1

Вы можете использовать бритву, чтобы вставить ДАННЫЕ из словаря к сценарию:

<script type="text/javascript"> 
.... 
    data.addRows([ 
      @Model.DataRows 
    ]); 
.... 
</script> 

Определить модель:

public class ChartModel 
{ 
    .... 
    public string DataRows { get; set; } 
    .... 
} 

и место в верхней части вида что-то вроде: @model [Your_Namespace].ChartModel.

Затем установите DataRows свойство в контроллере:

public ActionResult Index() 
    { 
     Dictionary<string, int> datas = new Dictionary<string, int>(); 
     datas.Add("Januar 2015", 3129); 
     datas.Add("Februar 2015", 3129); 
     ChartModel model = new ChartModel(); 
     model.DataRows = string.Join(", " + Environment.NewLine, 
      datas.Select(d => "['" + d.Key + "', " + d.Value + "]")); 
     return View(model); 
    }