Here is an example using Queue.js to loading multiple csv in a dc.js : https://github.com/dc-js/dc.js/blob/master/web/examples/composite.html
Here is my version (javascript):
var composite = dc.compositeChart("#test_composed");
var composite2 = dc.compositeChart("#test_composed2");
var q = queue()
.defer(d3.csv, "morley.csv")
.defer(d3.csv, "morley2.csv");
q.await(function(error, exp1, exp2) {
var ndx = crossfilter();
ndx.add(exp1.map(function(d) {
return {x: d.Run};
}));
ndx.add(exp2.map(function(d) {
return {x: d.Run};
}));
var dim = ndx.dimension(dc.pluck('x')),
grp = dim.group().reduceCount(dc.pluck('x'));
composite
.width(768)
.height(480)
.x(d3.scale.linear().domain([0,200]))
.compose([
dc.barChart(composite)
.dimension(dim)
.group(grp)
])
.brushOn(false)
.render();
composite2
.width(768)
.height(480)
.x(d3.scale.linear().domain([0,200]))
.compose([
dc.lineChart(composite2)
.dimension(dim)
.group(grp)
])
.brushOn(false)
.render();
});
Using the same data, should be good as picture attached.
It worked very well for lineChart and barChart but not working for pieChart, rowChart...
Is there any similiar example for working pieChart?
Thanks!
I know this doesn't really solve your problem but I'm just letting you know of a different solution. Google code playground shows off some of the cool code google has for developers to use. Check out these links
Bar Chart: https://code.google.com/apis/ajax/playground/#bar_chart
Thanks for posting a jsfiddle. If you complete your fiddle, we can better help you troubleshoot it. ;-)
Looks like you are trying to create a composite chart with a pieChart. That's unusual - why do you want to do that? Normally a composite is for when you want to overlay different charts, but you've only got the one chart in your fiddle.
I'm not sure if the composite chart works with non-grid charts.
Related
I'm trying to recreate the single select bar on a dc.js composite chart as shown here
https://dc-js.github.io/dc.js/examples/bar-single-select.html
I've tried adding a filter handler to the child chart but it never gets called when I click on the bar. I've also tried adding a filter handler to the Composite chart itself with no luck. Is there any way I can select a bar on a composite chart or do I have to assign it a colour and then color the other bars grey manually and redraw the graph based on what was clicked?
This is the initialization of the graph in my component.
The data goes through a formatting process where I parse the date using the formatData function. I also pass in a dimensions prop (apologies for the bad naming) which tells the component what kind of chart should correspond to the chart name and the color of the dataset.
dimensions={
{"Data1": ["line", AppStyles.color.warning],
"Data2": ["line", AppStyles.color.danger],
"Data3": ["bar", AppStyles.color.blue]
}
}
formatData = (data) => {
let formattedData = [];
for(let key in data) {
formattedData.push({
...data[key],
x: this.parseDate.parse(data[key].x)
})
}
return formattedData;
}
componentDidMount(){
let data = this.formatData(this.props.data);
this.ndx = crossfilter.crossfilter(data);
this.chart = dc.compositeChart(this.multiLineChartContainer);
this.dimension = this.ndx.dimension((d) => {
return d.x;
});
let minDate = this.dimension.bottom(1)[0].x;
let maxDate = this.dimension.top(1)[0].x;
let composeGroup = [];
Object.keys(this.props.dimensions).map((dim,i) => {
let grp = this.dimension.group().reduceSum((d) => {
return d[dim];
});
if(this.props.dimensions[dim][0] === "bar"){
composeGroup.push(dc.barChart(this.multiLineChartContainer)
.group(grp, dim)
.colors("blue")
.centerBar(true)
.addFilterHandler(function(filters, filter) {return [filter];})
)
} else {
composeGroup.push(dc.lineChart(this.multiLineChartContainer)
.group(grp, dim)
.colors(this.props.dimensions[dim][1])
.useRightYAxis(true)
);
}
});
this.chart.width(this.props.width)
.height(this.props.height)
.renderHorizontalGridLines(true)
.x(d3.time.scale().domain([minDate, maxDate]))
.elasticY(true)
.elasticX(true)
.xAxisLabel("Cohort")
.brushOn(false)
.yAxisLabel("Left")
.rightYAxisLabel("Right")
.xUnits(()=>{
return 30;
})
.legend(dc.legend().x(this.chart.width()- 130))
.compose(composeGroup)
this.chart.renderlet((chart) => {
chart.selectAll('circle, rect.bar').on("click", (event) => {
this.props.dataSelect(event);
});
});
this.chart.xAxis().ticks(5)
this.chart.render();
}
Please consider adding your code (or better, a running example) next time you ask a question on SO.
It would also help to spell out what "no luck" means - wrong click behavior? No chart displayed at all?
It's hard to guess what might be going wrong for you.
This works fine for me, although ordinal scales are a little bit tricky, and composing them in a composite chart even more so.
Is the problem that you were not using an ordinal scale? Because currently the kind of selection (brush or click) is determined by the scale/xUnits and it's hard to get around it.
composite
.width(768)
.height(480)
.x(d3.scaleOrdinal().domain(d3.range(1,21)))
.xUnits(dc.units.ordinal)
.yAxisLabel("The Y Axis")
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
.brushOn(true)
.renderHorizontalGridLines(true)
.compose([
dc.barChart(composite)
.dimension(dim)
.colors('blue')
.group(grp2, "Bars")
.addFilterHandler(function(filters, filter) {return [filter];})
.centerBar(true),
dc.lineChart(composite)
.dimension(dim)
.colors('red')
.group(grp1, "Dots")
.dashStyle([2,2])
])
.render();
https://jsfiddle.net/gordonwoodhull/ronqfyj0/39/
As the title mention we are not able to hover over point thats are behind a path.area.
The situation is the following
If we hover the blue and the yellow line we are able to get the tooltip but if we hover over the red line we get the tooltip only from the first and the last point.
The code is the following:
let nix = crossfilter();
timeseriesFiltered.forEach(ts => {
ndx.add(ts.values.map(function(d) {
let temp = JSON.parse(JSON.stringify(objTemplate));
temp[ts.place] = d.value;
temp.date = new Date(d.timestamp);
return temp;
}));
});
let dimDate = ndx.dimension(dc.pluck('date'));
let lineChartGroups = [];
timeseriesFiltered.forEach((ts, index) => {
let group = dimDate.group().reduceSum(dc.pluck(ts.place));
let lineChart = dc.lineChart(composite)
.dimension(dimDate)
.renderDataPoints(true)
.renderArea(true)
.defined(d => {
return d.y != 0;
})
.colors(this.colors[index])
.group(group, this.setName(ts.place));
lineChartGroups.push(lineChart);
})
let chart = composite
.width(width)
.height(300)
.margins({top: 30, right: 60, bottom: 30, left: 60})
.x(d3.scaleTime().domain([new Date(minDate), new Date(maxDate)]))
.yAxisLabel(timeseriesFiltered[0].unit)
.elasticY(true)
.mouseZoomable(true)
.brushOn(false)
.clipPadding(10)
.legend(dc.legend().x(80).y(20).itemHeight(13).gap(5))
._rangeBandPadding(1)
.compose(lineChartGroups);
chart.render();
We have tried to raise all the circle dot by using the following statement:
d3.selectAll('circle.dot').raise();
But it didn't work. Any suggestion?
I'm not sure that it's a great idea to use renderArea in a composite chart; as you can see, the colors get muddied together into brown, and it's not really clear what it's supposed to convey.
I think renderArea works better with a stacked chart, where the area that is covered by each color means something.
That said, it's pretty easy to fix the problem you are seeing.
The reason why raising the dots doesn't work is because each child of the composite chart is in its own layer. So raising the dots only puts them at the top of that chart (where they already are).
Instead, you can disable mouse interactions for the filled areas:
path.area {
pointer-events: none;
}
Since the filled areas weren't interactive before, this shouldn't lose much, but you might want to be more conservative and restrict the rule to the particular chart with the selector #composite-chart path.area
I have a dataset which consists of 5 columns -> country, id, value and sector. I was able to create a row chart in dc.js using the value and country, where country is my dimension.
var rowChart = dc.rowChart('#rowChart');
d3.csv('data.csv', function(data){
data.forEach(function(d){
d.country = d.country;
d.id = d.id;
d.value = +d.value;
d.sector = d.sector;
});
var height = 300;
var width = 300;
var ndx = crossfilter(data)
var countryDim = data.dimension(function (d) {
return d.country;
});
var countryGroup = countryDim.group().reduceSum(function (d) {
return d.value
})
rowChart
.width(300)
.height(900)
.margins({top: 10, right: 10, bottom: -1, left: 30})
.dimension(countryDim)
.group(countryGroup)
.colors('#86BC25')
.ordering(function (d) { return -d.value; })
.elasticX(true)
.xAxis();
rowChart
.title(function (d) { return d.value;})
.renderTitleLabel(true)
.titleLabelOffsetX(10);
dc.renderAll();
});
and this is my data in csv
country,id,value,sector
USA,0982,10,high
AUS,0983,9,high
IND,0982,10,high
CHN,0982,8,high
CUB,0986,5,middle
FIN,0987,low
i tried creating a jsfiddle, but does not seem to work, sorry my first time
http://jsfiddle.net/i8rice/2r76bjt7/4/
I want to be able to create two drop down with check boxes. One to filter the row chart by country and another by sector. So if I first filter the sector by 'high' in the drop down menu the row chart will get filtered and the other drop down menu should only show me the 5 'high' countries.
I know this is achievable using dc.selectMenu but I wan that drop down check box style. I was wondering if this is possible with dc.js?
Sorry I am very new to asking questions and in d3.js, dc.js and crossfilter.
Thanks to Gordon the check box within the drop down menu was working. However upon discussing with a few others, they have suggested that the check box, once ticked, is not calling the event handler, so wrote this, which is pretty much the same as the one within dc.js
selectField.on('postRender', function() {
$('#menuselect select').change(function(){
console.log($(this).val())
if ($(this).val() && $(this).val() != "") {
selectField.replaceFilter([$(this).val()]);
} else {
selectField.filterAll();
}
dc.events.trigger(function () {
dc.redrawAll();
});
}).multipleSelect({ placeholder: "Select Country"})
});
And everything worked, well, tested it on local. I don't know of any other ways as I am still new to this.
I spent the better part of the day trying to get a nice Date-axis histogram, to the extent that I'm posting my first question on stackoverflow.
The axis and the stacking are just the way I want it, however the bars are really thin for no (to me) apparent reason. In other words, I would really appreciate some help.
Here's a minimized version (I'm using the dc.js library, however I'm pretty confident the challenges is on d3+crossfilters behalf):
var jsonstr = [{"timestamp": "2013-06-13T11:04:24.729Z"},{"timestamp": "2013-06-17T11:03:24.729Z"},{"timestamp": "2013-06-17T11:02:24.729Z"},{"timestamp": "2013-06-19T11:02:14.129Z"}];
var ndx = crossfilter(jsonstr);
var timestampD = ndx.dimension(function (d) {
return new Date(d.timestamp);
});
var timestampDG = timestampD.group(function (d) {
return d3.time.day(d);
});
var barChart = dc.barChart("#dc-bar");
barChart.width(500)
.height(250)
.dimension(timestampD)
.group(timestampDG)
.x(d3.time.scale().domain([(new Date(2013,05,12)), (new Date(2013,05,20))]).nice(d3.time.day))
.xAxis().tickFormat(function (x) {
return x.getDate() + "/" + (x.getMonth()+1);
});
dc.renderAll();
I think the problem is actually with how you're using dc.js; you don't specify what units the barchart should be in. Try this:
barChart
.width(500)
.height(250)
.dimension(timestampD)
.xUnits(d3.time.days)
.ect
For anyone else having this problem, for whom Adam's answer doesn't seem to do anything, make sure you don't have elasticX set to true as I did.
I could really use some guidance setting up a transition on my multiseries line chart. As an example of what I need, I've started with this great multiseries line chart: http://bl.ocks.org/mbostock/3884955. To that code, I've added an update() function that's called once using setInterval(). I've also created a new data set called data2.csv which is similar to data.tsv but has different values.
The update function should change the data that the line chart is displaying. Forget about making a nice smooth transition, I can't even get the data to update in the chart view. When I try using the update function, it looks like the new data is loaded properly into the javascript variables, but the lines on the chart don't change at all.
I've seen variations on this question asked a few times but haven't found an answer yet. Can anyone help me figure out how to transition this multi-series line chart to a new dataset (also multiseries)?
function update() {
d3.csv("data2.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
// format the date
data.forEach(function(d) {
d.date = parseDate(d.date);
});
// rearrange the data, same as in the original example code
var cities2 = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, temperature: +d[name]};
})
};
});
// update the .city g's to the new dataset
var city2 = svg.selectAll(".city")
.data(cities2);
// redraw the lines with the new data???
city2.selectAll("path")
.attr("d", function(d) { return line(d.values); });
clearInterval(transitionInterval);
});
}
UPDATE: NikhilS's answer contains the key to the solution in the comment trail.
You should make sure you are following the enter + update process as outlined by Mike Bostock in his stuff on the General Update Pattern. It looks like you haven't invoked any kind of d3 transition. You also haven't specified an enter or exit for the update function, which will cause problems if you have new data coming in and/or old data going out. Try changing this:
var city2 = svg.selectAll(".city")
.data(cities2);
city2.selectAll("path")
.attr("d", function(d) { return line(d.values); });
to the following:
var city2 = svg.selectAll('.city')
.data(cities2);
var cityGroups = city2.enter().append('g')
.attr('class', 'city');
cityGroups.append('path')
.attr('class', 'line');
d3.transition().selectAll('.line')
.attr('d', function(d) { return line(d.values); });
city2.exit().remove();
I made a basic data re-join and update demo a while back, which you can view here.
use d3 Transition, you can make some sort of animation.
If you want to select a sub-interval of the data to plot the graph, no need manipulation on the data, just use a d3 brush and clip the graph
For a multi-series line graph with most of the line graph elements, you could refer to this example: http://mpf.vis.ywng.cloudbees.net/