In Tabulator, how can I make the horizontal alignment of column headers match the column data, or perhaps manage them individually. A column of centered data looks odd with a left-aligned header.
I am very new at this but I have been through the Tabulator info pages, the bitbucket pages, and searched here. It seems like there might be some way by creating some formatter functions but that seems very obscure for such a basic function.
Thanks, Sam.
there is now an available property for each column:
var table = new Tabulator("#example-table", {
columns:[
{title:"Name", field:"name", headerHozAlign:"right"}, //right align column header title
],
});
Use CSS
.tabulator-col-title {
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css">
</head>
<body>
<div id="example-table"></div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
</body>
</html>
const tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999"
},
];
const table = new Tabulator("#example-table", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150,
align: "center"
},
{
title: "money",
field: "money",
align: "left",
formatter: "money",
align: "center"
},
{
title: "Favourite Color",
field: "col",
align: "center"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
]
});
const setAlignment = function(index, alignment) {
$($('.tabulator-col-title')[index - 1]).css("text-align", alignment);
}
.tabulator-col-title {
text-align: center;
}
<script src="https://unpkg.com/tabulator-tables#4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="example-table"></div>
<button onClick="setAlignment(4,'right')">Set Alignment</button>
</body>
</html>
As provided by dota2pro, .tabulator-col-title { text-align: center; } achieves bulk alignment of headers. And the solution provided for specific columns also works.
use the following property in the column definition to center the header individually (e.g. centered):
title:'test',
field:'myfield',
titleFormatter: function(cell, formatterParams, onRendered)
{cell.getElement().style.textAlign='center'; return ''+cell.getValue()}
(tested with Tabulator 4.5)
Related
I am using Tabulator version 4.3 and trying to print a table (which has columnCalcs: both) using print function. I have set printCopyStyle:true, but the output of print does not include footer row (column calculation at the bottom of the table); also alignment of numbers which is set to right does not appear right aligned. The footer and alignment both appear correctly in the Tabulator table, but not in print copy.
Please check jsfiddle here.
Are these features not available or am I missing something?
const tabledata = [{
dep: "A",
name: "Oli Bob",
score: 100
},
{
dep: "A",
name: "Jamie Newhart",
score: 120
},
{
dep: "D",
name: "Gemma Jane",
score: 90
},
{
dep: "D",
name: "James Newman",
score: 100
},
];
const table = new Tabulator("#example-table", {
height: "250px",
data: tabledata,
groupBy: "dep",
columnCalcs: "both",
printAsHtml: true,
printCopyStyle: true,
columns: [{
title: "Name",
field: "name",
width: 200
},
{
title: "Score",
field: "score",
align: "right",
bottomCalc: "sum"
},
],
});
<head>
<link href="https://unpkg.com/tabulator-tables#4.3.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.3.0/dist/js/tabulator.min.js"></script>
</head>
<body>
<button type="button" id="report-print" onclick="table.print();">Print </button>
<div id="example-table"></div>
</body>
I've added MathJax equation numbering to my xaringan slides, but the \eqref{} (or \ref{}) link takes me back to the first slide. I want to disable the link and remove the link colouring from the reference.
My .Rmd
---
title: "MathJax test"
output:
xaringan::moon_reader:
includes:
in_header: "mathjax-equation-numbers.html"
lib_dir: libs
---
\begin{align}
\bar{x} = \frac{1}{n}\sum_{i=1}^{10} x_i \label{my-eq}
\end{align}
An example of an equation is \eqref{my-eq}. Or \ref{my-eq}.
My attempt at a solution (not working) in the mathjax-equation-numbers.html file:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } },
"HTML-CSS": {
styles: {
".MathJax a": { color: "black",
"pointer-events": "none",
cursor: "default",
"text-decoration": "none"
},
".MathJax_Preview a": { color: "black",
"pointer-events": "none",
cursor: "default",
"text-decoration": "none"
},
}
}
});
</script>
Try replacing the content of mathjax-equation-numbers.html with below.
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
TeX: { equationNumbers: { autoNumber: "AMS" } },
});
</script>
<style>
.mjx-mrow a {
color: black;
pointer-events: none;
cursor: default;
}
</style>
I use ZingCharts for my dashboard charts and I am stucked on this problem. I made a codepen to show my problem. I got array of strings which represent average respond time for some task in hours and I cant figure out why my chart never show 1st string value of array as you can see on codepen.
Here i also post my angular function for this chart
//bar chart with average task time respond
$scope.avgRespondTaskTime = {
gui: {
contextMenu: {
empty: true,
}
},
type: 'bar',
legend: {
//width: "100%",
layout: "center",
position: "50%",
margin: "0px 0px 0px 0px",
borderColor: "transparent",
backgroundColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v hours"
},
"scale-x": {
"label": {
"text": "Project name",
},
"labels": projectNames
},
"scale-y": {
"label": {
"text": "Average Time",
},
},
series: [
{
text: "Completed in Time",
values: $scope.avg_respondTime,
backgroundColor: "#00a65a"
},
]
};
https://codepen.io/spsrulez/pen/ygEvNg
So I solved my problem with using moment.js using this function
moment.duration("your string represent time").asHours()
which I store into array $scope.avg_respondTime
Hope it helps someone in future.
I need to put some additional labels on my charts, so I'm using shapes. Here is the result:
http://jsfiddle.net/z3n3qobm/91/
But I need to align the circles from the example with the labels of the X-axis. The chart must be responsive and the total of labels depends from the database.
I have a function that generates the initial position of the shapes in '%', but it misaligns when I change the window's size.
I did some calculations, but when the chart resizes it doesn't keep a fixed proportion.
Someone have an idea how to use shapes at the same position of the X-axis labels?
Unfortunately ZingChart does not provide a way to scale shapes and labels based on sizing. Hooks are available to position labels on nodes, but not on scale items themselves.
Now there I do have a solution to your issue, but just to be clear this is more of a hack utilizing tricks with ZingChart and multiple charts. I removed the shapes in your chart and decided to replicate those circles utilizing a second chart.
The main goal of this was to utilize a scatter chart, modify the look of each scatter node to replicate what you are trying to achieve, and to hide all the superficial items that were unnecessary (scales, removed plotarea margins). Do note that I'm using a mixed chart, one series for the scatter chart, and another for a dummy bar chart to force the scales to match how the chart above is displayed.
http://jsfiddle.net/mikeschultz/q6arebsu/1/
(Snippet below incase the jsfiddle is deleted in the future).
This can be also accomplished by combining the two charts into a single graphset, but I find working with separate charts is more flexible.
var myData = {
"graphset":[
{
"globals":{
"overflow":"visible"
},
"plot":{
"animation":{
"effect":"ANIMATION_EXPAND_BOTTOM",
"sequence":null,
"speed":10
},
"aspect":"jumped"
},
"plotarea": {
"margin-bottom": 30
},
"type":"mixed",
"series":[
{
"type":"bar",
"values":[46,46,53,50],
"background-color":"#5e36e6",
"value-box":{
"placement":"bottom-in",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":0
},
{
"type":"bar",
"values":[52,53,61,58],
"background-color":"#0099cd",
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":".",
"font-color":"#fff"
},
"palette":1
},
{
"type":"line",
"values":[150,105,399,159],
"marker":{
"size":0,
"border-width":0,
"background-color":"transparent"
},
"line-color":"#99cc33",
"line-width":3,
"value-box":{
"placement":"top",
"rules":[
{
"rule":"%v==0",
"visible":false
}
],
"thousands-separator":"."
},
"palette":2
}
],
"background-color":"#3F0767",
"scale-x":{
"tick":{
"alpha":0
},
"zooming":false,
"labels":["AB","CDE","FG","HI JKL"],
"line-width":0,
"zoom-to":null
},
"scale-y":{
"guide":{
"alpha":0.25,
"line-style":"solid",
"line-color":"#5a3b77"
},
"short":true,
"tick":{
"alpha":0
},
"line-width":0
},
"scroll-x":false
},
]
};
zingchart.render({
id : 'myChart',
data : myData,
height: 400
});
var bubbleConfig = {
type: 'mixed',
backgroundColor:"#3F0767",
scaleX: {
visible: false
},
scaleY: {
visible: false
},
plotarea: {
marginTop : 0,
marginBottom: 0,
maskTolerance: [0,0]
},
plot: {
marker: {
size: 30,
borderColor: '#371876',
borderWidth: 3,
backgroundColor: 'transparent'
},
tooltip: {
visible: false
}
},
scaleY: {
values: "0:2:1",
visible: false
},
series: [
{
type:'scatter',
values: [
[0,1],
[1,1],
[2,1],
[3,1]
],
valueBox: {
visible: true,
text: 'foobar',
fontColor: '#fff',
fontSize: '15px',
fontWeight: 'normal',
placement: 'over',
rules: [
{
rule: '%i == 0',
text: '35%'
},
{
rule: '%i == 1',
text: '51%'
},
{
rule: '%i == 2',
text: '15%'
},
{
rule: '%i == 3',
text: '36%'
}
]
}
},
{
type:'bar',
values: []
}
]
}
zingchart.render({
id : 'myBubbles',
data : bubbleConfig,
height: 80
});
<html>
<head>
<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
<div id='myBubbles'></div>
</body>
</html>
I've created a basic Flot chart, but the labels are so large they cover the entire chart. Can anyone guide me? I've looked on the flot documentation but I can't see an option that I've set that would have caused this.
To be clear, what I mean is that I get a small coloured square corresponding to the plot colour, then a lot of white space, then the label of the series, then loads more white space.
Here's how I'm creating the charts:
var d1 = [[0,5],[24, 5]];
var d2 = [[0,4],[64, 4]];
var d3 = [[0,3],[2, 3]];
var d4 = [[0,2],[49, 2]];
var d5 = [[0,1],[20, 1]];
var data1 = [
{
label: "Product 1",
data: d1,
bars: {
show: true,
barWidth: 0.3,
order: 5,
fill: true,
fillColor: "#AA4643",
horizontal : true
}
},
{
label: "Product 2",
data: d2,
bars: {
show: true,
barWidth: 0.3,
order: 4,
fill: true,
fillColor: "#89A54E",
horizontal : true
}
},
{
label: "Product 3",
data: d3,
bars: {
show: true,
barWidth: 0.3,
order: 3,
fill: true,
fillColor: "#4572A7",
horizontal : true
}
},
{
label: "Product 4",
data: d4,
bars: {
show: true,
barWidth: 0.3,
order: 2,
fill: true,
fillColor: "#80699B",
horizontal : true
}
},
{
label: "Product 5",
data: d5,
bars: {
show: true,
barWidth: 0.3,
order: 1,
fill: true,
fillColor: "#11111B",
horizontal : true
}
}
];
jQuery.plot(jQuery("#myplaceholder"+1), data1, {colors: ["#AA4643", "#89A54E", "#4572A7", "#80699B", "#11111B"], yaxis: {show:false},
xaxis: { font: { size: 11, style: "italic", weight: "bold", family: "sans-serif", variant: "small-caps" } },
});
Thanks in advance! :-)
By labels, I assume you mean the labels in the legend (i.e. Product 1).
The most likely cause is that you have CSS in your page that specifies some styles for something unrelated, and they are bleeding into the legend. Flot uses an html table with a structure like this to create the legend:
<div class="legend">
<div>
<table>
<tr>
<!--This is the color box for each series, the divs are styled and colored to make it look pretty -->
<td class="legendColorBox"><div><div></div></div></td>
</tr>
<tr>
<td class="legendLabel">Product 1</td>
</tr>
<!-- repeated for each series -->
</table>
</div>
</div>
So if you have a CSS style somewhere either for all td elements or if you happened to have an existing CSS class for .legendLabel or .legend, that would certainly explain your issue.
If you look at this example, you'll see that your code without any CSS does not have any issues: http://jsfiddle.net/ryleyb/AkqyC/