I am currently plotting points by DateTime and Value using HighCharts. The points are per minute. Currently, it's drawing a connecting line between the points as can be seen below.
What I'd prefer is to be able to plot a point for each minute inbetween (if there is no value), is this possible with HighCharts? Or would I have to loop through each minute and add it to the data series with a null value?
you can also create an array with every minute in it and then merge that with the values you have ...
or you use the method, that you suggested. I found using an "empty" array easier.
Related
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
Is there any workaround to have tickMarkPlacement set as "between" on a datetime Axis? I am aware is not supported by the API but I was hoping to find some sort of hack/plugin.
You can fudge it with the x axis label's x property.
Example:
http://jsfiddle.net/jlbriggs/3qtZr/36/
[[update after comments:
if you mean that you want the data points to also line up 'between', then there isn't a good easy way.
My approach would be
1) make sure there is only one data point per axis tick, ideally
2) adjust the x value of the data point to push it to the right in a way that corresponds with the label offset
3) adjust tooltip formatters to correct the date for display
or, 4) just go with categories
However, if you can explain why you want to do this, what effect you're going for, perhaps there's more that can be done.
{{further updates:
After playing around a little more, I found another way to fudge the data point placement, though I am unclear whether you need that.
Example here:
http://jsfiddle.net/jlbriggs/3qtZr/39/
It uses the pointPlacement property.
The catch is that the pointPlacement property doesn't work if there is not a columns series present with as many data points as the line series, it seems.
So this method adds and hidden dummy column series in order to make the pointPlacement property affect the line series.
Not elegant, but it beats having to adjust the data values and then re-adjust them in the formatter.
So I have a stacked column chart, type of datetime, with minTickInterval of one day. In some cases for my data, my chart displays fine, with each stack in its own day, but for other cases, the column seem to overlap and instead Highchart does a "week of ...". I have no idea what could be wrong in the config. Here is the fiddle
I already tried this with no luck
dataGrouping: {
enabled: false
}
First thing I notice is that your data is not for the same timestamp. This means that the data will not stack as their x-values are different. If you want all data to for a given date to be stacked then you have to give them the same date (and time). The dataGrouping only applies to HighStock. Your toolTip text can be formatted.
The cahrt is displayed correctl,y becasue you have stacked for the same x value, for for different, points are neighbours.
For each series data, I had to use
pointRange: 86400000 // equal to one day
The first answer here solved it.
Highcharts columnchart: How to seperate overlapping columns
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.
I have a large time series data set I need to graph, and am trying to use D3 to do it. I plan to have my graph have the x-axis be time, and allow for movement of the graph in the x direction. I want to have the graph only load/display the points that exist in the current time range on the screen.
For example, if my dataset has times 1-100, but the graph starts out with times 1-10 shown, the graph should only graph points 1-10. Then the user may move to the right and see times 5-15 and the graph should update accordingly.
Can anyone explain to me how this might be done via d3? I am having a hard time bridging the understanding from an entire data set being loaded in at once and graphed immediately to selective graphing of subsets of the data.
I think you are looking for the selection.filter() function. For example you can have:
var allNodes = vis.selectAll("Nodes").data(data.nodes);
var validNodes = allNodes.filter(function(d){return (d.time>1 && d.time <10)});
//use normal graph functions on validNodes.
You can also apply filter directly on the array of nodes.