title: How to visualize data with chart.js properly?
body: <p>I am making a program, which get some data from an array and make another array. This another array needs to be visualize via chart.js in line chart, but something goes wrong there... This is my code: </p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Visualize Data Beautifully Using JS Charts&lt;/title&gt;
      &lt;link href="css/style.css" media="screen" rel="stylesheet"&gt;
      &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;center&gt;
          &lt;form&gt;
              &lt;p&gt;First value:&lt;/p&gt;
              &lt;input type="text" name="firstname" id="first"&gt;
              &lt;br/&gt;Last value:
              &lt;br/&gt;
              &lt;input type="text" name="secondname" id="second"&gt;
              &lt;br/&gt;
              &lt;input type="submit" id="btnSubmit" value="Submit" /&gt;
          &lt;/form&gt;
      &lt;/center&gt;
  
      &lt;script&gt;
          $(document).ready(function() {
              $('#btnSubmit').on("click", function() {
                  var array = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
                  var newArray = [];
                  var firstVal = $('#first').val();
                  var lastVal = $('#second').val();
  
                  for (var i = 0; i &lt; array.length; i++) {
                      if (array[i] &gt;= firstVal &amp;&amp; array[i] &lt;= lastVal) {
                          newArray.push(array[i]);
                      }
                  }
                  var ctx = $("#myChart").get(0).getContext("2d");
  
                  for (var i = 0; i &lt; newArray.length; i++) {
                      var data = {
  
                          labels: [1, 5, 8, 4, 5, 6, 7, 8, 9, 10],
  
                          datasets: [
  
                              {
                                  fillColor: "rgba(151,187,205,0.5)",
                                  strokeColor: "rgba(151,187,205,1)",
                                  pointColor: "rgba(151,187,205,1)",
                                  pointStrokeColor: "#fff",
                                  data: newArray[i]
                              }
                          ]
                      }
                  }
                  var myNewChart = new Chart(ctx).Line(data);
              });
          })
      &lt;/script&gt;
      &lt;div&gt;
          &lt;section&gt;
              &lt;article&gt;
                  &lt;canvas id="myChart" width="400" height="400"&gt;
                  &lt;/canvas&gt;
              &lt;/article&gt;
          &lt;/section&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Can you please help me with that, because i have no idea where might be the mistake in the code, i am new with jquery and chart.js. </p>