I need to do this grouped bar chart like this one but the .renderType() doesn`t work. Are there any solutions to do a chart like this? Thanks!
You're right, it's non-trivial to find a branch or fork of dc.js and use it in your project.
The PR you linked is rather old and was replaced by this one. Unfortunately all grouped bar implementations had design shortcomings and none are ready to merge, which is why we still have to use forks or branches of the code.
Instead of renderType the API on this fork changed to
.groupBars(true)
The fork and branch for the new PR are here:
https://github.com/jaklub/dc.js/tree/grouped-or-stacked-bars
The artifacts (dc.js and dc.css) can be found on the grouped-or-stacked-bars-artifacts branch.
One way to fetch them is using jsdelivr:
https://cdn.jsdelivr.net/gh/jaklub/dc.js#grouped-or-stacked-bars-artifacts/dc.js
https://cdn.jsdelivr.net/gh/jaklub/dc.js#grouped-or-stacked-bars-artifacts/dc.css
Or, if you're using npm, you can declare the dependency as so:
"dc": "git+git#github.com:jaklub/dc.js#grouped-or-stacked-bars-artifacts"
Shorter version for any recent version of npm:
"dc": "jaklub/dc.js#grouped-or-stacked-bars-artifacts"
Although this is a fork of the last major version (3) of dc, it's compatible with the latest d3, as demonstrated in this demo fiddle.
Clearly you need a lot more horizontal space in order to display grouped bars, but that's a separate issue.
Related
In Swing I use JSplitPane to create a region with a tree view to the left(leading) and a region with a hex viewer to the right(trailing) where the user can move the divider to adjust the space each get.
Since Jetpack Compose is still relatively new, basic components like SplitView (the hypothetical name for such a component following their naming scheme) don't yet exist. The closest concept I can see is Row and Column but those are not user-resizable (as far as I can tell.)
Without resorting to embedding a Swing JSplitPane and then embedding Compose components in each side of the split pane, is there a good way to do this?
I found one example which got me 90% of the way there, but there was some removed API which is incredibly difficult to find the replacement for as the release notes don't appear to even mention it. (!!)
There is an official implementation for that. You can add this dependency to your build.gradle:
implementation 'org.jetbrains.compose.components:components-splitpane-desktop:1.0.1'
The newest version can be found here.
There is also a demo class in the official compose repository that shows how to use it.
I'd like to have on the same page D3 charts that are build with different version of D3 (ok, frames are an option, but ideally without them).
What is the best way to have two version of D3 library in the same page (4.x and 3.x) ?
I have a stacked bar chart in Kibana 4, and I would like the error bar to be red, the warning bar to be orange and the info bar to be green. This used to be simple to accomplish in Kibana 3, but I cannot figure out how to do it in Kibana 4. Has anyone been able to do this?
In kibana4 (at least for v.4.1.0) this is not yet possible. The colors are chosen at random from a defined palette in the code.
Many people are asking for this, and I think it's planned for version 4.3.You can follow it here: https://github.com/elastic/kibana/issues/1362
It will be in Kibana 4.4 (already available if you checkout branch 4.4 of kibana instead of downloading the official release). Of course a development branch is not meant to be stable, so use at your own risks.
How to change the locale on axis labels? By default US locale is used for numbers ','(comma) as thousand separator while I need to change it to '.'
Thanks
Locale-Unaware version:
commaFormat = d3.format(',')
chart = nv.models.lineChart();
chart.xAxis().tickFormat(commaFormat);
chart.yAxis().tickFormat(commaFormat);
You will need to do this for every axis on every chart.
Looks like https://stackoverflow.com/a/19275327/240358 is on the right track.
From the 2.10 release, https://github.com/mbostock/d3/pull/753 has info on rebuilding d3 with a locale. Built-in locale files are at https://github.com/mbostock/d3/tree/master/src/locale
As you asked in relation to nvd3, you'll want to fork d3 on github, run the build, commit that bin/ on a separate branch, and push that to your fork. Then in your project that uses nvd3, you can use that branch - if you're using bower for your dependencies, specify your branch and repo as the dependency.
I am now considering building and hosting local versions.
Not sure how I missed this earlier, but the latest d3 localization allows runtime definition loading.
d3.locale({
thousands: ".",
decimal: ","
});
# nvd3 charting code.
https://github.com/mbostock/d3/wiki/Localization
I like the d3 sortable bar chart example:
Unfortunately, it doesn't appear to work correctly in v2 (the example uses v3). At first, I thought it was me, so wrote a new example from scratch. Alas, it wasn't! In v2 the x axis labels don't transition with the bars; in v3 both labels and bars transition together.
Can anyone suggest a workaround for v2?
Thanks in advance.
Okay, I think there are two solutions to this problem. As Robert Harvey pointed out, you could use v3. The main difference that I can see so far is that d3.tsv (and possibly the other read data methods) take an additional parameter: this was what was causing the other parts of my code to fail. So, even though v3 isn't the latest release, this is my preferred solution.
The second solution is to transition the axis labels explicitly. This would take more code and as v3 is (hopefully!) on the horizon, might only be necessary if you really can't wait and absolutely must use v2.