Search code examples
javascriptphpmorris.js

Can not display xlabel in morris.js

I have problem in displaying line graph data using morris.js and php. xlabel on the line chart diagram does not want to display label_jam as I want. How to handle it?

Below is an error image of the line chart view:

enter image description here

This is my code

Morris.Line({
    element: 'bar-jam',
    data: <?php echo $data_per15menit; ?>,
    xkey: 'label_jam',
    ykeys: ['value_jml'],
    labels: ['Jumlah'],
    hideHover: 'auto',
    resize: false,
    lineColors: ['#0b62a4'],
    smooth: true
});
Solution

  • Set the parseTime parameter to false:

    parseTime: false

    Please try the following snippet:

    var data =
[
    {"label_jam":"11:15:00", "value_jml":"557"},
    {"label_jam":"11:30:00", "value_jml":"574"},
    {"label_jam":"11:45:00", "value_jml":"630"},
    {"label_jam":"12:00:00", "value_jml":"600"},
    {"label_jam":"12:15:00", "value_jml":"574"},
    {"label_jam":"12:30:00", "value_jml":"533"},
    {"label_jam":"12:45:00", "value_jml":"728"},
    {"label_jam":"13:00:00", "value_jml":"767"}
];

Morris.Line({
    element: 'bar-jam',
    data: data,
    xkey: 'label_jam',
    ykeys: ['value_jml'],
    labels: ['Jumlah'],
    hideHover: 'auto',
    resize: false,
    lineColors: ['#0b62a4'],
    smooth: true,
    parseTime: false
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="bar-jam"></div>