How to make a Highstocks x-axis even and regular?

Question:

I am using the highstocks library for JavaScript to render some data collected as part of a school project.

While highstocks has proven great, the x-axis is acting up.

Due to interference, the collected data does not always come with neat intervals, and I would like the graph to reflect that.

Currently, the x-axis "jumps" in places.

I would like to have a regular x-axis with evenly spaced ticks.

Currently the ordinal value is set to false, which I would've expected to fix the x-axis.

The relevant settings are set:

var baseSettings = {
    rangeSelector: {
        enabled: false
    },

    exporting: {
    enabled: false
    },

    credits: {
        enabled: false
    },

    xAxis: {
         ordinal: false
    }
};

I feel like I've tried every possible permutation of settings at this point - perhaps someone more experienced can set me on the proper path?

An image of the problem can be found here: https://imgur.com/UUE50iF

The site can be found here: cansat.sg.dk/graph/andoeya_droptest (link disabled, as I can only post 2 links...)

The code is hosted on GitHub and can be found here: https://github.com/dkkline/CanSat14-15/tree/master/presenter

The relevant code isn't included in the question, but I'll address the issue.

You are using a baseSettings object and a custom settings object (lets call them customSettings) to form a chart. These two separate settings are merged using the jQuery extend function.

Your problem here is that when both baseSettings and customSettings both include the xAxis attribute they will not be merged because you are not using the deep variant of the extend function.

In short, you currently have this:

$(domIdent).highcharts('StockChart', $.extend({}, baseSettings, {
    // Custom settings
}));

Instead, use this (true added as first argument of extend):

$(domIdent).highcharts('StockChart', $.extend(true, {}, baseSettings, {
    // Custom settings
}));

See the jQuery API for details on how this works, and why your current setup isn't working.

Summary of the parameter:

deep

Type: Boolean

If true, the merge becomes recursive (aka. deep copy).

Related:

Saving data using promises

Uncaught error: Invalid type for google table column

Insert data in collection at Meteor's startup

Login Signup PopUp

Cant submit form

submitting form then showing loading image by javascript

session value in javascript cannot be set

Converting “i+=n” for-loop to $.each

want to show and hide text using “this” jquery

Click on link next link should be display on same page

why i don't get return value javascript

How to send current page number in Ajax request

How to find the days b/w two long date values

show/hide an overflow div on anchor

Error: [$injector:unpr] Unknown provider: RestangularProvider <- Restangular <- ctrlAG

Teechart HTML5, line color and thickness

Wordpress log out using URL and redirect to specify page

Javascript: Forloop Difference between i++ and (i+1)

Can't call fetch directly in Backbone model listenTo

Parsing XML array using Jquery

Replacing elements in an HTML file with JSON objects

Substring of a file

KnockoutJS custom component loader not executing `loadViewModel`

JSLint error: “Expected a newline at EOF”, conflict with Beautify plugin

Automatically calling server side class without

Sockets make no sense?

Merge and sum values and put them in an array

slideToggle state not working with multiple boxes

Dynamically resize side-by-side images with different dimensions to the same height

Javascript sort array of objects in reverse chronological order

Javascript function to validate contents of an array

Javascript change the souce of all images present inside a string

Javscript Replace Text in tags without changing children element HTML and Content

How To Check Value Of String

Setting radio button checked true on button click

Create array from another with specific indices

Changing interval time to random?

show div only when printing

Not able to access variables in required file

How to use a service with Http request in Angular JS

Get elements containing text from array

Google map infowindow position

Background-image style with JS not working in ie9

How to get my node.js mocha test running?

Please can someone help me understand the exec method for regular expressions?

Target next instance of an element/div

Saving image to localstorage - canvas

Angular $http and Fusion Tables in IE9

Get all prices with $ from string into an array in Javascript

Onclick add html content and remove it by clicking “delete” link