In this example, I draw a chart from 4 pairs of date and number of visits. I can change dataGrouping.units to day or month with sum as approximation.
For the dates that don't appear in data, I want to consider their number of visits is 0. However, the current chart looks misleading.
One way to amend that is to prepare the data manually by myself, eg, by completing data by adding all the other dates with 0 as number of visits.
Does anyone know if HighCharts provides some parameters to customize this automatically? I tried pointInterval and pointIntervalUnit, it seems they have other purposes...
It seems that you need to set xAxis.ordinal to true.
Live demo: http://jsfiddle.net/kkulig/hujdkL1L/
API reference: https://api.highcharts.com/highstock/xAxis.ordinal
Related
I have two x-y datasets that form two potentially related scatter plots.
The first dataset has an approximate domain of 0 to 25,000 and range of 0 to 0.3.
The second dataset has an approximate domain of 0 to 550 and range of 0 to 4.5. The first dataset is much more precise and can be considered correct, so I am trying to compaire the second set to the first to find out if the two sets correlate. The second set is also an inverse of the first.
Visualization of first dataset:
Visualization of second dataset:
The data is stored in the form of data: { xAxis: [0,1,2,3,4...], yAxis: [0.20779456198215485, 0.20824825763702393, 0.20915564894676208, 0.20960935950279236...] } for each dataset.
Approach:
I am having trouble figuring out how to approach this problem. My initial thoughts are to reduce the first dataset by making it less precise in terms of data points, so removing ~20,000 data points with even spacing or something. I could split the graphs into periodic fragments and then use something like regression-js to do a 3rd degree polynomial regression with regression.polynomial(data[, options]) and compare the regression constants of the two functions to see how much they correlate. However, this could be a completely incorrect approach by someone more experienced.
Any advice would be greatly appreciated.
Is it possible to connect a line graph while passing over the values that are 0? Here is a fiddle:
standard highcharts code in fiddle.
http://jsfiddle.net/utnz2b9e/15/
What I would like to have happen is that rather than dipping all the way down to 0 in March and then all the way back up in April, I'd like it to just connect straight from February to April. However, I want to allow them to drag the point up from 0 and refresh the graph so I can't just skip over those points, and since I'm using dates I couldn't have gaps there anyways.
Any help with this would be much appreciated, thank you so much!
It is indeed possible.
Assuming the data you are presenting has unwanted 0 values in it, you can easily null them, and order highcharts to connect those null points with non nulls.
This is done by adding the property connectNulls:true which is added to the series object.
After that, you can go through your series data, and null the points. In your example Iv'e done that after the chart was rednered:
var chart = $('.actualPlansPlot').highcharts();
$.each(chart.series[0].data, function(i, point){
if(point.y == 0)
{
chart.series[0].data[i].update(null);
}
});
As you can see, Iv'e iterated through the series points and nulled any zero point, using the generic update method.
You can see this yourself:
http://jsfiddle.net/utnz2b9e/24/
I have a nvd3 line chart which displays a time series and can't get the ticks on the x axis right.
For longer time spans, it works as expected. But for shorter time spans (here: 12/31/05 to 01/01/06), the same date is displayed for multiple ticks:
Please have a look at the code for this chart on JSFiddle
I want the chart to only display ticks at data points, and not in between. Is that possible with a line chart? From my understanding, it is possible with d3, but I can't figure out if this functionality is exposed by nvd3.
I've tried explicitly setting the number of ticks with chart.xAxis.ticks() without success. The only thing that has any effect is explicitly setting the tick values with chart.xAxis.tickValues([...]), but I would prefer not having to calculate them myself.
The way to solve this in general is with custom multi-scale time formats. Note that this example itself will not work with NVD3 because it uses an older version of D3, the examples below will though.
The problem in your case is that the ticks aren't "clean" divisions of time and if you apply a multi-scale format, you get something like this. It always shows the more fine-grained format because anything else would involve a loss of precision.
You can however use a simple heuristic to show the date instead of the time if the hour is less than 3, which works reasonably well in your case. See here for an example. The proper way to do this would be to make your ticks clean divisions.
Which brings us to your actual question. There's no other way than to explicitly set .tickValues() for what you want to do, but you can compute the x positions in your data quite easily:
var xvalues = [],
tmp = data.map(function(e) {
return e.values.map(function(d) { return d[0]; });
});
xvalues.concat.apply(xvalues, tmp);
The code is not the prettiest because it's a nested structure, but fairly straightforward. Using this, you can set your tick values explicitly, full example here.
I am using Shield UI JavaScript chart to show some monthly data to my visitors. However the available data doesn’t always equal 12 months. On the other hand I have categorical values on my X axis;
January, February and so on.
I am using a line chart type and for months where there are no adjacent values I do get a point which makes my chart to look some messy.
I tried to adjust the
seriesSettings: {
line: {
drawNullValues: true
}
}
property, however the look remains. Any ideas?
Since you have categorical values – the names of the 12 months, it wouldn’t make much sense using the drawNullValues. This is because once there is a values (even null) for a point, it takes it’s place on the X axis.
Your chart will look much better, if you use the appropriate type- let’s say bar so that data is easy to see and months with and without data will be easy to distinguish.
I wonder if I can simplify and use less lines of code for this purpose:
I have a class called "worker", and that class has a method that reads the properties (name, age, etc...) from a series of simple arrays.
Until there, everything is fine. Now, one of the properties that I want to add is a boolean value that makes reference to which months of the year the worker is active. For the moment, I have solved it like this:
var months_worker_1 = [{"jan":true},{"feb":true},{"mar":true},{"apr":false}] //and so on
And then, my property reads months_worker_1, but I have one array like that for each worker. I wonder if there is a way to do this that requires less lines of code, like for example, create a "master" array with all the months of the year, and in the array for each worker, specify just the months they are working. Those months become "true", and the rest of months become "false" automatically without specifying so... I have been scratching my head for some time, and for the moment only my current system is working fine, but I am guessing that there must be a simpler way...
Thanks very much!
Edit: I clarify, there is no "big picture". I am just doing some exercises trying to learn javascript and this one woke my interest, because the solution I thought seems too complicated (repeating same array many times). There is no specific goal I need to achieve, I am just learning ways to do this.
A really nice trick that I use sometimes is to use a binary number to keep track of a fixed amount of flags, and convert it to a decimal for easier storage / URL embedding / etc. Let's assume Mark, a user, is active all months of the year. Considering a binary number, in which 1 means "active" and 0 inactive, Mark's flag would be:
111111111111 (twelve months)
if Mark would only be active during january, february and december, his flag value would be:
11000000001
Checking if Mark is active during a specific months is as simple as checking if the character that corresponds to that month's index in Mark's flag is 1 or 0.
This technique has helped me in the past to send values for a large number of flags via URLs, while also keeping the URL reasonably short. Of course, you probably don't need this, but it's a nice thing to know:
Converting from binary to decimal is easy in JS:
parseInt(11000000001, 2).toString(10); // returns 1537
And the reverse:
parseInt((1537).toString(2)); // returns 11000000001
Edit
You could just as easily use an array made out of the month numbers:
var months_worker_1 = [1, 2, 3]; // this would mean that the user is active during january, february and march