title: refactor javascript to an external file
body: <p>I am beginner in ASP .Net and JQuery. So forgive me for asking this silly question. I have an <code>Index.cshtml</code> file as follows. I am using Highcharts' example code to make a gauge. My problem is: the code  between <code>&lt;script&gt;&lt;/script&gt;</code> are long and messy, how can I make it more compact? 
  I have tried to move it to an external file, <code>myscript.js</code>, inside the Scripts folder and include a line <code>&lt;script src="Scripts/myscript.js"&gt;&lt;/script&gt;</code> in <code>Index.cshtml</code> but it give me error saying $ is undefined, which I suspect may be due to the external myscript.js loading before the DOM is finished in the browser. I have tried putting the code in the _layout.cshtml but that is not pretty either. Thank you for your help.</p>
  
  <pre><code>@model IEnumerable&lt;WebApplication16.Models.BatteryLog&gt;
  
  @{
      ViewBag.Title = "Index";
  }
  @{
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  &lt;script&gt;$(function () {
  
      $('#gauge').highcharts({
  
          chart: {
              type: 'gauge',
              plotBackgroundColor: null,
              plotBackgroundImage: null,
              plotBorderWidth: 0,
              plotShadow: false
          },
  
          title: {
              text: 'Current'
          },
  
          pane: {
              startAngle: -150,
              endAngle: 150,
              background: [{
                  backgroundColor: {
                      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                      stops: [
                          [0, '#FFF'],
                          [1, '#333']
                      ]
                  },
                  borderWidth: 0,
                  outerRadius: '109%'
              }, {
                  backgroundColor: {
                      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                      stops: [
                          [0, '#333'],
                          [1, '#FFF']
                      ]
                  },
                  borderWidth: 1,
                  outerRadius: '107%'
              }, {
                  // default background
              }, {
                  backgroundColor: '#DDD',
                  borderWidth: 0,
                  outerRadius: '105%',
                  innerRadius: '103%'
              }]
          },
  
          // the value axis
          yAxis: {
              min: 0,
              max: 200,
  
              minorTickInterval: 'auto',
              minorTickWidth: 1,
              minorTickLength: 10,
              minorTickPosition: 'inside',
              minorTickColor: '#666',
  
              tickPixelInterval: 30,
              tickWidth: 2,
              tickPosition: 'inside',
              tickLength: 10,
              tickColor: '#666',
              labels: {
                  step: 2,
                  rotation: 'auto'
              },
              title: {
                  text: 'Volt'
              },
              plotBands: [{
                  from: 0,
                  to: 120,
                  color: '#55BF3B' // green
              }, {
                  from: 120,
                  to: 160,
                  color: '#DDDF0D' // yellow
              }, {
                  from: 160,
                  to: 200,
                  color: '#DF5353' // red
              }]
          },
  
          series: [{
              name: 'Current',
              data: [80],
              tooltip: {
                  valueSuffix: ' Volt'
              }
          }]
  
      },
      // Add some life
      function (chart) {
          if (!chart.renderer.forExport) {
              setInterval(function () {
                  var point = chart.series[0].points[0],
                      newVal,
                      inc = Math.round((Math.random() - 0.5) * 20);
  
                  newVal = point.y + inc;
                  if (newVal &lt; 0 || newVal &gt; 200) {
                      newVal = point.y - inc;
                  }
  
                  point.update(newVal);
  
              }, 3000);
          }
      });
  });&lt;/script&gt;
  
  &lt;h2&gt;Index&lt;/h2&gt;
  &lt;div id="gauge" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"&gt;&lt;/div&gt;
  </code></pre>