Cant get array to show in line chart using either JS/KnockoutJS

Question

I have a ajax call to the database to get date fields, which are basically like this.["2016-3", "2016-5", "2016-6", "2016-7", "2016-8"], When I call them from the db I get them exactly as the way you see in the array, but I cannot get them working on the chart, if I manually type those array it works but if I use an observableArray or just a ordinary js array both do not work. Here is the code for the ajax call being made.

  var  arr = [ ]; //normal js array 
    self.DateArray = ko.observableArray(); // knockout js array 
    self.LineChart = function () {
            $.ajax({
                type: 'POST',
                url: BASEURL + 'index.php/moneyexchange/portfolioDevelopment/' + auth ,
                contentType: 'application/json; charset=utf-8'
            })
            .done(function(data) {
              console.log(data);
               arr = data.slice();
               self.DateArray(data);
               console.log(self.DateArray());
                console.log(arr);
            })
            .fail(function(xhr, status, error) {
                alert(status);
            })
            .always(function(data){                 
            });
        };
      self.LineChart();

Both the console.log shows this.

The line chart is working since the values are manually typed in.

this.MasnadsLineChart = {
                    labels: ["2016-3", "2016-5", "2016-6", "2016-7", "2016-8"],
                    datasets: [
                        {
                            label: "My First dataset",
                            fillColor: "rgba(220,220,220,0.1)",
                            strokeColor: "yellow",
                            pointColor: "#ffcc33",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: [65, 59, 80, 81, 56, 55, 40,80, 81, 56, 55, 40]
                        },
                        {
                            label: "My Second dataset",
                            fillColor: "rgba(151,187,205,0.1)",
                            strokeColor: "rgba(151,187,205,1)",
                            pointColor: "rgba(151,187,205,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(151,187,205,1)",
                            data: [41, 48, 40, 19, 86, 27, 90 ,80, 81, 56, 55, 40]
                        }
                    ]
                };

I tried writing labels : self.DateArray() and even labels : arr both do not work, now I am confused on how to get those values to work on the graph. this is what the ajax call is bringing back and here is the link from where I got the chart https://github.com/grofit/knockout.chart

T.J. Crowder · Answer 1 · 2016-04-28T07:11:46.560

0

You're replacing arr with a new array, but not doing anything with arr anywhere.

If you want KO to see the data, you need to put it in the observable array, not an unrelated raw array.

Perhaps:

.done(function(data) {
    self.DateArray(data);
})

Also:

I tried writing labels : self.DateArray() and even labels : arr both do not work

It's a KO library, it's probably expecting an observable array:

labels: self.DateArray

edited Apr 28 '16 at 07:11

answered Apr 28 '16 at 07:07

T.J. Crowder

1,031,962
187
1,923
1,875

@MasnadNihit: I think you were initializing `labels` incorrectly as well, I added to the answer. – T.J. Crowder Apr 28 '16 at 07:12
labels: self.DateArray, tried it, dint work. I am really confused – Masnad Nihit Apr 28 '16 at 07:13
Hey, No one is trying to help out, do you know any solution, would help me alot :( – Masnad Nihit Apr 28 '16 at 09:23
@MasnadNihit: Well, **I** tried to help out. But I haven't used the plugin. – T.J. Crowder Apr 28 '16 at 09:25
its very weird that if I do it this way self.DateArray = ko.observableArray(["2016-3", "2016-5", "2016-6", "2016-7", "2016-8"]); but when I push the data from the ajax call which is pretty much the same, it does not work – Masnad Nihit Apr 28 '16 at 09:28
@MasnadNihit: a generally good thing to keep in mind is that there is no magic. Your ajax call may be returning data in a different shape, so `console.log` whatever you're trying to push to `self.DateArray`. Or maybe the library isn't responding properly to the observable changes, try `self.DateArray.push(["2017-01"])` to see how it works with static data. Or you could try `self.DateArray = ko.observable([]);` and then instead of pushing, replace the array: `self.DateArray(["2017-01"])`. These are not solutions, but ideas on how to poke at the magic until it shares its secrets. – Milimetric Dec 06 '16 at 17:09

Cant get array to show in line chart using either JS/KnockoutJS

1 Answers1