I have a list of normalized stacked bar charts. When the user clicks on the bar chart it is supposed to zoom in and transition to a not normalized version of the same bar chart.
I got everything working except for the transition.
Check out the code: http://jsfiddle.net/adius/tgC2m
I don't get why it's not scaling it properly but instead even shrinking it.
When I change the order to zoom from non-normalized to a normalized version it also works in the first place but messes up the transition. So the charts themselves are OK, but the transition is not. Is it even possible to transition from .offset('expand') to .offset('zero') and vice versa?
Any help would be really appreciated as my deadline is approaching really fast! ^^
Related
I am trying to adapt the animated grouped bar chart example from
https://bl.ocks.org/aholachek/fb0c1cd7ea9707bc8ff55a82402c54b1
for my own purposes. One modification that I am stuck at right now is that my data will have a variable number of groups and the xAxes and blocks have to resize accordingly.
I have already added the resizing of the domains with
x0.domain(data[Object.keys(data)[0]].map(obj =>obj.name))
x1.domain(valueKeys).rangeRound([0, x0.bandwidth()])
in the update function, but this does not seem to be enough. While the width of the bars is resized correctly, the x values are not spaced out evenly and instead get pushed into the far right corner of the graph when adding more elements after the initial creation for example.
For now I only care about the grouped version, not the stacked one.
I would appeciate any pointers
Problem could be solved by clearing out the barContainer before the update. This of course prevents transitions on the already existing bars, but that is good enough for me
Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.
I'm using Flot to chart some bar charts on my website.
When I draw a chart with three bars for example, everything renders fine. Then I can add a fourth bar and the bars get thinner and accommodate themselves properly (sort of like what Highcharts does with default settings).
When I remove a bar from that same chart, the bars stay thin and resized and do not grow back to their previous state.
Any ideas how I can achieve this effect? Does Flot offer this functionality? Their documentation doesn't mention anything like this and I'm afraid I may be overlooking something.
I'm trying to make bar charts in d3, but my bars get smushed together when I look at them in Chrome. (They look fine in Firefox or Safari.)
For example, they look like this:
when there should really be some whitespace in between the bars.
Strangely, I see this even in the official d3 tutorial, but only on some of the bar charts -- the first and fourth bar charts on that page have the correct amount of spacing, but the second and third bar charts are smushed like the chart above.
What's the fix for this, so that bars display correctly in Chrome? What's special about the first and fourth bar charts on that page?
This can happen when using browser-based zoom, since a single pixel gap can collapse when zoomed out.
In Chrome, you need to select "View → Actual Size" or hit Ctrl/⌘-0 and this should fix it.
I am writing an app that uses Highcharts, and in one instance I want to have a "slider" at the bottom of the chart that extends up vertically over the chart. Moving the slider will update other parts of the page based on where the user moves the slider on the chart.
The problem is that when drawing anything on top of the Highchart (image or a div) the performance becomes absolutely unacceptable. The slider simply cannot keep up with the mouse movements See a jsfiddle here. Note - this only happens when working with a large number of data points (which is absolutely unavoidable in my case).
Is there anything that I can do, short of not drawing on top of the chart?
I suspect the slowness is because the browser has to redraw the chart (either the whole thing or parts of it) as the div slides over it. With a large data set to redraw the chart from, this becomes annoyingly slow.
There are solutions, but not all of them are always acceptable:
You can try reducing the number of points in your data set by sampling it at a lower rate.
You can try windowing, so that the viewer only shows a range within the entire set. For example, if you have 10,000 data points your window can slide along the data set, showing only 1,500 points at a time as opposed to all 10,000 points.
Move to a different technology such as Flash or Silverlight.
Like I said, though, not all of these or even any of them will work for you.
I noticed that when you drag the slider over the graph it still highlights the datapoints. You probably should set pointer-events:none on that part of your chart while dragging the slider, that will allow browsers to not check pointer-events in that subtree (which if you have a lot of datapoints can be somewhat expensive, especially if you update these elements on hover).