title: How I include my chart.js script to admin lte
body: <p>I want to create admin page using adminLTE. I need to insert chart using chart.js into my page on adminlte. But when I tried to insert my code, the chart is not showing, just the blank. </p>
  
  <p>Then I need to edit adminlte chartjs script, but the chart still not showing up.</p>
  
  <p>This is my code on chartjs</p>
  
  <pre><code> &lt;script&gt;
  var myChart1 = document.getElementById('myChart1').getContext('2d');
  
  // Global Options
  Chart.defaults.global.defaultFontFamily = 'Lato';
  Chart.defaults.global.defaultFontSize = 18;
  Chart.defaults.global.defaultFontColor = '#777';
  
  var massPopChart = new Chart(myChart1, {
    type:'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
    data:{
      labels:['Boston', 'Worcester', 'Springfield', 'Lowell', 'Cambridge', 'New Bedford'],
      datasets:[{
        label:'Population',
        data:[
          617594,
          181045,
          153060,
          106519,
          105162,
          95072
        ],
        //backgroundColor:'green',
        backgroundColor:[
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)',
          'rgba(255, 159, 64, 0.6)',
          'rgba(255, 99, 132, 0.6)'
        ],
        borderWidth:1,
        borderColor:'#777',
        hoverBorderWidth:3,
        hoverBorderColor:'#000'
      }]
    },
    options:{
      title:{
        display:true,
        text:'Largest Cities In Massachusetts',
        fontSize:25,
        responsive: true
      },
      legend:{
        display:true,
        position:'right',
        labels:{
          fontColor:'#000'
        }
      },
      layout:{
        padding:{
          left:50,
          right:0,
          bottom:0,
          top:0
        }
      },
      tooltips:{
        enabled:true
      }
  
  
  
    }
  });
  
  var myChart2 = document.getElementById('myChart2').getContext('2d');
  
  
  var massPopChart = new Chart(myChart2, {
    type:'horizontalBar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
    data:{
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets:[{
        label:'Population',
        data:[
          617594,
          181045,
          153060,
          106519,
          105162,
          95072
        ],
        //backgroundColor:'green',
        backgroundColor:[
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
          'rgba(153, 102, 255, 0.6)',
          'rgba(255, 159, 64, 0.6)',
          'rgba(255, 99, 132, 0.6)'
        ],
        borderWidth:1,
        borderColor:'#777',
        hoverBorderWidth:3,
        hoverBorderColor:'#000'
      }]
    },
    options:{
      title:{
        display:true,
        text:'Largest Cities In Massachusetts',
        fontSize:25
      },
      legend:{
        display:true,
        position:'right',
        labels:{
          fontColor:'#000'
        }
      },
      responsive: true,
      tooltips:{
        enabled:true
      }
    }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's the html script</p>
  
  <pre><code>&lt;div class="box box-primary"&gt;
      &lt;div class="box-header with-border"&gt;
          &lt;h3 class="box-title"&gt;Area Chart&lt;/h3&gt;
  
          &lt;div class="box-tools pull-right"&gt;
              &lt;button type="button" class="btn btn-box-tool" data-widget="collapse"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;button type="button" class="btn btn-box-tool" data-widget="remove"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box-body"&gt;
          &lt;div class="chart"&gt;
              &lt;canvas id="myChart1"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="box box-primary"&gt;
      &lt;div class="box-header with-border"&gt;
          &lt;h3 class="box-title"&gt;Chart Bar&lt;/h3&gt;
  
          &lt;div class="box-tools pull-right"&gt;
              &lt;button type="button" class="btn btn-box-tool" data-widget="collapse"&gt;&lt;i class="fa fa-minus"&gt;&lt;/i&gt;
              &lt;/button&gt;
              &lt;button type="button" class="btn btn-box-tool" data-widget="remove"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box-body"&gt;
          &lt;div class="chart"&gt;
              &lt;canvas id="myChart2"&gt;&lt;/canvas&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thank you</p>