hereChartJS Line Chart with Time Axis

Question

I have created a line chart with "time" axis. I added 2 labels on the time axis; Time1, Time1+15 minutes. But my chart is always showing the label two as Time1+1 minute. Why isn't it showing correct labels.

I have added my code on jsfiddle, but somehow its not working on fiddle.

        var ctx = document.getElementById("chartData").getContext("2d");
    var LiveChart = new Chart(ctx, {
      type: 'line',
      data: data_live,
      options: live_options
    });

Here is link http://jsfiddle.net/uLUAT/563/

Edit: So here we go. I want to make a real time chart and want my window to be always of fixed size. i.e. i always want to show the data of 5 minutes in my chart. When i have 5 minutes of data shown on chart, it should start removing the older data and only show the latest data also the labels should not increase in my chart. On the fiddle, you can see that as soon as the new data comes, the number of labels are increasing on xaxis. How can i achieve this?

Any help is highly appreciated.

tektiv tektiv · Accepted Answer · 2016-11-02T13:10:06

Tthe syntax is different if you are using Chart.js v1 or v2.

You imported the v1.02 library using <script src="http://www.chartjs.org/assets/Chart.js"></script>.

But you actually used the v2 syntax :

var myChart = new Chart(ctx, {
    type: 'line',
    data: data_live,
    options: live_options
});

You can fix this by importing the right library (which is the v2) :

<!-- The following is the latest version of Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>

hereChartJS Line Chart with Time Axis

1 Answers