I've got a Google Charts Table that displays a couple of columns and rows. Say for instance we have 4 columns(A,B,C,D respectively). How would I be able to still load column C's values, but just hide the column so that it's not getting displayed?
Thanks in advance!
Instead of drawing the DataTable, you have to create an in-between DataView object where you filter the original data. Something like this:
//dataResponse is your Datatable with A,B,C,D columns
var view = new google.visualization.DataView(dataResponse);
view.setColumns([0,1,3]); //here you set the columns you want to display
//Visualization Go draw!
visualizationPlot.draw(view, options);
The hideColumns method is maybe better instead of setColumns, choose yourself!
Cheers
Here's an alternative using a ChartWrapper instead of a chart.
var opts = {
"containerId": "chart_div",
"dataTable": datatable,
"chartType": "Table",
"options": {"title": "Now you see the columns, now you don't!"}
}
var chartwrapper = new google.visualization.ChartWrapper(opts);
// set the columns to show
chartwrapper.setView({'columns': [0, 1, 4, 5]});
chartwrapper.draw();
If you use a ChartWrapper, you can easily add a function to change the hidden columns, or show all the columns. To show all the columns, pass null as the value of 'columns'. For instance, using jQuery,
$('button').click(function() {
// use your preferred method to get an array of column indexes or null
var columns = eval($(this).val());
chartwrapper.setView({'columns': columns});
chartwrapper.draw();
});
In your html,
<button value="[0, 1, 3]" >Hide columns</button>
<button value="null">Expand All</button>
(Note: eval used for conciseness. Use what suits your code. It's beside the point.)
var view = new google.visualization.DataView(dataTable); //datatable contains col and rows
view.setColumns([0,1,3,4]); //only show these column
chart.draw(view, options); //pass the view to draw chat
You can do this with CSS.
"#table_div" is the div my table is wrapped in. I use this because there a multiple tables on the same page.
#table_div .google-visualization-table table.google-visualization-table-table
td:nth-child(1),th:nth-child(1){
display:none;
}
I also have an event handler on the chart's rows, and can still pick up the data from the hidden column.
If you want to use particular column value in control wrapper but don't want to show that column in Google Charts then do following things.
1) Add all column to your google charts data table.
2) Add following things to options of your chartWrapper.
// Set chart options
optionsUser = {
"series": {
0: {
color: "white",
visibleInLegend: false
}
}
};
3) In above code series, 0 means the first line in your line chart. So It will set the color to white and also hide column name in Legends.
4) This way is not the proper way to hide columns, Using DataView is recommended. Whenever you want to use data in the data table for adding controls to your chart but don't want to show that column in the chart this is the way.
Related
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
How can I create extra cells in my Excel export? I use groupHeaderDownload, this works but it only generates a string in the first column in the Excel sheet.
I am searching for a way to generate an extra cell, and an extra row.
I tried to pass arrays and an object but everything gets transformed to a single string.
Example:
groupHeaderDownload: function(value, count, data, group){
return [{ Nr:data[0].nr},{ Description:data[0].om}];
},
If you want to add extra rows of data to your download then i would suggest that you add them to your table using the addRow function before your then trigger the download function, you could then remove it after if you dont want it available generally:
var row = table.addRow({name:"Billy Bob", age:"12"}, true); //add new row to the top of the table
table.download("xlsx", "data.xlsx"); //download table
row.delete(); //remove row after download
If you want a column to only show up in a download then in the columns definition you should set the visible option to false and the download option to true, which will cause the column to only show up in downloads:
{title:"Example", field:"example", visible:false, download:true},
How can we set dynamic header name. is is being passed from JSON. Also I want to know how can we hide multiple columns for eg you have an example of hiding a single column but i want to hide multiple columns and i want a same multiple columns to be shown on button click.
These feature or questions are related to comparison table we are tying to develop using tabulator where i want to compare multiple specific columns and I want to hide the columns which i don't want to see and show it again if i want
Tabulator has an option for auto column name generation based on the property names of the row data.
You can enable this by setting the autoColumns option to true:
var table = new Tabulator("#example-table", {
data:tabledata,
autoColumns:true,
});
Have a look at the Autocolumns Example to see it in action.
To hide multiple columns you need to call the hideColumn or showColumn function multiple times If you would prefer that the table is only redrawn once during this time, then you can use the blockRedraw function to prevent redrawing of the table until your updates are complete:
table.blockRedraw(); //block table redrawing
table.hideColumn("name") //hide the "name" column
table.hideColumn("age") //hide the "age" column
table.restoreRedraw(); //restore table redrawing
In order to hide a column you have to add visible:false as argument inside table's declaration.
example:
columns:[{title: "Test Column", field: "test", sorter:"number", width: 100,visible:false}]
In order to hide/show multiple columns first must identify which column to be hidden/un hidden
A simple approach is to make an object array of Boolean states, such as:
var visibility =[];
visibility.push({col1_Status:true,col2_Status:true,col3_Status:false});
then table's initialization will be like:
columns:[{title: "Test Col1", field: "test1", sorter:"number", width: 100,visible:visibility[0].col1_Status},
{title: "Test Col2", field: "test2", sorter:"number", width: 100,visible:visibility[0].col2_Status},
{title: "Test Col3", field: "test3", sorter:"number", width: 100,visible:visibility[0].col3_Status}]
Now you are ready to fetch your Jason Data and change the visibility according your needs.
The above procedure works independently also. Any time you can access multiple array values, change their status and re-update tabulator to hide/show columns.
You can apply the same method with column name also changing the title:
Note that once column is initialized inside table, it cannot be changed. The only way to alter Heading (data also) is to remove existing column and replace it with another.
To make this happen use:
table.deleteColumn("Column Name Here");
table.addColumn({title:"Name", field:"name"});
Hope that helps!
I'm using the Tabulator javascript table:
http://tabulator.info/docs/4.3/print
Is there a way to just print selected rows:
var table = new Tabulator("#example-table", {
printAsHtml:true, //enable html table printing
printVisibleRows:false, // print all rows in the table
});
What i am looking for is an option like "printSelectedRows: true) or some sort of work-around i can use to accomplish this.
There is no such option. One work around I can think of is a filter that results in only the rows you want being visible and not using printVisibleRows:false. Then only those rows would print. This of course depends on the row selection having some common element. For ad-hoc selection work around's I can think of are:
1) Moveable rows:
http://tabulator.info/docs/4.3/move#rows
Move the rows you want to the visible part of the table.
2) Move between tables:
Move rows to another table for printing.
http://tabulator.info/docs/4.3/move#rows-table
I am using amCharts pie chart (v3) and I want to customize the pop up balloon that comes on mouseover on a slice: in addition to routine text like [[value]] [[percent]],
(a) a text that depends on the data item, and
(b) provide different click options to the user depending on data item. Every data row might not have these possibilities in which case the options should not appear.
For example, the pie chart might show wine consumption by country. On hover, I want to provide the user two different click options - one to see consumption by season if available, plus another to see consumption by age group if available.
Is it possible to do so in amCharts? I saw an exit for event clickSlice() here http://docs.amcharts.com/3/javascriptcharts/AmPieChart but nothing on how to modify the balloon text on the fly and add behavior to the balloon that comes on hover.
Will greatly appreciate your help.
For writing dynamic text in the balloon you can also do the folowing:
"graphs": [{
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
if (value < 500) {
return value + "<br>(Little)";
} else {
return value + "<br>(A Lot)";
}
}
}],
You can use the following tags: [[title]], [[description]], [[value]] and [[percent]]. says the documentation.
I have used description for a custom field, it works fine.
You can add any custom field to your data provider and then display it in your balloon in the same way as value:
{value:15, title:"slice title", someCustomField:"some custom data"}
and then:
chart.balloonText = "[[someCustomField]]";