title: chartJS - creating a chart with timeline
body: <p>I am using angular to create chart on html using chart.js library. 
  I want to achieve a line chart which is a collection of different date in a year length. To do that I am extracting data from database, creating JSON and in HTML getting json data to create chart. I want to create 6 different graphs on one chart.</p>
  
  <p>Chart looks like this at the moment:</p>
  
  <p><a href="https://i.stack.imgur.com/g1iYH.png" rel="nofollow"><img src="https://i.stack.imgur.com/g1iYH.png" alt="enter image description here"></a></p>
  
  <p>As you can see all different data is in one place which should create a line from February to October.</p>
  
  <p>Code:</p>
  
  <pre><code>angular.module("app", ["chart.js"]).controller("lineCtrl", function ($scope, $http) {
      var windowsData = new Array();
      var windowsSeries = [];
      //var windowsLabel = ['Jan','Feb','March','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'];
      var windowsLabel = [];
      var url = 'url';
      var regex = /^[A-Z]?|^[a-z]?/;
      //regex mach is equal to: A-AIX, W-Windows, C-CISCO, R-RHEL's
  
  
      $http.get(url).then(function (response) {
          for (var i = 0; i &lt; response.data.length; i++) {
              var j = response.data[i].Not_fully_compliant;
              var k = response.data[i].Policy;
              var d = response.data[i].date;
              if(k.match(regex)=="W"){               
                  windowsData.push([j]);
                  windowsSeries.push(k);
                  windowsLabel.push(d);
                  console.log(windowsLabel);
                  }
              }        
      });
      $scope.labels = windowsLabel;
      $scope.series = windowsSeries;
      $scope.data = windowsData;
      $scope.options = {
         scales:{
             xAxes:[{
                 type:'time',
                 time: {
                     unit: 'month',
                     displayFormats:{
                         'month': 'MMM YYYY'
                         }
                     }
                 }]
             }
         }    
  });
  </code></pre>
  
  <p>Research: 
  I was trying to apply Scatter.js which is a library which deals with problems like mine, but I wasn't able to implement it with angular.
  <a href="http://dima117.github.io/Chart.Scatter/" rel="nofollow">http://dima117.github.io/Chart.Scatter/</a></p>
  
  <p>How my JSON Looks like:</p>
  
  <pre><code>[{"Policy": "Windows compliance-windows-int-windows7.nessus", 
  "date": "2016-02-01 00:00:00", "Not_fully_compliant": "19"}, 
  {"Policy": "Windows compliance-windows-int-dc-2012.nessus", 
  "date": "2016-02-01 00:00:00", "Not_fully_compliant": "40"}, 
  {"Policy": "Windows compliance-windows-dmz-server-2012.nessus", 
  "date": "2016-02-01 00:00:00", "Not_fully_compliant": "0"}, 
  {"Policy": "Windows compliance-windows-int-server-2003.nessus", 
  "date": "2016-02-01 00:00:00", "Not_fully_compliant": "0"},
  {"Policy": "Windows compliance-windows-int-server-2008.nessus", 
  "date": "2016-02-01 00:00:00", "Not_fully_compliant": "1"}, 
  {"Policy": "Windows compliance-windows-int-server-2012.nessus", 
  "date": "2016-02-01 00:00:00", "Not_fully_compliant": "1"}]
  </code></pre>
  
  <p>It is a JSON for one day of Feb. I am not going to post lines of JSON, it is just to give you idea of the situation. </p>
  
  <p>I want to create 6 different graphs for each policy from JSON and see how it changes in period of time. How can I do this?</p>
  
  <p>Many thanks for your help!</p>