complex multipart clickable label on dc.js bar chart - d3.js

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?

Related

Tableau cannot horizontally scroll in worksheets

I am using Tableau for data visualization and generating lists that can be exported to Excel.
However, when the amount of columns get too big, I cannot see all my columns in the view (They are there though). The problem is that there doesn't seem to be a horizontal scrollbar. I can scroll vertically through my rows, but I haven't found a way to do this horizontally to look through my columns, the same way you would do at the data source tab.
If anyone could help me to figure out how to achieve this that would be awesome! I am using Tableau Desktop version 2018.3 on a Mac.
Edit: The problem also seems to be on Windows and is not related to the maximum amount of columns or the view mode.
Example image of the described problem
You are not getting scrollbar because you are viewing it on a worksheet. Try putting it on the dashboard and set dashboard size to fixed and increase width to accommodate all columns.
now you will get horizontal scrollbar for sure
thanks
Besides updating the horizontal row/column label limit #Bernardo mentioned here:
You'll need to make sure you've have selected "Standard" from the display option list at the top of the screen. That options prevent Tableau from fitting everything into the height, width or view of your current display.
Tableau shows a horizontal scroll bar for measures, but not for dimensions. When only dimensions are included on either the Columns or Rows shelf, the lower horizontal scroll bar will not display. Dimensions are treated as headers for measure aggregations and do not generate a horizontal scroll bar when they exceed the width of the view.
To change the Table Layout and increase the number of columns and rows in your table, go to:
Analysis > Table Layout > Advanced
Set each of the Maximum values to 16, which is the limit allowed.

SSRS Matrix Tablix with Trend Chart in One Column And Stacked Bar Chart in Another Column

I need to combine a trend chart onto one column of a matrix and a stacked bar chart into another column – similar to this. I have a label that runs over the top, which is why I don’t want to do two separate matrixes side by side.
Right now I have two different datasets for each.
If it was a roll up bar chart – I could just join the data sets and use aggregations for the bar chart – but with the stacked bar chart the issue of nominal values is tripping me up.
Sorta figured it out.
The key was to make the stacked bar chart a subreport. Then in the SQL for the dataset, add a WHERE Label = [Label passed in from Matrix row]

dc.js cap ordinal bar chart

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.

Invert nvd3.js legend click function

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);

SlickGrid: 2 questions: 1) change the orientation of column labels and 2) display d3.js elements inside cells

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.

Resources