Passing array data to Morris Chart using JSON

Question

I want to pass dynamic array data to Morris Charts from my Ajax Success return.

I arrive to get all data for the line chart.

How to do with this code to send data.json and data.y in the this.createAreaChartDotted parameters?

!function($) {
"use strict";

    var MorrisCharts = function() {};

    //creates area chart with dotted
    MorrisCharts.prototype.createAreaChartDotted = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, Pfillcolor, Pstockcolor, lineColors) {
        Morris.Area({
            element: element,
            pointSize: 3,
            lineWidth: 1,
            data: data,
            xkey: xkey,
            ykeys: ykeys,
            labels: labels,
            hideHover: 'auto',
            pointFillColors: Pfillcolor,
            pointStrokeColors: Pstockcolor,
            resize: true,
            gridLineColor: '#eef0f2',
            lineColors: lineColors
        });
    },

    MorrisCharts.prototype.init = function() {
        var id_transmetteur = $('#id_transmetteur').val();
        var table_name = $('#table_name').val();
        var category_table = $('#category_table').val();

        $.ajax({
          method:"post",        
          dataType: 'json',
          url: $('#ajax').val()+'getDataCapteurs.php',
          success: function(data){
            if(data.status == 'success'){
                console.log(data.json); //Replace $areaDotData
                console.log(data.y); //Replace ['a', 'b'] in this.createAreaChartDotted()
            } else if(data.status == 'error'){
              if(data.messages.length>0){     
                var i;
                for (i = 0; i < data.messages.length; ++i) {
                    if(data.messages[i][0] == 'error'){
                        console.log('error');
                    }
                }
              }
            }
          }
        });

        //creating area chart with dotted
        var $areaDotData = [
                    { y: '2009', a: 10, b: 20 },
                    { y: '2010', a: 75,  b: 65 },
                    { y: '2011', a: 50,  b: 40 },
                    { y: '2012', a: 75,  b: 65 },
                    { y: '2013', a: 50,  b: 40 },
                    { y: '2014', a: 75,  b: 65 },
                    { y: '2015', a: 90, b: 60 }
                ];
        this.createAreaChartDotted('morris-area-with-dotted', 0, 0, $areaDotData, 'y', ['a', 'b'], ['Series A', 'Series B'],['#ffffff'],['#999999'], ['#52bb56', '#ebeff2']);

    },
    //init
    $.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = MorrisCharts
}(window.jQuery),

//initializing 
function($) {
    "use strict";
    $.MorrisCharts.init();
}(window.jQuery);

I tried to declare a variable after MorrisCharts.prototype.init = function(){ var data_chart; ...} and in ajax success : data_chart = data.json but when I tested my variable, she is undefined.

Thanks for helps.

Answer 1

You won't be able to access that data from outside the success callback in your ajax call. So instead, do whatever you need to do within the success callback. Try initializing the Morris chart from within the ajax call.

!function($) {
"use strict";

var MorrisCharts = function() {};

//creates area chart with dotted
MorrisCharts.prototype.createAreaChartDotted = function(element, pointSize, lineWidth, data, xkey, ykeys, labels, Pfillcolor, Pstockcolor, lineColors) {
    Morris.Area({
        element: element,
        pointSize: 3,
        lineWidth: 1,
        data: data,
        xkey: xkey,
        ykeys: ykeys,
        labels: labels,
        hideHover: 'auto',
        pointFillColors: Pfillcolor,
        pointStrokeColors: Pstockcolor,
        resize: true,
        gridLineColor: '#eef0f2',
        lineColors: lineColors
    });
},

MorrisCharts.prototype.init = function(data, yData) {
    this.createAreaChartDotted('morris-area-with-dotted', 0, 0, data, 'y', yData, ['Series A', 'Series B'],['#ffffff'],['#999999'], ['#52bb56', '#ebeff2']);
},
//init
$.MorrisCharts = new MorrisCharts, $.MorrisCharts.Constructor = 
MorrisCharts
}(window.jQuery),

function($) {
"use strict";

var id_transmetteur = $('#id_transmetteur').val();
var table_name = $('#table_name').val();
var category_table = $('#category_table').val();

$.ajax({
    method:"post",        
    dataType: 'json',
    url: $('#ajax').val()+'getDataCapteurs.php',
    success: function(data){
    if(data.status == 'success'){
        var data = data.json;
        var yData = data.y;

        //Send data & Yaxis
        $.MorrisCharts.init(data, yData);

    } else if(data.status == 'error'){
        if(data.messages.length>0){     
        var i;
        for (i = 0; i < data.messages.length; ++i) {
            if(data.messages[i][0] == 'error'){
                console.log('error');
            }
        }
        }
    }
    }
});
}(window.jQuery);