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
Related
I've been trying to learn Javascript on my own for data visualization in the past couple days and is working/struggling with a grouped bar chart.
Chart working in progress:
https://blockbuilder.org/lydiawawa/261aebe55bef8b556d257f3693cca37e
x-axis: Drug Categories
y-axis: Count of Drug Categories x S Categories
My current milestones:
In the tooltip, I tried to index the respective x-axis mark to be defined as "Drug Category", but I'm stuck on indexing the right values because the array I'm dealing with is nested:
How do I point to the 'key' value (1,2,3,4,5,6) in the first level of nestedData so that it is defined as the drug category in the tooltip?
How to sort the within-group counts in ascending order?
I think the code should be simlar to:
nestedData.sort(function(x, y){
return d3.ascending(x.value, y.value);
})
How should I implement the sort with animation triggered by a radio button? Similar to this effect:
https://bl.ocks.org/fabiomainardi/2971d4ac0978634c3d15
Appreciate for any help.
Regarding the tooltip issue: the data for the outer array was bound to the groups that contain the rectangles.
Therefore, you can get it with this.parentNode:
const parentData = d3.select(this.parentNode).datum();
Regarding the sorting issue, you can sort the nested data with:
nestedData.forEach(function(d){
d.values.sort(function(a,b){
return a.value - b.value
});
});
However, this won't make any difference: the order of the bars depend on the domain you passed to x1. So, unless you change the domain for each group (which is not a good practice in data visualisation), you can't sort the bars within groups.
Here is the updated blockbuilder: https://blockbuilder.org/GerardoFurtado/f4b4608bf07588f2b9291ac74c88f82c
I'm using a line chart to display two series of data. Each series could have skipped values(they initialized with null values). In the result I got a line with breaks. The problem is how to display a continious line in case of skipped values (lower chart on image).
I've searched through all questions tagged with "zingchart", read documentation and examples on zingchart.com" but I couldn't found anything that solves my problem.
Here is the image of two charts (upper - what I get, lower - what I need): http://imgur.com/u7zLq32
EDIT - Updated based off comment
In that case, you'd switch from a one dimensional array to a two dimensional array like this:
values = [
[X, Y]
]
where X corresponds so the X scale value and Y corresponds to the Y scale value.
Here's a demo: http://demos.zingchart.com/view/R93HI801
You can read more about our data values here: http://www.zingchart.com/docs/reference/data-format-by-chart-type/
I'm on the ZingChart team. Let me know if you have any other questions.
I'm facing an issue with my Highcharts-powered component.
Considering the basic column chart JSFiddle example: http://www.highcharts.com/demo/column-basic
My goal is to get the series name (Tokyo, New York, etc...) instead of Jan, Feb, Mar... on the x Axis.
Of course, I also need the columns to be grouped according to the series name. So, in this case, it would be 4 group of columns.
How can I do this ? Should I modify the categories block ?
Thanks a lot
EDIT
I've found the solution and updated the fiddle: http://jsfiddle.net/j658R/1/
But now, I need another bahvior. How can I specify more than one value for each serie ? For example, for "s1", how can I put 4 values for this series and so get 4 bars above the "s1" label on the X axis ?
Thanks
By separating each data point into a separate series, Highcharts will automatically group the data.
So the first data point of each series will be set to the first category. The second data point of series to the second category, etc.
All you need to do is set this up as a single series:
http://jsfiddle.net/j658R/6/
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.
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.