I used morris chart in my application project to show some details about quantity of sales.

After executing the AJAX request, the chart is only showing half part. Here's the syntax:

var chartBahan = Morris.Bar ({
    element: 'morris-analytics-bahan',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Quantity Bahan'],
    resize: false,
    gridEnabled: true
}); 

//getting the morris chart over bahan and karakteristik
function getBahanPotensial(kode){
    //ajax call
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateListBahanPotensial",
        data:{
            kode:kode
        },
        success: function(data){
            chartBahan.setData($.parseJSON(data));
            chartBahan.redraw();
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    }); 
}

var chartKarakter = new Morris.Bar ({
    element: 'morris-analytics-karakter',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Karakter Quantity'],
    resize: true
});

function getKarakterPotensial(kode){
    //ajax call
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateListKarakterPotensial",
        data:{
            kode:kode
        },
        success:function(data){
            chartKarakter.setData($.parseJSON(data));
            chartKarakter.redraw();
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    });
}

I execute the above function from another function let say doProcess()

function sendRequest(thecode){
    if(thecode === ""){ alert("Tolong Input Kode Produk");}
    else {
        var kodebarang = thecode;
    }
    //executing AJAX call.                   
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateAnalytics",
        data:{
            kodebarang:kodebarang
        },
        success:function(msg){
            $('#result_analysis').show();
            $('#navigation_button').show();
            new Morris.Bar ({
                element: 'morris-analytics-bar',
                data: $.parseJSON(msg),
                xkey: '1',
                ykeys: ['2', '3'],
                labels: ['Sales Area', 'Tingkat Penjualan'],
                barRatio: 0.4,
                xLabelAngle: 0,
                hideHover: 'auto'
            });

            //execute the morris chart others !! PENTING
            var kodeb = $('#bahan_id').val();
            var kodek = $('#karakteristik_id').val();
            getBahanPotensial(kodeb);
            getKarakterPotensial(kodek);
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    });
}

but the problem is, when i create Morris Chart in Success Callback

success:function(msg){
    $('#result_analysis').show();
    $('#navigation_button').show();
    new Morris.Bar ({
        element: 'morris-analytics-bar',
        data: $.parseJSON(msg),
        xkey: '1',
        ykeys: ['2', '3'],
        labels: ['Sales Area', 'Tingkat Penjualan'],
        barRatio: 0.4,
        xLabelAngle: 0,
        hideHover: 'auto'
    });

The chart is properly showing. Here's the screen shot:

But the other chart when i use template for charting (outside the success callback) the chart is BROKEN

here's the screenshot

then, i have dropdown list to regenerate the chart based on specific parameter, the chart is properly showing (all data show) BUT the chart is only half PAGE. here's the screenshot:

Is there any ideas what going on?

UPDATE

What I mean template is code like this:

var chartBahan = Morris.Bar ({
    element: 'morris-analytics-bahan',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Quantity Bahan'],
    resize: false,
    gridEnabled: true
});

and the method to call the template is

success:function(data){
    chartBahan.setData($.parseJSON(data));
    chartBahan.redraw();
},

The RIGHT chart is the FIRST Screenshot. It's wider than the other two.

UPDATED 2

still getting error on charts created by Morris :(

here's the screenshot.

I used morris chart in my application project to show some details about quantity of sales.

After executing the AJAX request, the chart is only showing half part. Here's the syntax:

var chartBahan = Morris.Bar ({
    element: 'morris-analytics-bahan',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Quantity Bahan'],
    resize: false,
    gridEnabled: true
}); 

//getting the morris chart over bahan and karakteristik
function getBahanPotensial(kode){
    //ajax call
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateListBahanPotensial",
        data:{
            kode:kode
        },
        success: function(data){
            chartBahan.setData($.parseJSON(data));
            chartBahan.redraw();
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    }); 
}

var chartKarakter = new Morris.Bar ({
    element: 'morris-analytics-karakter',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Karakter Quantity'],
    resize: true
});

function getKarakterPotensial(kode){
    //ajax call
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateListKarakterPotensial",
        data:{
            kode:kode
        },
        success:function(data){
            chartKarakter.setData($.parseJSON(data));
            chartKarakter.redraw();
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    });
}

I execute the above function from another function let say doProcess()

function sendRequest(thecode){
    if(thecode === ""){ alert("Tolong Input Kode Produk");}
    else {
        var kodebarang = thecode;
    }
    //executing AJAX call.                   
    $.ajax({
        type:"POST",
        async: false,
        url:"<%= request.getContextPath()%>/GenerateAnalytics",
        data:{
            kodebarang:kodebarang
        },
        success:function(msg){
            $('#result_analysis').show();
            $('#navigation_button').show();
            new Morris.Bar ({
                element: 'morris-analytics-bar',
                data: $.parseJSON(msg),
                xkey: '1',
                ykeys: ['2', '3'],
                labels: ['Sales Area', 'Tingkat Penjualan'],
                barRatio: 0.4,
                xLabelAngle: 0,
                hideHover: 'auto'
            });

            //execute the morris chart others !! PENTING
            var kodeb = $('#bahan_id').val();
            var kodek = $('#karakteristik_id').val();
            getBahanPotensial(kodeb);
            getKarakterPotensial(kodek);
        },
        error:function(msg){
            alert("Data Failed to Analyze" + msg); 
        }
    });
}

