I have a chart that shows the number of visits and ratio of sales / visits. Visits are displayed using columns, while the sales / visits ratio is displayed using a line chart.
I wish to move the ratio labels to the right of the chart. Currently, the volume appears on the right hand, secondary axis.
http://jsfiddle.net/2zcLL/8/ (I can't get it to work in jsfiddle, but works fine locally?)
The issue I am having revolves around how Google requires combo charts to be set up, that is, column data series must come before the line data series to work.
What I required looks something like this:
series: {0: {type: "bars", targetAxisIndex:0}, 2: {type: "line", targetAxisIndex:1}},
But the above doesn't work. Any ideas?
First of all, ComboCharts do not require your data series to be in any particular order. You can put bars, line, area, steppedArea, and candlestick type series in whatever order you want.
Second, you only have two data series, so the series option should be:
series: {0: {type: "bars", targetAxisIndex:0}, 1: {type: "line", targetAxisIndex:1}}
Here's an exmple of this working: http://jsfiddle.net/asgallant/m4qwT/. Note that I increased the width of the chart to show the axes properly (they don't display at all given the options as you specified them).
Related
Is it possible to align the data points and outliers of box plot in one straight line like in center of box plot?
Additionally, can I color the data points?
The current and the desired screen shot are attached with it.
You can use
.dataWidthPortion(0)
to not spread the points out at all. Documentation.
General advice on changing the color or style of anything, if there is no accessor for it:
Look for the chart in the chart selectors wiki, or if it's not there, inspect the item you want to change in the developer tools and find out what SVG tag and CSS class the item has. In this case, it's circle.data
Add a pretransition handler which selects the items you want, and changes them:
var cc = d3.scaleOrdinal().range(d3.schemeDark2);
bp02.on('pretransition', chart => {
chart.selectAll('circle.data').attr('fill', function(d) {
const boxDatum = d3.select(this.parentNode).datum();
return cc(boxDatum.value[d]);
})
});
In this case, we're creating an ordinal scale to map the available data to the colors in a color scheme.
The interesting question is here is what data to bind to the color of the dots, and how to get that data.
A box plot's data consists of an array of key/value pairs where each value is a Y value. When the box plot draws it will bind each circle.dot element to the index of the data in the array.
So we need to get the array that is bound to the box. Luckily d3.select(this.parentNode).datum() will give us the key/value pair for the box.
For this example, we are encoding the color based on the Y value, which we get by looking inside boxDatum.value. You don't specify how you want the dots colored but this shows the data that is available.
I'm planning to use d3js for building a stacked bar chart which showing number of email was sent, opened and clicked, With normal stacked bar, there will be 3 blocks for each column, and stack on each other.
For example: Total email sent was 100, opened was 80 and clicked was 30, then there are 3 blocks with value of each one is 100, 80 and 30. But it's not showing exactly the statistic, so I would like to build an overlapping stacked bar like
Here is an example, but I didn't find any d3 chart or something else supports it, I guess we need to customize them.
I have created stack bar chart with brush and I think it is helpful to you, you need to pass data and also you need to specify x_label_KEY which is you want show on x axis.
I have passed different dataset but you can pass your data to check. For example you can download from here -
https://github.com/Umesh-Markande/D3-Graph-With-Brush/blob/master/stackBarWithBrush.html
I'd like to have dc.js chart which slides along a selection, e.g. in the Nasdaq example https://dc-js.github.io/dc.js/ you would select a sub-selection of time then click "animate" button and the selection filter would slide along the x-axis at a pre-determined step size.
I'm a bit lost as to where one would start...does anyone have any ideas?
Most of what you need to do is set the current filter on the relevant chart based on a timer, instead of based on user interaction.
I've copied the relevant parts of the Nasdaq example into a fiddle to illustrate this: https://jsfiddle.net/0zkbyyqu/9/
Once the charts are in place, the animation is just a matter of changing the filter based on a setInterval. For obscure reasons, we want to use the focus method of the moveChart, not the filter method, but it's essentially doing the same thing, with a little more code to reflect the changes in the range chart:
var beginYear = 1985;
window.setInterval(function() {
moveChart.focus([
new Date(beginYear, 0,0,0,0,0,0),
new Date(beginYear+3, 0,0,0,0,0,0)]);
if(++beginYear > 2009)
beginYear = 1985;
}, 1000);
(If you were using the filter method, you'd have to construct a dc.filters.RangedFilter, as detailed here: Initial Range selection in DC.js chart)
I have left off your idea about the initial selection of the range coming from the user, and just gone with a range of 3 years. This example just starts animating as soon as it is loaded. You can fetch the current filter using chart.filter(); the result will be a RangedFilter, which is an array of two dates. Hopefully it is clear how to add start/stop buttons to the animation.
A couple of things are tricky about this approach:
It's tricky using a chart with transitions when you also have a timer or streaming data. In this case, I had to reduce the transitionDuration to 500ms for it to make any sense, but the cause-and-effect is still a little confusing. Not sure what to do about this.
The area chart transitions are incorrect so you get some weird artifacts.
dc.js has a Cap mixin which allows one to limit the number of groups and display the remainder in an "others" group. How does one access this behavior or exclude the remainder in a bar chart?
I am using a bar chart as I want to show a top 5 with stacked data. For example, the top 10 car manufacturers based on the total of fleet and private sales (in separate stacks). I am using a function to dynamically generate 5 ordinals (i.e. car manufacturers) for the x axis in the order that I want, and the graph generates nearly as expected. However, a separate bar containing the values that don't fit into one of the x values is placed at the start of the graph.
I've added a snapshot of the chart below. Note that I've rotated it with renderlet so it's on its side.
How do I remove the extraneous bar (at the top)?
If not possible, I may contemplate using two row charts side by side with one flipped so that the origin is on the right.
Sigh, the bar chart is not capped, and the row chart is not stacked. Hope to fix that.
That extraneous bar looks... not right.
With capped charts, you can eliminate the "others group" by setting the othersGrouper falsy. With the bar chart you would have to implement a "fake group" using the techniques documented here:
https://github.com/dc-js/dc.js/wiki/FAQ#filter-the-data-before-its-charted
... at least for now.
In my line chart I have done this,
highlighter: {
show: true,
tooltipLocation: 'ne'
},
On chart if I have one line with three data points then the points are plotting correctly but the wrong tooltip is being getting displayed.Specifically, the tooltip is getting shuffled i.e. for one data point it is showing tool tip of other data point.
Does display of tooltip depends on, what order data is coming?
I got this!!!
Tooltip depends on the order of data points we are passing:)