I want to add a simple bar to visually show a value between 0 and 1 in an HTML table cell. The Formatter option in Google Visualization API is only available for a DataTable and I cannot just inject it into an HTML table cell.
Should I just create a full bar chart for the single value and add it to the cell? Or is there a better solution/
Use a BarFormatter on the appropriate column of the DataTable. When drawing your Table visualization, you should see a bar in the cells of that column:
// use a BarFormatter on column 2 of the DataTable
var barFormatter = new google.visualization.BarFormat({base: 0, min: 0, max: 1});
barFormatter.format(data, 2);
Related
I have a panel on my site that has a Google Visualization Chart (Table) with controls and custom style. I have trouble with setting column width - somehow no solution works. Where is my mistake?
My two solutions:
a) like in row 57/58 in the code:
data.setProperty(0, 0, 'style', 'width:150px;');
b) like line 134-145 in the code:
google.visualization.events.addListener(table, 'ready', function() {
google.visualization.events.addListener(table.getChart(), 'sort', setWidth);
setWidth();
});
function setWidth() {
var title = 'Field4';
var width = '500px';
$('.google-visualization-table-th:contains(' + title + ')').css('width', width);
}
Also I didn't find any solution for limiting row height. If you select one row (eg. with Field4 filter) then this one row will fill all the space. Is there a way to limit row size to the content only?
This is my code: https://jsfiddle.net/my7p01e8/2/
I have a stacked bar chart that only ever has 5 categories(but the value of the categories change from year to year, it is a sliding 5 year window).
I have successful customised the bars to the colors I want.
But now I wish to make the label of each Category the same color as the customised bar color.
Is there a way to do this?
You can use custom code for this.
In Report Properties | Code, you can paste in the following code:
Private colourPalette As String() = {"#418CF0", "#FCB441", "#DF3A02", "#056492", "#BFBFBF", "#1A3B69", "#FFE382", "#129CDD", "#CA6B4B", "#005CDB", "#F3D288", "#506381", "#F1B9A8", "#E0830A", "#7893BE"}
Private count As Integer = 0
Private mapping As New System.Collections.Hashtable()
Public Function GetColour(ByVal groupingValue As String) As String
If mapping.ContainsKey(groupingValue) Then
Return mapping(groupingValue)
End If
Dim c As String = colourPalette(count Mod colourPalette.Length)
count = count + 1
mapping.Add(groupingValue, c)
Return c
End Function
This will give you the option of the pastel colour palette. If you want other colours, simply replace the hex colour codes with values of your choice.
To use this, simply use the following expression:
=Code.GetColour(Fields!Thingy.Value)
Use this on your series and your label fill expressions. This will ensure that the same colour appears for both. If you have multiple graphs with the same values in, this will also ensure that the same data series across multiple graphs always have the same colour.
All my searches turned up for sizeColumnsToFit and autoSizeColumns which is not what I want.
My grids have many columns, so it scroll horizontal which is fine
But I cannot know in advance what would be the most space needed for the widest text in a column, so want the grid to auto size all columns to accommodate for whatever is the longest line of text in the cell.
Can one do that? (pretty much like have nowrap on a html table column, not that ag-grid wrap text, it just hide what is too long)
Grid Resizing:
https://www.ag-grid.com/javascript-grid-resizing/
sizeColumnsToFit - this tries to squeeze all the columns in the view - no horizontal scrolling
autoSizeAllColumns - this tries to size all columns to to fit the data - horizontal scrolling
// If you need to resize specific columns
var allColIds = params.columnApi.getAllColumns()
.map(column => column.colId);
params.columnApi.autoSizeColumns(allColIds);
// If you want to resize all columns
params.columnApi.autoSizeAllColumns();
I passed through this and it took me some time to make it work the way I wanted to, by that I mean :
Use all the available space
Make each column take the width required to display its content correctly
Solution :
Add the width parameter for each column (requires some manual tuning to set the right values)
Call gridApi.sizeColumnsToFit() in the onGridReady which will resize to take the available space while making sure that columns having bigger width will take more space
const gridOptions = {
...
columnDefs: [
{
...,
width: 100
},
{
...,
width: 50
},
...
],
...
onGridReady: (event) => event.api.sizeColumnsToFit();
};
Simply use flex instead of width in the column definitions. The grid will adjust automatically.
You can find a complete example for auto resizing all column.
column-sizing
Simply call autoSizeColumns() function, all columns will be resized according to content.
gridColumnApi.autoSizeColumns(allColumnIds, skipHeader);
I use Google Chart Calendar and I would like to get to know how to manipulate with the selected date. I can get selected 'row' and 'date' by using the listener for select:
google.visualization.events.addListener(chart, 'select', function() {
console.log(chart.getSelection()[0].date)
console.log(chart.getSelection()[0].row)
});
Here is official documentation.
How can I find the div with selected date by using the 'row'?
My goal is to manipulate it and add additional colors for following 5 days like this:
I also wanted to display tooltip after click which I did by cloning the current tooltip on hover but my intention is to get the selected div rather than row
each date on the calendar is represented by an svg <rect> element,
that has height and width attributes of 16
$('#chart_div rect[width="16"][height="16"]')
to find the selected element, calculate the day number of the year (1-366),
you can use the functions found in the following answer to calculate the day number...
calculate the day of the year (1 - 366)
then use jquery to get the element...
var selection = chart.getSelection();
if (selection.length > 0) {
var dayNumber = new Date(selection[0].date).getDOY();
var selectedRect = $('#chart_div rect[width="16"][height="16"]').get(dayNumber);
}
be sure to check the length of the selection,
the event is also fired when a selection is removed,
which will cause this to fail --> selection[0]
note: the chart probably won't let you change the style of the selected element,
because it will override any styles according to option --> calendar.focusedCellColor
but you can definitely change the 5 elements that follow the selected element,
using --> dayNumber + 1 -- etc...
I am using google charts for plotting a graph
How can I show annotation of the point at right-hand-side of the point but it showing on the top of point
http://i.stack.imgur.com/UHhQH.png
I want it like as follow
http://i.stack.imgur.com/lUBcq.png
Please any one help me out
You can actually change the position of the annotations, by using css tranform.
You should first get a handle to the anntation text, if you want to change all the text, then you can use the text tag name in css
text {
transform: translate(10px, 30px);
}
I was able to adjust annotations to the right by doing 2 things:
1) Entered some white spaces (\u00A0 is white space) and a long dash (—) on the left side of the desired annotation.
2) Added stem length of -3.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Model');
dataTable.addColumn('number', 'T');
dataTable.addColumn({type:'string', role:'annotation'});
dataTable.addRows([
['ABC',30,'\u00A0\u00A0\u00A0\u00A0 — X'],
['DEF',20,'\u00A0\u00A0\u00A0\u00A0 — Y'],
['GHI',10,'\u00A0\u00A0\u00A0\u00A0 — Z'],
]);
var options = {
1: {annotations: {stem: {length: -3}}
};