We Keep Coding

Chart.js How to limit data shown based only on x-axis labels?

I have a set graph that ranges from 300 - 850 on the y-axis, and the user can update the chart and select a 3, 6, or 12 month range on the x-axis, where the far right value should be the most recent month in the data set. But Chart.js appends the data that is out of my label range: ] where
labels: ["Apr'17", "May'17", "Jun'17"]
data: [{"x": "Jan'17", "y": 565},{"x": "Mar'17","y": 765},{"x": "Jun'17","y": 665}]
I only want the Jun'17 data point shown here, but Jan'17 and Mar'17 data points are appended. I can add a max, min limit on the x-scale, but is that the only way to accomplish this? There seems like there should be a cleaner solution.
It works with the 6 month range as I would expect with the same data, but the previous three months added to the labels array:

dimple - Ploting annual series as stacked lines

I am having a hard time attempting to stack yearly time series with dimple.js.
For each year, one line should be printed, representing the cumulative amounts from January 1st to December 31.
[{"year":"2018","month":"1","day":"15","date":"2018-01-15","amount":"60.00","cumulative_amount":"60.00"},
{"year":"2018","month":"1","day":"29","date":"2018-01-29","amount":"20.00","cumulative_amount":"80.00"},
{"year":"2018","month":"2","day":"18","date":"2018-02-18","amount":"150.00","cumulative_amount":"230.00"},
{"year":"2018","month":"3","day":"10","date":"2018-03-10","amount":"10.00","cumulative_amount":"240.00"},
{"year":"2018","month":"4","day":"13","date":"2018-04-13","amount":"30.00","cumulative_amount":"270.00"},
(...)
{"year":"2019","month":"1","day":"4","date":"2019-01-04","amount":"40.00","cumulative_amount":"40.00"},
{"year":"2019","month":"1","day":"25","date":"2019-01-25","amount":"10.00","cumulative_amount":"50.00"},
{"year":"2019","month":"3","day":"12","date":"2019-03-12","amount":"225.00","cumulative_amount":"275.00"},
(...)
]
Based on the records above, the desired plot should look like:
But the current plot looks like:
var svg_cumulated_amounts= dimple.newSvg("body", 1400, 400);
var amounts= [{ The json data comes here. }];
chart_cumulated_amounts = new dimple.chart(svg_cumulated_amounts, amounts);
chart_cumulated_amounts.setBounds(65, 30, 1330, 305);
// var x = chart_cumulated_amounts.addTimeAxis("x", "date", "%Y-%m-%d", "%m");
var x = chart_cumulated_amounts.addCategoryAxis("x", "month");
x.addOrderRule("month");
// x.addOrderRule(["1","2","3","4","5","6","7","8","9","10","11","12"]);
// x.addGroupOrderRule("day");
// x.addGroupOrderRule("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31");
y = chart_cumulated_amounts.addMeasureAxis("y", "cumulated_amount");
chart_cumulated_amounts.addSeries("year",dimple.plot.line);
chart_cumulated_amounts.addLegend(500,10, 510, 20);
chart_cumulated_amounts.draw();
The GroupOrderRule, which would be useful in the case of a bar plot does not lead to the desired result in this situation.
I believe one cause of the problem is that the x-axis is set for categories and consequently are the records grouped by month.
I want the records to remain ungrouped, and the lines to follow each data point.
Basically, months do not matter. They are only to display the x-axis as desired.
Setting the x axis as a time axis, does not seem to me a priori as a solution: then, how would I stack the lines?
I wonder if I should maybe structure the data output differently, or stack several graphs in the same SVG plot, or any other solution.
I could find several quite similar cases, but none of the suggestions found here and there was truly applicable.
Thank you for your help.

Remove weekends from highcharts

Is it possible to remove certain days in highcharts? I have a chart that only get data intervals from Monday to Friday. The problem Is that Saturday and Sunday is auto added to the graph even when there is no data for these days. I cant find anything that helps on api.highcharts.com they usually have solutions to all graph related problems but I cant seem to find anything about my problem. It's probably some easy option in the chart but I cant find anything that works.

You have two options, use highcharts and breaks.
An array defining breaks in the axis, the sections defined will be left out and all the points shifted closer to each other.
Requires that the broken-axis.js module is loaded.
It would look something like this, in a datetime axis:
xAxis: {
tickInterval: 1,
breaks: [{
from: 1537567200000,
to: 1537740000000,
breakSize: 1
}]
}
Working example: http://jsfiddle.net/ewolden/L3ykegzq/
Or switch to highstock where you can have an ordinal axis (ordinal is used by default):
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data periods (e.g. nights or weekends for a stock chart) will not take up space in the chart. Having ordinal: false will show any gaps created by the gapSize setting proportionate to their duration.
Working example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/xaxis/ordinal-true/

Highcharts series gap auto zipping

I am having an issue with the gap between separated series of highcharts.
For example, I have a chart with two series. One starts from (1st March 2004) and the other starts from (1st March 2009). They do not overlap each others. When showing on the chart, the barchart automatically zips the time between two chart (skipping the year 2005, 2006...2008) and display 2 time series closing to each others.
Please refer to this for more detail:
https://jsfiddle.net/quangvinh910/6vr6dg15/2/
pointStart: Date.UTC(2004, 3, 1),
pointStart: Date.UTC(2009, 3, 1)
How can I show show the full time range between that on the x-axis?

Highstock automatically will try and strip out the gaps in the data so that there is not lots of "dead" space. This is done with the option xAxis.ordinal:
In an ordinal axis, the points are equally spaced in the chart
regardless of the actual time or x distance between them. This means
that missing data for nights or weekends will not take up space in the
chart. Defaults to true.
It is true by default. Try setting it to false. Demo.

Google chart API - continuous hAxis as Date - year end is next beginning?

I've made a custom data source selector for the Google Chart Editor which has worked out wonderfully, but I'm running into an annoying little problem with the way the dates are represented on the continuous major axis of type date. For some reason, giving a date at the end of the year (e.g. new Date(2014,11,31,0,0,0)) gets labelled as the next year.
Here's a JSFiddle that describes the issue. I know I could just use a discrete axis and pass a string representation of the year, but my data source selector allows selecting a different interval (i.e. daily, monthly, weekly yearly) and a continuous axis is best for this.
Does anyone know why this happens, and is there a way to adjust how the API chooses labels for a continuous date axis?

It's interesting how phrasing a question for others can make one think of an answer. I decided to try specifying the options.hAxis.ticks and although I pass the same dates, it does change the hAxis labels to what I expect.
See the JSFiddle
It's not the best solution, since I would rather have the hAxis ticks match the nearest data point, but it is functional.
Here are the options that I specified:
var options = {
title: 'Total Sales Value Per Year',
hAxis: {
title: 'Year End',
ticks: [
new Date(2010,11,31,0,0,0),
new Date(2011,11,31,0,0,0),
new Date(2012,11,31,0,0,0),
new Date(2013,11,31,0,0,0),
new Date(2014,11,31,0,0,0)
]
}
};