I am working with crossfilter and dc.js and I have Item per month row chart using crossfilter.
Whenever I have more than 10 items, the row width gets very small and the label gets squished.
How can I add a scroll bar so I can have have more than 10 items with acceptable width?
Small section of my code.
itemRowChart
.width(400).height(200)
.dimension(month)
.group(itemPermonth)
.label(function(d){return d.key})
.elasticX(true)
.xAxis().tickFormat(d3.format(",.0s"));
Related
Currently, i'm developing realtime stackedAreaChart using nvd3.js.
nvd3.js is great, but i have two problem.
Example is following
http://jsfiddle.net/logo1318/1hkxfqhw/
1. First Problem
when i use following code
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%X')(new Date(d)); })
Tooltip shows "Nan:Nan:NaN" like following pic, but i want to show "12:33:33".
2. Second Problem
When i mouse over some position in chart, tooltip shows that position's content.
When chart is moving(updating) , tooltip doesn't show current position's content
But, until i move a mouse, tooltip content is not updating.
How can i update tooltip content like following examples in rickshaw.js?
http://code.shutterstock.com/rickshaw/examples/extensions.html
Thanks.
I am new to dc.js and d3.js. I have created a bar chart along with pie charts and a line chart with dc.js.
Now, in the bar chart I want to sort the bars based on the value that each bar represents. (For example, by clicking a button.) Is this possible with dc.js?
Note that I have designed my bar chart such that the X-axis represents geographic locations and the Y-axis is scaling on some value.
Could you show us some code ?
In the past I have done that this way for a row chart :
var topRowChart = dc.rowChart("#chart-top-dest");
topRowChart
.height(400)
.width(400)
.dimension(destination, "destination")
.group(calls,"calls")
.ordering(function(t){return t.calls;})
.label(function(d){ return d.key + " : " + d.value + " calls" ;})
.cap(10);
The important bits are :
.ordering(function(t){return t.calls;})
.cap(10);
You have to pass a function to ordering() that returns the dimension/group that will be used for sorting.
Surprisingly removing cap() cancels the sorting.
I'm using nvd3 and have a few charts where the legend is much to large. E.g. a scatter/bubble with 15 groups and the group names are long. The legend is so large that it leaves almost no room for the chart itself.
Is there a way to remove the legend or toggle the legend or limit the height/width it is taking up? Any example would be great.
Also, is there a way to have the bubble show a descriptive string? Right now when you stand on top of a bubble it highlights the x/y coordinates. I also want it to show the bubble name.
For example, each of my bubbles represents a country (which has a name), the x is GDP and the y is debt. The group is a classification/not name.
.showLegend(false) will help you. Here is an example -
chart = nv.models.multiBarHorizontalChart().x(function(d) {
return d.x
}).y(function(d) {
return d.y
}).showLegend(false);
I have a pie chart generated by nvd3, but it has too many slices.
By clicking legend, we can control the slice display or not, I want top 10 (by count) of the chart slices show by default, and others hide (by clicking legend, they can be added to pie chart).
Can I do this in nvd3?
Finally, I complete this by transforming my data:
[{
'x': 10,
'y': 1,
'disabled': true,
}]
set the disabled attribute to true.
I am adding columns to kendo ui grid dynamically.
When there are many rows in the grid the rows are having borders and displaying it correctly.
But, when there are very few rows in the grid the last row or doesn't seem to show border.
Can the cell borders on a Kendo grid extend to the bottom of the grid area when there are not enough rows in the grid
#(Html.Kendo().Grid<Model>()
.Name("GirdName")
.Scrollable(scr => scr.Height(100))
...
$(document).ready(function () {
$("#GirdName>.k-grid-content>table").css("height", 100);
})