We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
ASP.NET MVC:
View page:
@if (ViewBag.AllAvgChart == null)
{
@(Html.EJ().Chart("chart12Container"))
}
else
{
//...
}
public ActionResult GroupAverageChart()
{
//...
return View("ChartFeatures");
} |
|
ASP.NET MVC:
Controller:
public ActionResult GroupAverageChart(Survey sur)
{
//Creating data source using list
List<ChartData> data = new List<ChartData>();
data.Add(new ChartData(2005, 3));
//...
//Specify the required chart properties
ChartProperties chartModel = new ChartProperties();
Series ser = new Series();
//...
chartModel.Series.Add(ser);
Chart chart = new Chart();
//Serialized the chart model properties as highlighted below
return Json(chart.Serialize(chartModel), JsonRequestBehavior.AllowGet);
}
@Ajax.ActionLink("Descending Average", "GroupAverageChart", new { SurveyNumber = 2, Sortby = 2 }, new AjaxOptions()
{
HttpMethod = "POST",
OnSuccess = "updateChart",
})
function updateChart(data) {
var chartData = JSON.stringify(eval("(" + data + ")"));
//Converted the string to Json and bind the properties to chart
chartData = JSON.parse(chartData);
$("#GroupChart").ejChart(chartData)
} |
OK I am getting very close. Now I can see the chart but for some reason on my page I also see a bunch of source code above the chart
Here is the controller
public JsonResult GroupAJAXChart(int SurveyNumber, int Sortby)
{
AllGroupAverages allAvg = new AllGroupAverages();
allAvg.SurveyNumber = SurveyNumber;
allAvg.SortOn = Sortby;
List<AllGroupAverages_Result> data = allAvg.GroupAverages();
ChartProperties chartModel = new ChartProperties();
Series ser = new Series();
ser.Fill = "#008000";
ser.DataSource = data;
ser.XName = "GroupText";
ser.YName = "AverageAnswer";
chartModel.PrimaryYAxis.Range.Min = 0;
chartModel.PrimaryYAxis.Range.Max = 5.5;
chartModel.PrimaryYAxis.Range.Interval = 0.5;
chartModel.PrimaryYAxis.PlotOffset = 24;
chartModel.PrimaryYAxis.Title.Text = "Average Answer";
chartModel.PrimaryXAxis.EnableTrim = true;
chartModel.PrimaryXAxis.MaximumLabelWidth = 150;
chartModel.PrimaryXAxis.Title.Text = "Group";
chartModel.CommonSeriesOptions.Marker.DataLabel.Visible = true;
chartModel.CommonSeriesOptions.Marker.DataLabel.Font.FontSize = "16px";
chartModel.CommonSeriesOptions.Marker.DataLabel.Font.FontWeight = ChartFontWeight.Bold;
chartModel.Legend.Visible = false;
chartModel.PreRender = "chartPreRender";
chartModel.Size.Height = "500px";
chartModel.Series.Add(ser);
Chart chart = new Chart();
return Json(chart.Serialize(chartModel), JsonRequestBehavior.AllowGet);
}
and here is the view that makes the ajax call
<br />
<h2>Company wide average for each group</h2>
@Ajax.ActionLink("Default","GroupAJAXChart",new { SurveyNumber = ViewBag.SurveyNumber, Sortby = 0 }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "GroupChart",
OnSuccess = "updateChart",
InsertionMode = InsertionMode.Replace
}) <span> | </span>
@Ajax.ActionLink("Ascending Average", "GroupAJAXChart", new { SurveyNumber = ViewBag.SurveyNumber, Sortby = 1 }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "GroupChart",
OnSuccess = "updateChart",
InsertionMode = InsertionMode.Replace
}) <span> | </span>
@Ajax.ActionLink("Descending Average", "GroupAJAXChart", new { SurveyNumber = ViewBag.SurveyNumber, Sortby = 2 }, new AjaxOptions()
{
HttpMethod = "GET",
UpdateTargetId = "GroupChart",
OnSuccess = "updateChart",
InsertionMode = InsertionMode.Replace
})
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 text-center" id="GroupChart">
@(Html.EJ().Chart("chart12Container")
.PrimaryYAxis(pr => pr.Range(ra => ra.Max(5).Min(0).Interval(.5)).PlotOffset(24))
.PrimaryXAxis(px => px.EnableTrim(true).MaximumLabelWidth(100))
.CommonSeriesOptions(cr => cr.Type(SeriesType.Column).Marker(mr => mr.DataLabel(dt => dt.Visible(true).TextPosition(TextPosition.Top).Font(fn => fn.Color("black").Size("16px").FontWeight(ChartFontWeight.Bold)))))
.Series(sr =>
{
sr.DataSource(ViewBag.AllAvgChart)
.XName("GroupText").YName("AverageAnswer")
.Add();
})
.PreRender("chartPreRender")
.Palette(pl => { pl.Add("#008000"); })
.IsResponsive(true)
.Legend(lg => lg.Visible(false))
)
</div>
</div>
<br />
<br />
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="http://cdn.syncfusion.com/15.1.0.41/js/web/ej.web.all.min.js"></script>
<script src="~/Scripts/ej/common/ej.unobtrusive.min.js"></script>
<script type="text/javascript">
function chartPreRender(sender) {
var points = sender.model.series[0].points;
for (var i = 0; i < points.length; i++) {
var y = points[i].y;
if (y < 1)
points[i].fill = "red";
else if (y >= 1 && y < 2)
points[i].fill = "orange";
else if (y >= 2 && y < 3)
points[i].fill = "yellow";
else if (y >= 3 && y < 4)
points[i].fill = "#98FB98";
else if (y >= 4 && y <= 5)
points[i].fill = "#006400";
}
}
function updateChart(data) {
var chartData = JSON.stringify(eval("(" + data + ")"));
chartData = JSON.parse(chartData);
$("#chart12Container").remove();
$("#GroupChart").ejChart(chartData)
}
window.onload = function () {
$("#chart12Container").ejChart({
primaryXAxis :
{
title: { text:'Group'},
labelRotation : 45
},
primaryYAxis :
{
title:{ text: 'Average Answer'}
}
});
}
</script>
}
here is what it looks like before the ajax call (I preload the default on the page)
And here is what it shows now after I clicked on Ascending Average.
Except for my adding formatting I don't see any difference in what I have on the page vs what your sample displayed. so why does mine show the html source code above the chart? I tried it first as ActionResult as your example shows and then switched to JsonResult to see if that made a difference. It did not.
