chartJS - creating a chart with timeline

Question

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.

Chart looks like this at the moment:

As you can see all different data is in one place which should create a line from February to October.

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 < 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'
                       }
                   }
               }]
           }
       }    
});

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. http://dima117.github.io/Chart.Scatter/

How my JSON Looks like:

[{"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"}]

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.

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?

Many thanks for your help!

Answer 1

You look like "mis-formatting" the data to provide to chartJS.

Check this documentation page on how to format it and refer to it through out this explanation.

You actually provide your data as an array:

windowsData.push([j]);

Which ends in an array like this:

[19,40,0,0,1,1]

It is only the y-axis values extracted from your json.
Those AREN'T associated with their respective x-axis coord.

You should do something like this :

// Define a temp array.
var chartData = [];

In your get function where you dissect the json...
Right now ... Associate the x and y value by pairs...
and push them as objects in the temp array.

{x:value,y:value}

.

$http.get(url).then(function (response){
    for (var i = 0; i < 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"){               
            chartData.push( "{x:" +d+ ", y:" +j+ "}" );
            windowsSeries.push(k);
            windowsLabel.push(d);
            console.log(windowsLabel);
        }
    }
});

// Then...
$scope.data = {datasets:[{data:chartData}]};    

So the datasets object provided to chartJS, which contains a "sub-object" data ...
Which has to be an array of objects...

Do you get deepness of the expected info ?
;)

This is because you could have more than one line in the graph!

So this last real data array (for one line) would be:
(Please... Try it when you've fixed your json creation issue...
→ Different dates!! )

[{
    x: 2016-02-01 00:00:00,
    y: 19
}, {
    x: 2016-02-01 00:00:00,
    y: 40
}, {
    x: 2016-02-01 00:00:00,
    y: 0
},{
    x: 2016-02-01 00:00:00,
    y: 0
}, {
    x: 2016-02-01 00:00:00,
    y: 1
}, {
    x: 2016-02-01 00:00:00,
    y: 1
}]

Disclamer: Didn't test it... But it is certainly close... If not working at first attempt.

Answer 2

Than you for the support, but I have found the solution finally. The problem was that I have tried to push the arrays each time when I had different variable, so it was overwriting the values on each date.

The solution is to create an array, one for each policy and then assign the values to this array. Timeline on the xAxis will be suitable for the date pushed to labels.

This is the correct part of the code:

var jsondata = [],jsondata1 = [],jsondata2 = [],jsondata3 = [],jsondata4 = [],jsondata5 = [],data = [];
var jsonLabel = [], series=[];
var url = 'url';
$http.get(url).then(function (response) {
    for (var i = 0; i < 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 == "policy"){
            jsondata.push(j);
        }else if(k == "policy1"){
            jsondata1.push(j);
        }else if(k == "policy2"){
            jsondata2.push(j);
        }else if(k == "policy3"){
            jsondata3.push(j);
        }else if(k == "policy4"){
            jsondata4.push(j);
        }else if(k == "policy5"){
            jsondata5.push(j);
        }
        jsonLabel.push(d);
        series.push(k);
    }
});

$scope.labels = jsonLabel;
$scope.series = series;
$scope.data = [
    jsondata,jsondata1,jsondata2,jsondata3,jsondata4,jsondata5
];

Chart:

All i need to do is change the colors now, because this ones looks similar.

Thank you for the help!