I have created a Dojo Clustered Columns chart. JSFIDDLE example
What I want to achieve is to have gap between the clustered columns. So all coke products are clustered together, but say I want some gap between these columns(There is already gap between coke and meat by applying attribute gap: 10. What I want is a small gap between the clustered column itself)
How can I achieve this ?
Okay I found the trick to do it. After analyzing this example , it occurred to me, to create a gap between stacked column themselves, I just need to make the boundary of the chart as the same color of the background.
My background was white, so I added the following code in my series
addSeries("Upmarket", [3,5,5],{stroke: {color:"white"}, fill: "#A31A7E"})
Default width is 1. You can control the width of stroke by adding the width property
addSeries("Upmarket", [3,5,5],{stroke: {color:"white", width : "4"}, fill: "#A31A7E"})
JSFIDDLE UPDATED EXAMLE
Related
How can i make the md-table columns flexible, that the width of each column is dynamically?
At the moment my table look like this.
I did set width on the <md-cell> using fxFlex="123px" for elements that i know they will be fixed like columns with handle icons, and just set fxFlex for the rest of the elements so they auto align.
same goes to <md-header-cell>
#cucuru i found a little workaround over the CSS
.mat-column-COLUMNID {
flex: 0 0 13%; //change the 13% with every width you need
}
with this little code you can change the width of each column, it will break the lines automatically.
I am using dc.js, crossfilter.js to do dimensional charting.
The chart is not correctly displaying the y-axis data i.e. showing 00000, 50000, 00000, 50000 alternatively in the y-axis. I am doing console level logging of the group and it is showing correct value.
I have segregated the problem into a jsfiddle
Any clue on what I am doing wrong?
I think it is just clipped because it is too wide. Try setting the margins:
https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#marginsmargins
I have a Kendo grid with too many columns. Initially I chose to hide some columns, but later I decided to display all the columns with a horizontal scrollbar.
I did this by assigning a width to each column. When I did so, the lines between each column are not in sync with the header lines.
I mean, the lines in the data part of the grid, are moved slightly to the left with respect to the header lines.
To clarify, when I give the width for each column in pixels the above problem persists. But, when I give the width in %, the scrollbar is not displayed.
I want to display the scrollbar to show all the columns.
Any ideas about how to do this?
Here is quite straight forward grid with horizontal scrollbar (ignore the virtualization) http://demos.kendoui.com/web/grid/virtualization-remote-data.html.
Have a width on your grid or it's parent and width for each column with their sum over the actual grid width then you get your scrollbar:
{ field: "OrderID", title: "Order ID", width: 60 },
(I did quite few Kendo grids in the past and never experienced such issue. Sounds like you setting up the column width directly on the html, I can't see how else would Kendo get out off sync.)
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.
I'm having hard time with tables and column widths.
Update: I'm using XHTML Strict 1.0.
The page is: http://www.pro-turk.net/try
The first problem I have is, I have a column with a fixed width of 100px and 4px padding, but it disobeys my padding depending on the value. The column width (as the distance between two borders according to W3C Box Model) is 156 px even if padding is 0 or 4. Only the position of the text changes.
According to W3C Box Model ( available at www.pro-turk.net/box_model.png ), borders and paddings aren't included in WIDTH attribute, so why does it render wrongly ?
The second problem is, when you look the page I gave with IE8, the first cell in the second row has 150px fixed width, but ie shows it about 50% of the total table width regardless of what i say.
You're using the default auto table-layout mode. That lets the browser decide fairly arbitrarily how much space to assign to each column, usually depending on the amount of actual content in the cells. In this mode, width is little more than advisory.
If you want the browser to take your column widths seriously you should set table-layout: fixed on the <table> element, and either include <col/> elements with explicit widths, or set widths on the cells in the first row, for the columns you want to be fixed-width. (The other columns will share the remain width equally.) fixed table layout also allows the browser to render faster.
For your page you might be better off with CSS positioning. Certainly for the internal table that seems to exist only to float-left the image. Nested tables are to be avoided.