Search code examples
javascriptjquerymorris.js

Morris.js Chart (line) - Is showing a continuous line

I am doing maintenance in a system, and I need to change a graph on the dashboard,they are using the morris.js.

I need to create a Morris.Line Graph, but something is not working, and I could not find what I am doing wrong.

The code for now is that:

   $.ajax({
            url: url,
            type: 'get',
            dataType: 'JSON',
            async: true,
            beforeSend: function() {console.log('instagram ') },
            success: function(response) {
                console.log(response);
                new Morris.Line({
                    element: 'morrisLine1',
                    data: response,
                    xkey: 'y',
                    ykeys: ['a'],
                    labels: ['Daily Progress'],
                    lineColors: ['#f74f75'],
                    lineWidth: 3,
                    ymax: 300000,
                    gridTextSize: 12,
                    hideHover: 'auto',
                    resize: true
                });
            },
            complete: function() { console.log('instagram end')  }
        });

Here you will see, in the console, the "response" value:

enter image description here

But the graph it is showing me that:

enter image description here

How can I change it to show the waves?

Solution

  • I'm not familiar with that library. but your response numbers are too similar to show the difference in the chart. what if you make ymax, ymin dynamic based on min max response?