Crystal Rouse
asked on
Using HighCharts and the Chart does not render.
I am using HighCharts and when loading the View, the source for Highcharts is loaded after the DOM. The chart does not display.
My View looks like this:
My Controller returns the values for ThirtyDays, SixtyDays, NinetyDays as a Json.
My Layout View has the following in the head: @Scripts.Render("~/javascr ipt/js")
I have an app bundle that has the following:
bundles.Add(new ScriptBundle("~/javascript /js").Incl ude(
"~/Scripts/jquery-1.11.3.j s",
"~/Scripts/bootstrap.js",
"~/Scripts/jquery-ui.js",
"~/Scripts/chosen.jquery.m in.js",
"~/Scripts/jquery.dataTabl es.js",
"~/Scripts/dataTables.butt ons.min.js ",
"~/Scripts/highcharts.js",
"~/Scripts/sweetalert/swee talert.min .js")
.IncludeDirectory("~/Conte nt/classes ", "*.js", true)
);
My View looks like this:
@{
ViewBag.Title = "Warranty Expiration Chart";
}
<div class="jumbotron">
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$.getJSON("GetMaintenanceExp", function (data) {
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Maintenance Expiration Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'ThirtyDays',
y: data.ThirtyDays,
}, {
name: 'SixtyDays',
y: data.SixtyDays
}, {
name: 'NinetyDays',
y: data.NinetyDays
}]
}]
});
});
});
</script>
My Controller returns the values for ThirtyDays, SixtyDays, NinetyDays as a Json.
My Layout View has the following in the head: @Scripts.Render("~/javascr
I have an app bundle that has the following:
bundles.Add(new ScriptBundle("~/javascript
"~/Scripts/jquery-1.11.3.j
"~/Scripts/bootstrap.js",
"~/Scripts/jquery-ui.js",
"~/Scripts/chosen.jquery.m
"~/Scripts/jquery.dataTabl
"~/Scripts/dataTables.butt
"~/Scripts/highcharts.js",
"~/Scripts/sweetalert/swee
.IncludeDirectory("~/Conte
);
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.