There is a schedule from Google, like Google Tool Chart. But there is one catch with him. Here's how to implement it. Here is the controller:

public class ChartController : Controller { public JsonResult CreateChart() { var result = new List<PieChartItem>(); result.Add(new PieChartItem { Name = "Ukraine", Value = 5 }); result.Add(new PieChartItem { Name = "Russia", Value = 6 }); result.Add(new PieChartItem { Name = "Belarus", Value = 6 }); result.Add(new PieChartItem { Name = "USA", Value = 4 }); return Json(new { Countries = result }, JsonRequestBehavior.AllowGet); } } public class PieChartItem { public string Name { get; set; } public int Value { get; set; } }

Well, in the CreateChart view, two scripts are entered:

 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // Подгружаем API google.load('visualization', '1.0', { 'packages': ['corechart'] }); // Устанавливаем callback google.setOnLoadCallback(drawChart); function drawChart() { var options = { 'title': 'Blog Visitors', 'width': 400, 'height': 300 }; var data = new google.visualization.DataTable(); data.addColumn('string', 'Country'); data.addColumn('number', 'Slices'); $.getJSON('@Url.Action("CreateChart", "Chart")', null, function (result) { if (result.Countries.length) { $.each(result.Countries, function (index, c) { data.addRow( [c.Name, c.Value] ); }); // Отрисовка диаграммы var chart = new google.visualization.PieChart( document.getElementById('n')); chart.draw(data, options); }; }); } </script> <div id="n"></div>

I need to make sure that such a graph is displayed when I click on the button. If you just open the site, the chart works, but with the display on the button - a hitch. With the help of Ajax.BeginForm to achieve a result failed. Here are my attempts in another view:

 @using (Ajax.BeginForm("CreateChart", "Chart", new AjaxOptions(){})) { <input type="submit" value="Показать график"/> }

I tried to do the same in jQuery, but as a result, only text is displayed, not a diagram

 <input type='button' id="submit" value='Отобразить' /> <script type="text/javascript"> $(document).ready(function () { $('#submit').click(function (e) { e.preventDefault(); $('#n').load('@Url.Action("CreateChart", "Chart")') }); }); </script>

0