Borko Kovacev Borko Kovacev - 14 days ago 7
Javascript Question

ChartJS Scatter Graph X Axis Label Not showing up properly

I am fairly new to javascript world, so bear with me if there is an obvious solution to this, but I'm struggling to graph the dates (X-points) on the X axis of the chartjs graph. I get some weird times there that you can check on jsfiddle. What am I doing wrong?

var ctx = document.getElementById("myChart");
var data = {
datasets: [{
label: " Property",
lineTension: 0.1,
data: [{
x: 2017 - 04 - 11,
y: 2000000.00
},
{
x: 2017 - 04 - 12,
y: 1000000.00
},
{
x: 2017 - 04 - 13,
y: 3000000.00
},
]
},
{
label: " Property",
lineTension: 0.1,
data: [{
x: 2017 - 04 - 12,
y: 472943.00
},
{
x: 2017 - 04 - 13,
y: 1000000.00
},
]
},
]
};
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
xAxes: [{
id: 'ScartCharxAxes',
type: 'time',
unit: 'day',
time: {
displayFormats: {
day: 'D MMM YYYY'
},
}
}]
}
}
});


My code is available on http://jsfiddle.net/py1bpf02/3/

Answer

In your datasets, dates should be strings. What you did is math, not dates. 2017-04-11 = 2002.

var ctx = document.getElementById("myChart");
var data = {
  datasets: [

    {
      label: " Property",
      lineTension: 0.1,
      data: [{
          x: "2017-04-11",
          y: 2000000.00
        },

        {
          x: "2017-04-12",
          y: 1000000.00
        },

        {
          x: "2017-04-13",
          y: 3000000.00
        },
      ]
    },

    {
      label: " Property",
      lineTension: 0.1,
      data: [{
          x: "2017-04-12",
          y: 472943.00
        },

        {
          x: "2017-04-13",
          y: 1000000.00
        },
      ]
    },


  ]
};

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      xAxes: [{
        id: 'ScartCharxAxes',
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D MMM'
          },
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>