Click here to Skip to main content
14,883,063 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:
XML
<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/_Layout.cshtml";
    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")
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900