In Rickshaw charting changing data for one chart changes data for the others

Question

I have 3 tabs in which I am displaying 3 different Rickshaw charts, Line, Bars and Stacked Area. These each have two series, comparing data from one time range against another time range. The Stacked Area chart requires that both series contains full arrays of data for the entire date range being displayed, whereas the other two do not. The date ranges I am currently dealing with are the ranges of hours for today vs the hours for yesterday.

This is what the line chart looks like:

The data for "Today" actually stops at 10am, but the code I used to fix the Stacked Area chart also changed the dataset for the line chart so that it displays 0 for the remaining hours of the day. The data is obtained from the database via an Ajax call to the db access code. It comes back with two series, one for 24 hours for Yesterday and one for the 10 hours of Today.

To fix the dataset for the Stacked Area chart so that the Today data also contained 24 hours of data, I created a new variable to assign the data array to and then converted that data, adding 14 hours of 0. I pass that data to the Stacked Area chart and the original data to the other charts, but the data passed to the other two charts also gets altered as if I'm assigning the new variable by reference. I need to know how to make the two datasets separate.

Below is the js for the Ajax call and the code that handles the response:

this.Load = function (data) {
            console.log('Compare kpis js 76, Data loaded for kpis: ', data);
            if (_xhr) {
                _xhr.abort();
                _xhr = null;
            }

            _this.SetLoading(true);

            _xhr = $.ajax({
                url: $("meta[name='root']").attr("content") + '/app/analysis/compare/kpis',
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    date_id: data.dateRange.date,
                    sub_date_id: data.subDateRange.date,
                    venue_id: data.venue,
                    floor_id: data.floor,
                    zone_id: data.zone
                },
                dataType: 'JSON',
                async: true,
                cache: false,
                error: function (jqXHR, textStatus, errorThrown) {
                    _this.SetLoading(false);
                },
                success: function (response) {
                    _this.SetLoading(false);
                    console.log('Kpis js 105, Response Ajax: ', response);
                    _this.SetKey(data.dateRange.key);
                    _this.SetSubKey(data.subDateRange.key);
                    _this.Update(response);
                }
            });
        };

        this.Update = function (data) {
            console.log('Compare Kpis js 114, Data: ', data);
            if (_.isUndefined(data) || _.isNull(data)) { data = {}; }
            
            var stackData = data.chartData;

            console.log('Kpis js 135, Series 1: ', stackData.series[0].data);
            console.log('Kpis js 136, Series 1 xAxis: ', stackData.xAxis);

            var newElement = new Array;

            if (stackData.series[0].data.length < stackData.xAxis.length) {
                var i = stackData.series[0].data.length;
                var lastElement = i - 1;
                
                while (i < stackData.xAxis.length) {
                    newElement = {x: i, y: 0};
                    console.log('Kpis js 147, chart element: ', newElement);
                    stackData.series[0].data.push(newElement);
                    i++;
                }
            }

            console.log('Compare Kpis js 153, Chart Data: ', data.chartData);
            if (this.Chart && data.chartData) { this.Chart.Update(data.chartData); }
            if (this.Bars && data.chartData) { this.Bars.Update(data.chartData); }
            if (this.Stack && stackData) { this.Stack.Update(stackData); }
        };

Although I assigned the dataset to a new variable before adding the new data, it also gets added to the original dataset. How to I prevent that?

Answer 1

Right after posting this, I asked the question in a different way and got the answer I needed. The solution is to assign to the 'stackData' variable the dataset through conversion to and from JSON data as such:

var stackData = JSON.parse(JSON.stringify(data.chartData));

This works like a charm.