I'm trying to use Highcharts in my MVC web application. I have loaded all the prerequisites to make Highcharts working. But apparently, "highchart" is still not recognized by the page. I'm checking the rendered page by google developer tool and it says all the JQuery and Highchart javascript files are loaded properly. Any help?
This is my .cshtml code:
@using System.Web.Optimization <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div> @section Scripts { @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/Scripts/Highcharts-4.0.1/js/highcharts.js") @Scripts.Render("~/Scripts/Highcharts-4.0.1/js/modules/exporting.js") <script type="text/javascript"> $(function() { var chart; debugger; $(document).ready(function() { debugger; // Build the chart $('#container').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'Browser market shares at a specific website, 2014' }, 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: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); }); }); </script> }