Есть следующий график от гугла. Вот Контроллер
и представление
Мне необходимо сделать так, чтобы такой график отображался, когда я нажимаю на кнопку. С помощью Ajax.BeginForm добиться результата не удалось. Вот мои попытки
Пытался так же сделать через jquery и результат тоже не оправдал ожиданий.
Теперь вот уже и не знаю что сделать, чтобы график отображался после нажатия на кнопку. Буду благодарен за помощь.
Код:
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; }
}Код:
<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>Код:
@using (Ajax.BeginForm("CreateChart", "Chart",
new AjaxOptions()
{
}))Код:
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function (e) {
e.preventDefault();
$('#n').load('@Url.Action("CreateChart", "Chart")')
});
});
</script>