I am designing dc.js application which displays top n results and I want the graph to display more results like top(n+10) results when user zooms out.Is there a way to do so?
Related
I am new to dc.js. I want to build the chart pictured below:
On the top of each bar, there should be values like 2/3. This denotes the number of records for two different categories. I need to show each value in a different color.
Also I have a requirement that the values should be clickable to view the records in separate table when we click on the value.
Can anyone help on this?
I have made a simulation consisting of multiple vehicle agents (about 17), but I can't figure out a way of how I can display time color charts related to each of those vehicles in the main agent. If possible I want it to be in a scroll view so that the user can scroll through the different time color charts. I want to make it sort of like a Gantt chart.
Sort of something like this
The image related to my query
Scrolling is impossible with current AnyLogic UI, unfortunately. You can, however, add buttons to manually "scroll up/down" and change what view area the user sees.
Re plotting itself, either create 17 charts manually and link them to the individual agents.
Or better, create 1 chart in the agent type, have the agent population embedded in Main and adjust the y-component of the chart presentation according to the agent index, something like 100 + (index*15)
Some example models use this approach so check if you find something similar there
So, in nvd3 charts, clicking on a legend entry basically filters that out of the chart window (for instance in the case of area charts). I want to invert this functionality..i.e. show the particular chart when its corresponding legend is shown and hide all the others...is there a way to do it?
It is similar to what happens when user hits the chart itself (i.e. only the one that is clicked is expanded and rest of the streams hide).
I am referring to this example: http://nvd3.org/ghpages/stackedArea.html
There's a radioButtonMode that should do exactly what you want. You should be able to set this on the chart, i.e.
chart.radioButtonMode(true);
I'm building a basic dashboard for internal use. I've little experience with D3 / SVG etc so please excuse me if this is obvious:
Aim
I have a time series of values, one value per date for a full year. Inspired by the example on the dc.js wesbite, I'm displaying a 'mini' bar plot of the entire series, and allowing the user to select a range which in turn sets the limits of the axis scale range of a 'large' line plot.
By default (on page load / refreshAll()) I've set the limits of the large line plot to be the most recent 60 days.
The user is encouraged to set their desired range using the mini plot at the bottom, and when they do, the 'grab handles' appear and the chosen range is highlighted on the mini plot, for example:
My issue
On page load / refreshAll(), the grab handles and range highlighting aren't shown on the mini plot, for example:
Question
Is there a way I can set the grab handles to appear upon page load?
Here is how i do it by using crossfilter and dc.js. You can get the last x days by doing something like:
xrange = d3.extent(data, function(d) { return d.date; });
last60 = [d3.time.day.offset(xrange[1], -60), d3.time.day.offset(xrange[1], 1)]
Assuming you have a date in your data. Do this after reading the data with d3, but before feeding it into crossfilter.
Then for the bottom chart (mini plot) simply set the filter property to:
.filter(last60)
And also set the xrange for the top chart to the same range:
.x(d3.time.scale().domain(last60))
Something like this might also work for setting the xrange, but i havent had any success with that:
topchart.focus(bottomchart.filter())
New to SlickGrid here, and have a couple questions:
1) Is it possible to change the orientation of the column labels? I would like to display a grid without horizontal scrolling, and the data can easily fit if I limit the width of each column. However is I do that, I dont have enough space for my column labels. So I am wondering if - like in excel - I could change the orientation of the column labels (to say 45 degreees vs. horizontal)? If not, any other suggestion?
2) Is it possible to display D3.js type elements (shapes etc) inside cells? If not, are there options to display things such as color coded stop-lights type things?
As you might have guessed, I am building a dashboard that pulls data from a summary table in a DB, and need visual eye candy. It's probably all doable in D3.js, but I'm looking for a faster way to implement, and a data grid appears appropriate.