Develop Reference

nvd3 some xAxis ticks missing

I have an nvd3 line chart that needs to display every date in a month on the x axis. For the current month (July) I have generated 31 x,y pairs. However, the chart omits a couple of those data points. Most data points, actually, have the y coordinate set to null (because not all dates have data, but I still need to display every date).
This is how it looks now:
As you can see, there are some dates missing: 07/08/2018, 07/15/2018, 07/22/2018, 07/30/2018 and 07/31/2018.
This is my code:
chart.xAxis.ticks(weightData.length); // this is 31
chart.xAxis.rotateLabels(-35);
chart.xAxis.showMaxMin(false); // if this is true, even less data is displayed
Is there a way to force the chart do display all the data on the x axis?

I have found the answer here:
NVD3 Line Chart X Axis Ticks Are Missing
The point is to use tickValues() instead of ticks() as the answer on the post in link says.

Highcharts: Synchronise irregular data series from same day different year

I am comparing temperatures today with the same day last year. I am retrieving the data from a database (via json) and each series has different times (and timestamps). Today's series has datapoints every 10 minutes, last year has data points at 00 and 50 minutes past the hour.
I cannot get both series to plot accurately on the x axis.
I have played about with the pointInterval for last years data to try to get it right but it only ends up looking approximately right.
pointInterval: 3600 * 1000 / 2.05
Is there a way to accurately plot points in both series against the x axis?
Please see jsfiddle

I've managed it.
I needed to remove the pointStart and pointInterval from each series, change the year of the 'last year' series to reflect this year and then change to tooltip to show only the hour and minute.

Is is possible to make Highcharts stacked column skip empty date values?

Is is possible to make Highcharts skip empty date values?
I have a stacked column chart with amounts on the Y axis and dates on the X axis. But the dates are very much spread making the chart extremely wide if all values are to be seen clearly.
See this example: http://jsfiddle.net/8j1ar44L/13/
If all values are in 2016 it looks nice, but to demonstrate the problem I changed the last dataset to 2017. In the real use case, it is actually much worse as we span several years.
Setting ordinal true doesn't work:
xAxis: {
type: "datetime",
tickInterval: 24 * 3600 * 1000,
ordinal: true
},
How can I make Highcharts simply ignore missing dates and thus ignore white space between the columns?

Show time durations on a d3 axis

I am currently creating a d3 axis using d3.time.scale.utc(). My input for the axis is a series of time offsets in minutes (with decimal values). For example:
var minuteOffsets = [0.03, 1.65, 3.22, ..., 89.91, 90.01];
I want to display these time offsets in mm:ss format on the axis. The axis labels can be at standard intervals, like so:
+------+------+-- ... --+------+------+-- ... --+------+
00:00 00:30 01:00 59:30 60:00 60:30 90:00 90:30
Note specifically that the minute value should show values >60. The seconds value has the normal range 0-59.
When I tried using .tickFormat(d3.time.format('%M:%S')), it wraps the minute value back to 00:00 after the 45:00 label. I also had a look at duration from moment.js, but I can't figure out how exactly to incorporate that into my code.

Based on the comment by Lars Kotthoff, I changed my scale to be a linear scale, instead of a time scale. Then I added a custom tickFormat function to do the necessary formatting.
I used MomentJS to first create a duration from the minute values, and then used the library moment-duration-format to produce the tick label in mm:ss format.
var axis = d3.svg.axis().tickFormat(function (d) {
return moment.duration(d, 'minutes')
.format('mm:ss', { trim: false });
});
This helps to avoid explicitly writing code for extracting the minute and second components, and then formatting them into a string.

Highchart js max 15 plots to be plotted

I have been trying a lot in Highchart js and still cant find a way to reduce the number of elements in the series.
If i get more than 15 days data i have to reduce it back and show to user as 15 days data so that user can see the data without crowding of data. Max 90 days will be given in the series which i have to reduce to 15 days.
check my current code here in http://jsfiddle.net/MULZL/
can any one give me a solution for it ?
P.S: I dont want to reduce it to first 15 days or last 15 days. I want to do it just because getting 90days in the chart looks crowded and i dont want zoom functions to apply. I want the solution for ignoring some data (days) to make it 15days if it is more than 15 days

You can programmatically zoom into the required time range using the Axis.setExtremes method. In your case you may want to do it on load
Here is how you would do it, if you want to zoom into the 1st 15 days of the given data, you can easily modify to zoom into last 15 days.
function zoomTo15Points(chart){
var points=chart.series[0].points;
if(points.length<15) return;
var min=points[0].x;
var max=points[14].x;
// If you wish to zoom to 15 days and not 15 points, you can modify max as
// var max=min + 1000*60*60*24*14
chart.xAxis[0].setExtremes(min,max);
chart.showResetZoom();
}
If you do not want to let the user zoom out, you can disable the last line, but you also will have to disable zooming, else the button would appear if user zooms inside the 15 days.
Highchart Zoom on Load # jsFiddle

You can try dataGrouping feature of highStock
var dataGrouping = {
groupPixelWidth: 40,
units: [[
'day',
[1, 2, 3,4,5,6]
]]
};
Highcharts would make sure all your columns are at least the specified width (40), if the number of coulmns is large, such that it's not possible to have that width, it will group data using the units, so it will group data of 1 day into 1 column or 2 days into 1 column and so on.
Not sure if you really want exactly 15 plots, but I think you concern was to avoid crowding of data, this does exactly that, but the number of columns will vary based on the width you specify, the width of the plotArea and allowed units and its multiples. Tweak the values as per your data and width of your chart.
jsFiddle