I have a chart here: http://jsfiddle.net/wergeld/bx82z/
What I need is for the stacked bars and the scatter points to line up on each other based on the data X-element (county name in this case).
Getting the bars to stack was simple. But as you can see in the example the scatter points show up in the middle of the chart - not on the same x-value as the others.
I suppose I could create a category list (using the county names) but there may be cases where I do not have all 3 data elements for all counties - how to handle that scenario?
I did great the category axis and it is still doing the same thing: http://jsfiddle.net/wergeld/YckwW/
You were not defining the series correctly to achieve what you were wanting. See updated jsfiddle for what I think you are looking for.
In the cases where you are missing a piece of data for one of the countries you could always use null, which simply means there is nothing to display for that data point. See Missing Data Sample for an example. It is case sensitive so make sure that null is all lower case.
Related
I've got a chart built using 3 series arrays, each with 5 points of data, displayed as a stacked column chart for each of 5 unique products. Please see this fiddle for a de-branded exampled.
For all my research so far, it seems the plotOptions.column.colorByPoints option is the most likely solution to this, but it's only getting me half way there.
Following the series structure, I need the chart colours to match the following structure:
[ /* note: this example uses pseudo colours */
[transparent, transparent, transparent, transparent, transparent],
[lighter-blue, lighter-green, lighter-red, lighter-yellow, grey],
[blue, green, red, yellow, black]
]
Unfortunately, setting colours for each series does not help because each point in the series needs to be different.
For the record, the plotOptions.column.color option associated with colorByPoints only seems to accept one array (a nested array matching the data structure does not work here), but it applies to each stack as a whole, so setting a single array of 15 colours in my case only makes use of the first 5.
This is perplexing me, am I missing something silly here or is this simply not possible with Hichcharts?
In this case you need to supply the color in the data point object.
ie:
data: [
{y:15, color:'blue'},
{y:64, color:'red'}
]
Example:
http://jsfiddle.net/jlbriggs/rbx9h3r5/3/
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.
I have a graph made with rickshaw (line graph).
The graph is working fine but unreadable. The time(x) data for the graph is irregular.
e.g:
{"x":1387669802,"y":1256},
{"x":1387669803,"y":1273},
{"x":1387669804,"y":1256},
{"x":1387669805,"y":1248},
{"x":1387669820,"y":1281},
...huge time gap...
{"x":1370122812,"y":1281},
{"x":1370122813,"y":1236},
{"x":1370122852,"y":1252},
{"x":1370122822,"y":1281}
there are many gaps between a little series of data. sometimes big gaps, sometimes small gaps. What I try is to set a fix distance between two data points.
Last time i worked with morris.js. There was a option named parseTime which does exactly that. treating the data as an equally-spaced series.
http://www.oesmith.co.uk/morris.js/lines.html
Any idea how to do that with rickshaw/d3?
Regards
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.
I just started using nvd3 a short while ago and am now facing a big problem for me with multibar charts:
My xAxis data has gaps in between, e.g. [1,2,3,4,9,24,120].
I want these gaps to be displayed in the graph, but nvd3 just displays all bars next to each other, so, that the distance between the bars with the x value 2 and 3 is the same as between those with 9 and 24.
Is there any way to change this, so that you can see all the gaps in the data?
The code I used is just the same as nvd3s example code.
Thank you very much.
Sure there is. You will fill in 0 for all the missing values. For each y that will correspond to a missing value you will set x = 0. That's all you need to do (it's not as simple as it sounds since there can be cases with series which have no data and so on, but this is the main trick).