I am uisng tickPositioner to plot certain dates on X Axis.
xAxis: {
......
tickPositioner: function(min, max) {
// custom function which returns dates array.
return getDatesBetweenRange(min, max);
},
.....
}
using Highstock v1.2.5.
I also have Show/Hide series option in the Legend. It works fine no issues till here.
Now, When I hide any series from the chart.
I do not want to show those dates on x Axis who have no data as the series is hidden.
I was looking into source code at "getOffset:" method where Label is being created for each
Tick.
Is there any relation in API which returns all series points for this Tick ?
Or
Is there any relation in API that says that this tick pos (e.g. date) has no data visible ?
As I know, you can use a little different solution:
In tickPositioner you have access to all series for specific axis via this.series. Now, each of these series have xData which contains all x-values. All you need to do now is check if series is visible, and then compare your tick values (generated by getDatesBetweenrange()) with values in xData arrays - and return only these values which could be find there.
Related
My data needs to have an x and a y value, because I want to show the x value when the user hovers over the chart.
I only want to show a limited amount of labels on the x-axis though, which is why I am using categories. I keep getting Highcharts error #19 though, because the chart apparently tries to use the x-values provided in the data array.
I've played around with using type: 'datetime', since I am working with timestamps but I can't position the labels properly in this case and want to use categories instead.
I've created a jsfiddle to explain my problem: http://jsfiddle.net/kf6wrj37/
Instead of just the first and last x-value being display, I want my categories array
categories: [
'1453417200000',
'1456873200000',
'1460325600000',
'1463781600000',
'1467237600000',
'1470693600000',
'1474149600000',
'1477605600000',
'1481065200000',
'1484521200000',
'1487977200000'
],
to be displayed as labels on the x-axis.
How should I go about this? Is it even possible to use categories when my chart's data has x and y values?
I have 2 datatime series (A & B)
Xaxis should be time and yaxis is count.
If time t i have 1 value on serie A, graph will show: [x=t, y=1].
If same time t i have one other value on serie B, I would like that value to be show: [x=t, y=2].
At the moment I modify 'manualy' values on serie B.
I wonder if there os a built-in method in highcharts to have that behavior?
Thx
Ok, so in that case you would have to create some custom code that gets all data, checks for occurrences of the same dates and based on that information set appropriate y values for points. I have prepared a simple demo where all emails are correctly arranged on the chart.
Example:
https://jsfiddle.net/BlackLabel/ywsh98f5
In order to reverse a chart you have to add reversed: true. It can be done either on the xAxis or the yAxis. In this example provided by Highcharts: https://jsfiddle.net/omaraziz/zg516ruk/ when I add reversed, it reverses all the charts. How can I reverse only one chart? More generally, what is the proper way to do more customization on one chart and not the other when the two are synchronized?
I chose synchronized because I wanted the values from both to be displayed at the same time when scanning from right to left and vice versa.
For now every time I change the legend position, reverse xAxis or yAxis, play with the tooltip, set a max and min for the yAxis, etc. it does it to both.
Here's my JSON data, in case the way to do it is through the JSON file: https://omaraziz.me/CC-chart/activity.json
You can use index variable i to recognize the chart. For example the IFFE function below return true only for the second chart:
xAxis: {
reversed: (function() {
return i === 1
})(),
...
}
Live demo: https://jsfiddle.net/BlackLabel/7fx6jdnw/
I have a richshaw plot with tooltips enabled (Rickshaw.Graph.HoverDetail). I need to display more information in it, not just series y values. Can it be accomplished with Richshaw or do I have to use the underlying d3 functions.
Sorry for the late response. Yes you can actually render whatever you want inside rickshaw tooltips with Rickshaw.Graph.HoverDetail .
Lets say for example that you have a function that requires as inputs series, x and y and lets assume that we have another array with the same length as x array called dates:
var hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph,
formatter: function(series, x, y) {
var content = '<span class="graph-dates">'+dates[x]+'</span><br><span class="graph-price">'+series.name+": "+currency+parseInt(y) +'</span>';
return content;
}
});
The code renders on the hover details a date for the chosen x point and the price for that date.
In the documentation of rickshaw graph you can find further information.
Here is the actual example by rickshaw.
Is there any way to have a column or line chart which doesn't render empty column if I'm using the datetime type?
Because I want to display the last 7 days without the weekends, but this doesn't seems to be possible.
Example: http://jsfiddle.net/G5S9L/7/
Expected: don't display June 17th/18th
The second thing I tried was to use the category type. In this case the chart is just rendering these columns which are specified in the series data. But my chart consists of multiple series and each series will hava some gaps. Highchart doesn't match the category names and puts all y values after each other.
Exmaple: http://jsfiddle.net/G5S9L/6/
Expected: Thursday has 2 columns/bars as well as Monday
These samples are very simplified. I know I could generate a master list with all values of the x-axis and order each series according to the master list and fill the gaps with NULL values. But this a heavy overhead in generating data for my statistics. Because not all series have the same sources to determine the range of the x-axis.
With Highcharts? There's not simple way to achieve that.
However, using Highstock, simply use xAxis.ordinal = true and everything will work. See: http://jsfiddle.net/G5S9L/8/
For the second question, you can simply extend the Point class(wrap applyOptions method), and set the categories of xAxis.
(function (H) {
H.wrap(H.Point.prototype, 'applyOptions', function (applyOptions, options, x) {
var point = applyOptions.call(this, options, x),
series = point.series;
// check if
// 1. there is a name(category)
// 2. xAxis has the categories defined
// 3. x value equals xIncrement
if (point.name && series.xAxis.categories && point.x === series.xIncrement - 1) {
// find a matching category?
var idx = series.xAxis.categories.indexOf(point.name);
if (idx >= 0) {
point.x = idx;
}
}
return point;
});
})(Highcharts);
See fiddle: http://jsfiddle.net/G5S9L/17/