Search code examples
javascriptlinechartmorris.js

Morris JS Chart not displaying data starting with first 3 digits as 0

I am working on a graph that should display column date and column absolute_value retrieved from the database shown below. While date is working fine, but for some reason the values starting with 0s in the column absolute_values are not displaying at all. They are being replaced and displayed randomly(or not) by other numbers not starting with 0s.

| date                | absolute_value |
| ------------------- | -------------- | 
| 2023-10-29 18:12:11 | 00027424       |
| 2023-10-29 18:12:11 | 00027465       | 
| 2023-10-29 18:12:11 | 00021236       |
| 2023-10-29 18:12:11 | 00083476       |

This is the script:

$(document).ready(function() {
  new Morris.Area({
    element: 'chart4',
    data: [{
      period: '2023-10-29 18:12:11',
      absolute_value: 00027424

    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: 00027465

    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: 00021236

    }, {
      period: '2023-10-29 18:12:11',
      absolute_value: 00083476
    }],
    xkey: 'period',
    ykeys: ['absolute_value'],
    labels: ['absolute_value'],
    hideHover: 'auto',
    pointSize: 3,
    fillOpacity: 0,
    pointStrokeColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    behaveLikeLine: true,
    gridLineColor: '#eeeeee',
    lineWidth: 2,
    lineColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    resize: true

  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<div id="chart4"></div>

This is the graph that I got after my query was echoed. For eg, the value 00027424 is being displayed as 27,581on the graph.

graph

On the Database, the query is returning the correct values. Why is this happening? Are the numbers being formatted for this type of digits?

Solution

  • Your numbers are seen as OCTAL when the OBJECT itself is parsed by the JavaScript interpreter. You need to send them as strings.

    Then you need to assign the hoverCallback to show the original string

    Here is a working script

    const displayValues = [];
const data = [{
  period: '2023-10-29 17:12:11',
  absolute_value: '00027424'

}, {
  period: '2023-10-29 18:12:11',
  absolute_value: '00027465'

}, {
  period: '2023-10-29 19:12:11',
  absolute_value: '00021236'

}, {
  period: '2023-10-29 20:12:11',
  absolute_value: '00083476'
}].map(({
  period,
  absolute_value
}) => {
  displayValues.push(absolute_value);
  return {
    period,
    absolute_value: parseInt(absolute_value, 10)
  }
});
$(document).ready(function() {
  new Morris.Area({
    hoverCallback: function(index, options, content, row) {
      var data = options.data[index];
      const $content = $(`<div>${content}</div>`); // copy the hover HTML
      $content.find(".morris-hover-point").text(`absolute_value: ${displayValues[index]}`);
      return $content.html();
    },

    element: 'chart4',
    data: data,
    xkey: 'period',
    ykeys: ['absolute_value'],
    labels: ['absolute_value'],
    hideHover: 'auto',
    pointSize: 3,
    fillOpacity: 0,
    pointStrokeColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    behaveLikeLine: true,
    gridLineColor: '#eeeeee',
    lineWidth: 2,
    lineColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    resize: true,
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<div id="chart4"></div>

    Here is an alternative where you send the values as integers and we pad them with leading 0s

    const displayValues = [];
const data = [{
  period: '2023-10-29 17:12:11',
  absolute_value: 27424

}, {
  period: '2023-10-29 18:12:11',
  absolute_value: 27465

}, {
  period: '2023-10-29 19:12:11',
  absolute_value: 21236

}, {
  period: '2023-10-29 20:12:11',
  absolute_value: 83476
}].map(({
  period,
  absolute_value
}) => {
  displayValues.push(String(absolute_value).padStart(8,"0"));
  return {
    period,
    absolute_value: parseInt(absolute_value, 10)
  }
});
$(document).ready(function() {
  new Morris.Area({
    hoverCallback: function(index, options, content, row) {
      var data = options.data[index];
      const $content = $(`<div>${content}</div>`); // copy the hover HTML
      $content.find(".morris-hover-point").text(`absolute_value: ${displayValues[index]}`);
      return $content.html();
    },

    element: 'chart4',
    data: data,
    xkey: 'period',
    ykeys: ['absolute_value'],
    labels: ['absolute_value'],
    hideHover: 'auto',
    pointSize: 3,
    fillOpacity: 0,
    pointStrokeColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    behaveLikeLine: true,
    gridLineColor: '#eeeeee',
    lineWidth: 2,
    lineColors: ['#2cbfb7', '#98c932', '#2cbfb7'],
    resize: true,
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<div id="chart4"></div>