I'm wondering whether you can make turn a progress bar into a stacked horizontal bar chart in tabulator?
There is no built in formatter with this functionality, but it is really simple to add your own Custom Formatter to add any type of formatting that you like:
{title:"Name", field:"name", formatter:function(cell, formatterParams, onRendered){
//cell - the cell component
//formatterParams - parameters set for the column
//onRendered - function to call when the formatter has been rendered
return "Mr" + cell.getValue(); //return the contents of the cell;
}}
Related
I have tabulator working with excel like tabs at the bottom that change the columns shown. It also highlights any row that has been edited and highlights each individual cell that has been edited. But when I switch tabs, the edited rows maintains their highlights, but if I switch back to the previous tab, the cells that were edited are no longer highlighted.
this.tabulator = new Tabulator(this.$refs['example-table'], {
data: [],
height: "500px",
index:"title",
placeholder: "No Data Set",
footerElement: $("#table-controls").get(0),
columns: this.gtabColumns,
cellEdited: function(cell) {
if((_.isNil(cell.getOldValue()) || _.isEmpty(cell.getOldValue()))
&& (_.isNil(cell.getValue()) || _.isEmpty(cell.getValue()))) {
return;
}
$(cell.getElement()).css("background-color", "#67f165");
$(cell.getRow().getElement()).css("background-color", "#d1fbd0");
},
});
This is happening because you are trying to directly manipulate the elements in the table from inside the cellEdited function.
Because Tabulator uses a virtual DOM it is not safe to try and manipulate any elements inside the table directly. You should only change the cell element in the formatter in the column definition or the rowFormatter for rows. anywhere else is unsafe.
In your case you would want a cell formatter like this:
var editedCellFormatter = function(cell){
if(cell.oldValue !== null){
cell.getElement().style.backgroundColor = "#67f165";
}
return cell.getValue();
}
Which you can then assign in the column definition:
{title:"Name", field:"name", formatter:editedCellFormatter}
I am using Tabulator and the default "fitData" function to size the cells. This works exactly as intended when I a) Have a default font size set and b) change the row font size using the rowFormatter:
rowFormatter:function(row){
var rowData = row.getData();
row.getElement().style.fontSize = config.body_font_size + "px";
The above works, however, when I want to change the font size of the column titles:
var curHeaders = document.getElementsByClassName("tabulator-col");
for (var i = 0; i < curHeaders.length; i++) {
curHeaders[i].style.fontSize = fontSize.toString() + "px";
}
This changes all the column font sizes, but does not resize the column width appropriately. Is there a different class where I should assigning the font? Is there a way to apply this in a similar way to the rowFormatter?
You shouldn't try and programatically alter elements inside Tabulator from outside the table. Because Tabulator uses a virtual DOM these changes can be overwritten at any point without notice.
If you need to format column header titles you should use a titleFormatter in the column definition for the column you want to change:
//define custom formatter
var customFormatter = function(cell, formatterParams, onRendered){
//set font size
cell.getElement().style.fontSize = fontSize.toString() + "px";
return cell.getValue();
}
//in the column definition for a column
{title:"Name", field:"name", titleFormatter:customFormatter },
Full documentation on how to use formatters can be found here: http://tabulator.info/docs/4.0/format
If you need to keep using your approach then you can call the table redraw function to force the table to be rebuilt:
table.redraw(true);
Is there a reason you need to change it at run time rather than just making the changes in CSS?
Posted this on google group, but post seems to have disappeared so will try here.
I have a data array which I use to populate the flot chart series data and all works fine. I now want to make both the legend and related segment clickable so I can "drill down" to more detail in the pie chart and have another pie chart show with a breakdown of that segment's data.
The label formatter custom function is obviously where to do this, but it only accepts label and series and the series doesn't seem to contain the index of the position in the array of each series object as it passes through the label formatter function.
I'm trying to do something like:
function labelFormatter(label, series)
return '<a href="#" onclick="myfunction(" + series.index + ")>" + label + "</a>"
}
...so that I can pass the clicked segment details. I suppose I could just use the label passed and then search through the original data array for a match and use that index position to work out the item clicked, but it seems a bit long winded.
Am I missing some functionality here or is it just not possible to do it the way I'm trying?
The legend by default shows series in the same order as you provided them. You can therefore use a regular jQuery loop to turn them into links, or simply add click listeners.
$.each(".legend tr", function(i, row) {
addDrillDownListener(row, series[i]);
});
Working with the pie slices themselves is even easier, since the hover and click callbacks receive an object with a seriesIndex attribute.
I think my question is simple for js experts (I am a beginner in js).
In my script I dynamically create a table. In html code I have a button and I want all table cells to be filled with some color when you click on this button.
I have a separate function for filling the table cells but the problem I have encountred is that when I click the button only the last cell of the table gets filled. I assume this issue has something to do with closures as the table cells are being created inside the loop.
Here is the code:
HTML:
<button onclick='show()'>Click</button>
JS:
var obj = new Object;
obj.x = document.createElement('table');
document.body.appendChild(obj.x);
for(i=0;i<10;i++){
obj.y = document.createElement('tr');
obj.x.appendChild(obj.y);
for(j=0;j<10;j++){
obj.z = document.createElement('td');
obj.z.appendChild(document.createTextNode(j));
obj.y.appendChild(obj.z);
}
}
function fill(){
obj.z.style.backgroundColor='red';
}
//-->
Each time the for loop iterates, obj.z is overwritten by a new one, meaning only the last cell will ever be referenced. An easier way to style all the cells in a table is very simply just to change the backgroundColor of the <table> itself.
If you want to do this another way, you'd need to loop through the cell elements individually, and style each one as you go. An easier way to do this is to use jQuery, add a className property to the value (such as theTable in this example) and use the following code:
$('table.theTable td').css('backgroundColor','red');
This would select all the <td> elements in a table with class theTable (it uses CSS selectors), and style their backgroundColor CSS property as red.
I have stacked bar chart in which the number of columns is dynamic, can change from 1 to n columns. I want the spacing between the charts and width of the bar to be consistent. How do I fix it. Please suggest solutions / ideas.
In a Stacked Bar chart, you can change the spacing between bars using
CategoryAxis.setLowerMargin
CategoryAxis.setMargin and
CategoryAxis.setUpperMargin
Code is below
protected JFreeChart generateGraph() {
CategoryAxis categoryAxis = new CategoryAxis("Categories");
categoryAxis.setLowerMargin(.01);
categoryAxis.setCategoryMargin(.01);
categoryAxis.setUpperMargin(.01);
categoryAxis.setCategoryLabelPositions(CategoryLabelPositions.UP_90);
ValueAxis valueAxis = new NumberAxis("Values");
StackedBarRenderer renderer = new StackedBarRenderer();
renderer.setBarPainter(new StandardBarPainter());
renderer.setDrawBarOutline(false);
renderer.setShadowVisible(false);
renderer.setBaseItemLabelsVisible(true);
renderer.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
CategoryPlot plot = new CategoryPlot( _dataset,
categoryAxis,
valueAxis,
renderer);
plot.setOrientation(PlotOrientation.VERTICAL);
JFreeChart chart = new JFreeChart( "Title",
JFreeChart.DEFAULT_TITLE_FONT,
plot,
true);
//ChartFactory.getChartTheme().apply(_chart);
return chart;
}
StackedBarRenderer devotes some effort to making the "spacing between the [bars] and width of the bar to be consistent." It's not clear what you want it to do differently as the number of columns changes. The relevant geometry is determined by the parent BarRenderer in such methods as calculateBarWidth(), which can be overridden as desired. Also, verify that there is a value for each category in each series.