but the problem is, when i create Morris Chart in Success Callback

success:function(msg){
    $('#result_analysis').show();
    $('#navigation_button').show();
    new Morris.Bar ({
        element: 'morris-analytics-bar',
        data: $.parseJSON(msg),
        xkey: '1',
        ykeys: ['2', '3'],
        labels: ['Sales Area', 'Tingkat Penjualan'],
        barRatio: 0.4,
        xLabelAngle: 0,
        hideHover: 'auto'
    });

The chart is properly showing. Here's the screen shot:

But the other chart when i use template for charting (outside the success callback) the chart is BROKEN

here's the screenshot

then, i have dropdown list to regenerate the chart based on specific parameter, the chart is properly showing (all data show) BUT the chart is only half PAGE. here's the screenshot:

Is there any ideas what going on?

UPDATE

What I mean template is code like this:

var chartBahan = Morris.Bar ({
    element: 'morris-analytics-bahan',
    xkey: '2',
    ykeys: ['3'],
    labels: ['Quantity Bahan'],
    resize: false,
    gridEnabled: true
});

and the method to call the template is

success:function(data){
    chartBahan.setData($.parseJSON(data));
    chartBahan.redraw();
},

The RIGHT chart is the FIRST Screenshot. It's wider than the other two.

UPDATED 2

still getting error on charts created by Morris :(

here's the screenshot.

• javascript
• charts
• morris.js

• Where is 'outside the success callback' if you draw all 3 charts inside 3 success callbacks? What do you mean by the word 'template', where is it in the code? Also the last screenshot looks ok to me, but if something is wrong, write more details how it should look. – vortexwolf Commented Feb 21, 2014 at 11:32

4 Answers 4

I solved that issue by setting the width of the svg element to 100% in css

svg{
  width: 100% !important
}

Two last charts from your example threw lots of errors in the console of Google Chrome (you can open it by pressing F12).

The reason is that the data property is required when you call Morris.Bar({ data: ... }), but in you example you didn't have this property. So you should pletely remove your declarations like var chartBahan = Morris.Bar (... and replace the success callback with this code:

function getBahanPotensial(kode){
    $.ajax({
    ...
        success: function(data){
            if (window.chartBahan) {
                chartBahan.setData($.parseJSON(data));
                // chartBahan.redraw(); // useless call, it can be removed
            } else {
                window.chartBahan = Morris.Bar ({
                    element: 'morris-analytics-bahan',
                    data: $.parseJSON(data),
                    xkey: '2',
                    ykeys: ['3'],
                    labels: ['Quantity Bahan'],
                    resize: false,
                    gridEnabled: true
                }); 
            }
        }
    ...
    }); 
}

In my code I check whether the global variable window.chartBahan exists and if it doesn't - I create a new chart; otherwise I call setData and the chart updates itself automatically.

Also you haven't posted your HTML mark-up, it may have issues as well. I used this HTML code and it worked fine:

<body>
    <div id="morris-analytics-bar" style="height: 250px;"></div>
    <div id="morris-analytics-bahan" style="height: 250px;"></div>
    <div id="morris-analytics-karakter" style="height: 250px;"></div>
</body>

//Java script code

Morris.Line({
      element: 'hero-area',
      data: getdata("<?php echo base_url('user/getYearlPremiumuser');?>") ,
      xkey: 'Year',
      parseTime: false,
      ykeys: ['Teacher', 'Student'],

      labels: ['Teacher', 'Student'],
      hideHover: 'false',
      lineWidth: 1,
      pointSize: 5,
      lineColors: ['#4a8bc2', '#ff6c60'],
      fillOpacity:7,
      smooth: true
  }); 

********//php code ( code codeigniter)********

  public function getYearlPremiumuser()
    {

         $teacherArray={ y: '2014', a: 50, b: 90},
  { y: '2015', a: 65,  b: 75},
  { y: '2016', a: 50,  b: 50},
  { y: '2017', a: 75,  b: 60},
  { y: '2018', a: 80,  b: 65},
  { y: '2019', a: 90,  b: 70},
  { y: '2020', a: 100, b: 75},
  { y: '2021', a: 115, b: 75},
  { y: '2022', a: 120, b: 85},
  { y: '2023', a: 145, b: 85},
  { y: '2024', a: 160, b: 95}
        for($i=0;$i<count($teacherArray);$i++)
        {
            $temp=array();
            $temp=  array_merge($teacherArray[$i],$studentarray[$i]);
            $finalResultArray[]=$temp;

        }
        echo json_encode($finalResultArray); 
    }

click here to know more

I have similar issue using Morris.js and Angular2 - the problem in my case was that I use in DIV with chart the *ngIf='showChart' (or [hidden]='!showChart') - and when I set up chart, the showChar=false so the div doesn't exist. In my case I read date periodic in every 1min so at first dataLoad i see nothing, after second dataLoad i see half/part of chart). So I fix this by (typescript):

showchart = true;
setTimeout( () => { this.setUpChart() }, 1 );

And it works :)