CODEWITHSUNDEEP
chart.js
chenard612
chenard612

Reputation: 101

Chart.js displays dates in x axis that are not present in my dataset

I have a problem with my x-axis in chart.js.

My objective is to display stock prices in a graph. I want my users to be able to toggle multiple timeframes and modify the graph in consequence. For example, by default the graph displays the daily prices (measured from 9:30 to 16:00). If a user wants to see the weekly prices, then the graph changes and display all my data measures from 7 days ago to today.

The problem arises here. Since the weekend I take no measures of the price (the stock market is closed), my x-axis still displays all 7 days (including weekend days). I want to know if there is a way to discriminate against weekends in my x-axis.

Here's a picture of my problem:

enter image description here

As you can see, October 30th and 31st collapse on top of each other because , while I have no data for them they are still included in my axis.

Here is a copy of my code:

I receive the data by an ajax call (named 'data')

var min_x = new Date();
var max_x = new Date();
min_x.setDate(min_x.getDate() - 8);
myChart.options.scales.xAxes[0].time.unitStepSize = 1;
myChart.options.scales.xAxes[0].time.isoWeekday = true;
myChart.options.scales.xAxes[0].ticks.maxTicksLimit = 8;
myChart.options.scales.xAxes[0].time.unit = 'day';
myChart.options.scales.xAxes[0].distribution = 'timeseries';
myChart.options.scales.xAxes[0].ticks.autoSkip = true;

myChart.options.scales.xAxes[0].ticks.min = min_x;
myChart.options.scales.xAxes[0].ticks.max = max_x;
myChart.update();

    for (var k = 1; k < data.datapoints.length; k++){
      var point = data.datapoints[data.datapoints.length - k].latest_price;
      var date = data.datapoints[data.datapoints.length - k].time;
      label_list.push(date);
      datalist_list.push(data.datapoints[k].latest_price);
      var new_small_dict = {'x':data.datapoints[k].time, 'y':data.datapoints[k].latest_price};
      dictionary_list.push(new_small_dict);
    }
   myChart.data.labels = label_list;
   myChart.data.datasets[0].data = dictionary_list;
   myChart.update();

If anybody has an idea on how to solve this issue, that would help me greatly. Thank you very much.

Upvotes: 1

Views: 1849

Answers (2)

fixitfeliks
fixitfeliks

Reputation: 1

I had the same issue here is what I did.

Since I am using object data and providing [{x: "", y: ""}...]

I needed to add "source": "data" to the ticks object for the axis with the issue.

{
"scales": {
    "x": {
        "ticks": {
            **"source": "data"**
        },
        "time": {
            "displayFormats": {
                "day": "MMM D ddd"
            },
            "unit": "day"
        },
        "type": "timeseries",
        "title": {
            "display": true,
            "text": "Date"
        }
    }
}

Upvotes: 0

pedrouan
pedrouan

Reputation: 12910

Finally found it. It was surprisingly easy solution for my issue, I hope it'll be for yours either.

In my answer I am using latest version, of Chart.js 3, but timeseries should be present in older versions as well.

The time series scale extends from the time scale and supports all the same options. However, for the time series scale, each data point is spread equidistant.

https://www.chartjs.org/docs/latest/axes/cartesian/timeseries.html

I had

scales: {       
   x: {        
      type: 'time'
   }
}

Weekends had ugly lines with no change in prices

Then I changed it to timeseries:

scales: {       
   x: {        
      type: 'timeseries'
   }
}

Now it is OK, even if it shows pre market/after hours prices

And it works now. I just noticed bug with overlapping weekend dates, but that's another issue. :)

Upvotes: 1

Related Questions