i am working with google pie chart.but always used fixed value before.now i changed the value which get from dropdown list value change.i working in asp.net mvc3 razor+ajax+jquery. how can i solve this problem?
Controller:
public class HomeController : Controller
{
SurveyReportEntities _entities=new SurveyReportEntities();
public ActionResult Index()
{
return View();
}
public JsonResult DropDownProductName()
{
var ProductList = (from p in _entities.PRODUCTS
select new
{
ProductId = p.product_name,
ProductName = p.product_id
}).ToList();
return new JsonResult() { Data = ProductList };
}
public PartialViewResult GetPieChartData()
{
var data = _entities.sp_chartData(1).ToArray();
return PartialView("PieChartView", data);
}
public PartialViewResult PieChartView()
{
return PartialView();
}
Chart Page:
<script type="text/javascript">
$("#ddlProduct").change(function (){
var pid = $("#ddlProduct").val();
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawSalesChart);
function drawSalesChart() {
$.post('@Url.Content("~/Home/GetPieChartData")', { id: 1},
function (data) {
var tdata = new google.visualization.DataTable();
tdata.addColumn('string', 'Quertion Name');
tdata.addColumn('number', 'Answer');
for (var i = 0; i < data.length; i++) {
tdata.addRow([data[i].Name, data[i].Value]);
}
var options = {
title: "Product Survey Chart",
is3D: true,
pieSliceText: "string"
//pieSliceTextStyle: { color: 'white', fontName: 'Helvetica',fontSize:'12px' }
};
var chart = new google.visualization.PieChart(document.getElementById('productStatus'));
chart.draw(tdata, options);
});
}
// });
</script>
<div class="dashboardItem">
<div class="dashboardItemHeader">Product Survey</div>
<div class="dashboardItemBody">
<div id="productStatus" style="height:400px;width:600px">
<div class="ajaxLoading">
</div>
</div>
</div>
</div>
</div>
Index:
@{
ViewBag.Title = "Index";
Layout = "../Shared/_MasterLayout.cshtml";
}
<h2>Home</h2>
<br/>
@*<body>*@
<span>Product Name :</span>
<select id="ddlProduct">
<option value="0">--Please Select--</option>
</select>
<br/>
<br/>
@Html.Partial("PieChartView","Home")