bubble chart not showing horizontal / vertical grid

[QL]

Hi,

this is probably a super simple question. When I turned on this for my bubble chart, nothing shows up. 

.renderHorizontalGridLines(true)

.renderVerticalGridLines(true);

Also, if I click on a bubble, instead of what's on the dc.js website(the selected bubble gets high-lighted, and the rest turns grey), in my chart, all the bubble fading out to the left of the chart... I made sure I got dc 1.4.0... thoughts?

Thanks,

Q

[QL]

Hi All,

I still haven't figure this out. Is this a version problem? 

[Nick Zhu]

Any error message? Is it possible to create a fiddle for your problem?

[QL]

No it doesn't. no error message. I'm pretty new to this, but here is part of the code:

create a bubbleChart: 

var bubbleChart = dc.bubbleChart("#dc-bubble");

load data here....

and then create the bubble chart

bubbleChart.width(1000)

  .height(300)

  .dimension(deweyF)

  .group(counts)

  .x(d3.scale.linear().domain([0, 1000]))

.y(d3.scale.linear().domain([0, 1000]))

.r(d3.scale.linear().domain([0, 2500]))

.renderHorizontalGridLines(true)

.colors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])

.label(function(p){

return p.key;

})

.colorDomain([0, 1000])

.colorAccessor(function(d, i){return d.value;})

.keyAccessor(function(p) { return p.key;})

.radiusValueAccessor(function(p) {return p.value;})

.valueAccessor(function(p) {

return p.value;

})

.renderHorizontalGridLines(true)

.renderVerticalGridLines(true);

[Nick Zhu]

The filtering problem with clicking most likely is a crossfilter related problem. Please make sure filtering works in your crossfilter dimension as expected before integrating with dc.js. Your code snippet looks fine not sure why grid lines are not rendered. I might be able to debug it if you can create a fiddle for your problem.

[QL]

Hi Nick,

I think the current code works with crossfilter. I created a fiddle by modifying one of your examples. I used an external json for data, but not quite sure how to do that within fiddle. So I just copied part of it called: demo. 

The data is not successfully linked. Hope you could help me with that. thanks. Sorry, I'm really new to all of this.

http://jsfiddle.net/q2Zdj/ 

[QL]

Here is an updated version:

http://jsfiddle.net/q2Zdj/1/

[Nick Zhu]

Having hard coded data in a fiddle is a common approach. However I think your data array is not correct. It should be a 2-dimension array also some of the number contains comma which should be removed.

[Nick Zhu]

Thats right you can't simply copy csv into your javascript since it will violate javascript syntax. In your current fiddle there is a missing parenthesis, also you did not load any javascript library. See the following fiddle for reference and example:

http://jsfiddle.net/ieeamo/hJr7G/

On Wed, Jul 17, 2013 at 1:46 PM, Qian <lee0...@gmail.com> wrote:

Hi Nick,

My original CSV file just look like that, and it worked fine. I guess when you hard coded data in to fiddle, you can't really do that?

original file:

"title","o","i","count","dewey","word"

"abalone book","2005-11-04 14:53:00","2006-09-28 11:07:00",2,594,"abalone"

"Abandon ship the saga of the U S S Indianapolis the Navys greatest sea disaster","2006-02-03 15:55:00","2006-02-13 14:34:00",27,940,"Abandon"

"Jardim abandonado","2008-01-20 15:28:00","2008-01-27 14:46:00",182,785,"abandonado"

I've switched the data into a really 2D small array. Still no luck. Ideas?

http://jsfiddle.net/q2Zdj/3/

[Nick Zhu]

You can see all td are styled using column index if you inspect the dom, so try the following:

d3.select(".dc-data-table").selectAll("td._0")

On Wed, Jul 17, 2013 at 7:20 PM, Qian <lee0...@gmail.com> wrote:

Hi Nick, 

Is there a way to hack the "column" in dc? I mean, it's very easy for me to do a highlight/on click on "tr"/"th". But if I use the column from data table, they are not listed as table elements right? Is there an easy way that I can perform highlight/on click on "column"?

Thanks

On Wed, Jul 17, 2013 at 1:52 PM, Qian <lee0...@gmail.com> wrote:

thanks for the demo.

finally being able to get the charts to sort of working.

http://jsfiddle.net/q2Zdj/5/

like I said, the dots moves to somewhere instead of getting highlighted. I'm also a little bit confused about dimension vs group for dc. How would you usually apply data to these two functions? I know it's more like a crossfilter type of question, but I wasn't about to find a good explanation online, could you explain that also please?

thanks.

[QL]

Hi Nick,

It seems I got no luck there.

Here is an updated fiddle I made. 

Please see line 124 and 125

//var tr = d3.select("#dc-dataTable").selectAll("td._0")  //this line does not work

var tr = tableChart.selectAll("tr") // this line can only select the default table elements. Data /  title / etc.

Qian

[Nick Zhu]

It should work. Try the following line in your console on http://nickqizhu.github.io/dc.js/

d3.select(".dc-data-table").selectAll("td._0").style("background-color", "red")

[Qian]

Here is the fiddle. Still, it seems nothing happens.... 

http://jsfiddle.net/q2Zdj/8/

[Nick Zhu]

Just missing some css. Add this to your style sheet:

.dc-chart .grid-line line {

fill: none;

stroke: #ccc;

opacity: .5;

shape-rendering: crispEdges;

}

[Qian]

Hi Nick,

Thanks. This:

.dc-chart .grid-line line {

fill: none;

stroke: #ccc;

opacity: .5;

shape-rendering: crispEdges;

}

is for the grid line while rendering vertical and horizontal grids right? Not for highlighting/select data table right? I figured out the grid, but still have trouble with how to selecting the data table. 

[Nick Zhu]

try this:

d3.select(".dc-data-table").selectAll("td._0").style("background-color", "red")

[Qian]

Hi Nick,

I've already tried that. It doesn't seem to work. see the fiddle here:

http://jsfiddle.net/q2Zdj/10/

Will I be able to apply mouse over effect on the columns as well? thanks.

[QL]

Hi Nick,

It works now. I didn't put the call in side renderlet.... That's why. 

Here is a working version of it.

http://jsfiddle.net/q2Zdj/11/

Do have one more question though, any possible way I could detect which column is currently highlighted?

[Nick Zhu]

I guess the easiest way will be using a variable to store the index of which column is be highlighted in your code since you are handling the highlighting yourself so you already know which column is be selected just need to store the state.

[QL]

yes that worked! thanks!