pdfmake.js Two different absolutePositions within the background function - background

I try to set two text elements in a header with the background function on two different positions. But it didn't work. (Only the last one wins) Is there a way to get it fixed?
background: function(currentPage, pageCount) {
return {
text: 'pagenumber ' + currentPage,
fontSize: 12,
absolutePosition: {
x: 50,
y: 60
},
text: 'printtime: ' + moment(this.result[0].time).format("DD.MM.YYYY HH:mm"),
fontSize: 12,
absolutePosition: {
x: 600,
y: 80
}
}
},
Any ideas?
Thanks a lot!


To have two elements, you have to return Array. Try this:
background: function(currentPage, pageCount) {
return [{
text: 'pagenumber ' + currentPage,
fontSize: 12,
absolutePosition: {
x: 50,
y: 60
}
},
{
text: 'printtime: ' + moment(this.result[0].time).format("DD.MM.YYYY HH:mm"),
fontSize: 12,
absolutePosition: {
x: 600,
y: 80
}
}
}]
},

Related

How to show small values in a chart.js pie chart

I am having trouble displaying small values in my chart.js chart. My issue is very similar to a question asked here:
How to show small values in Flot Pie chart
Does anyone know if there is a workaround in chart.js?

You can use chartjs-plugin-datalabels and define a dataset with same data but weight: 0 for displaying small values outside of the chart.
{
data: data,
weight: 0,
borderWidth: 20,
datalabels: {
formatter: v => v < 5 ? v : ''
}
}
Then also add a datalabels.formatter to the original dataset and make sure, it returns an empty string for small values.
datalabels: {
textAlign: 'center',
formatter: v => v < 5 ? '' : v
}
Please take a look at the runnable code below and see how it works.
const data = [48, 56, 3, 1, 44];
Chart.register(ChartDataLabels);
new Chart('myChart', {
type: 'pie',
data: {
labels: ['red', 'blue', 'green', 'purple', 'gray'],
datasets: [{
data: data,
weight: 0,
borderWidth: 20,
datalabels: {
formatter: v => v < 5 ? v : ''
}
},
{
label: 'My Dataset',
data: data,
backgroundColor: ['rgba(255, 0, 0, 0.2)', 'rgba(0, 0, 255, 0.2)', 'rgba(0, 255, 0, 0.2)', 'rgba(145, 90, 185, 0.2)', 'rgba(124, 124, 124, 0.2)'],
datalabels: {
textAlign: 'center',
formatter: v => v < 5 ? '' : v
}
}
]
},
options: {
responsive: false,
plugins: {
legend: {
display: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2"></script>
<canvas id="myChart" height="300"></canvas>

Increase width of Xaxis title in bar chart in highcharts

I am trying bar chart using Highcharts. In the below code we have xaxis categories like : ['Name1', 'Name2', 'Name3', 'Name4' ].
Firstly, I am using the below highcharts code in react native to develop iOS app.
I am trying to place the Name on each individual bar's in the graph(bar chart), which is working but when the name text from the categories array is v.large then the width of the title is not getting increased & the text is coming in multiple lines with the minimum width. If the name is v.large then only we are getting dotted text on the graph.
Can we increase the width of the title? and If so how can we increase the width within the iPhone's width.
chart: {
type: 'bar',
reflow: true,
marginRight: 30,
},
credits: {
enabled: false
},
title: {
align: "left",
text: "A comparison of the business’ digital health with that of the competitors.",
backgroundColor:'green',
style: {
color: '#808080',
fontWeight: '400',
fontSize: '13px',
}
},
xAxis: {
categories: ['Name1', 'Name2', 'Name3', 'Name4' ],
title: {
align: "left",
},
scrollbar: {
enabled: false
},
labels: {
x: 25,
y: -22,
align: 'left',
useHTML: true,
style: {
fontSize: '13px',
fontFamily: 'Open Sans',
color: '#464646',
backgroundColor: 'green',
},
},
},
yAxis: {
gridLineColor: "transparent",
stackLabels: {
qTotals: [91,99,85,99],
enabled: true,
useHTML: true,
style: {
fontWeight: "bold",
},
formatter: function () {
return this.options.qTotals[this.x];
},
},
tickInterval: 20,
labels: {
enabled: false
},
plotOptions: {
series: {
dataLabels: {
align: 'center',
enabled: false,
crop: false,
overflow: 'none',
verticalAlign: 'top',
y: -50,
style: {
fontWeight: '300',
color: '#808080',
fontSize: '30px',
}
},
pointWidth: 25,
borderWidth: 0,
pointPadding: 10,
stacking: "normal",
states: {
hover: {
enabled: false
}
},
//cursor: 'pointer',
point: {
events: {
click: function (event) {
}
}
}
}
},
series: [
{
name: "",
data: [3, 1, 15, 1],
color: "#f5f6f8",
dataLabels: {
enabled: false
},
},
{
name: "",
color: "#ff0000",
data: [{ y: 97, color: "#0f875a" }, { y: 99, color: "#0f875a" }, { y: 85, color: "#0f875a" }, { y: 99, color: "#0f875a" }]
}
],
}
For a sample I have taken a graph i.e bar chart from Highcharts, In the link jsfiddle.net/psre6Lj9/1 we have some fruits names, where 'Apples' width is not sufficient and the text is being displayed in multiple lines. I want to increase the width of the title. How can i do that.

To increase the width of the labels, set the right style:
xAxis: {
categories: ['Apples Apples Apples Apples Apples Apples Apples ', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
x: 25,
y: -22,
align: 'left',
style: {
width: '300px'
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/went9xmf/
API: https://api.highcharts.com/highcharts/xAxis.labels.style

Highcharts. Add text at right side and export all into PDF

I'm trying to add a text to the right side of the chart. That's working fine. But I want import that text into pdf and/or image files, generated by the exporting library, and right now that is not working. Here is my code: http://jsfiddle.net/mrocha/TQ54c/
$(function () {
/**
* Create the data table
*/
Highcharts.drawTable = function() {
// user options
var tableTop = 420,
colWidth = 60,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' C';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each(series, function(serie_index, serie) {
renderer.text(
serie.name,
cellLeft + cellPadding,
tableTop + (serie_index + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(chart.xAxis[0].categories, function(category_index, category) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
category,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(series, function(i) {
renderer.text(
Highcharts.numberFormat(series[i].data[category_index].y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
});
});
}
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke': 'silver',
'stroke-width': 1
})
.add();
};
/**
* Create the chart
*/
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
events: {
load: Highcharts.drawTable
},
height: 600,
width: 800,
marginBottom: 250
},
title: {
text: 'Average monthly temperatures'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (C)'
}
},
legend: {
y: -170
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
chart.renderer.text('This text should be at the right side of the chart. And should be exported into pdf or image file',
680, 80 ).
css({
width: 100,
color: 'green',
textAlign: 'left'
}).attr({
zIndex: 999
}).add();
});
Any idea? Am I doing something wrong? Thanks in advance!
Oh, by the way, I'm including a table too, and that table is exported nicely to pdf and image files. I just need to include my green text too.

It is caused, becase you add text by renderer, but during export chart is gernerated again without "dynamic" content which you add. So the solution is move using renderer to load event in chart. In your case it is to function drawTable.
Take look at example:
http://jsfiddle.net/mrocha/TQ54c/
Highcharts.drawTable = function() {
//custom text
this.renderer.text('This text should be at the right side of the chart. And should be exported into pdf or image file',
680, 80 ).
css({
width: 100,
color: 'green',
textAlign: 'left'
}).attr({
zIndex: 999
}).add();
//...
};

I want to add Android Checkbox(SWITCH) to my data array for TableView Using appcelerator titanium?

I created table view with rows, those contains label and switch box , style is check box. My requirement is, among those row check boxes, I select some of them. Then after, I want those check boxes which are checked and which are unchecked. Here is my code:
// My Array Data for Table-view
var checkboxArray = [ { title: "Mountain View (North America)\nCloudy", leftImage: "http://www.google.com/ig/images/weather/cloudy.gif" },
{ title: "Sucre (South America)\nMostly Cloudy", leftImage: "http://www.google.com/ig/images/weather/mostly_cloudy.gif" },
{ title: "Prague (Europe)\nClear", leftImage: "http://www.google.com/ig/images/weather/sunny.gif" },
{ title: "St Petersburg (Europe)\nSnow", leftImage: "http://www.google.com/ig/images/weather/snow.gif" },];
// My Android checkbox
var checkbox = Ti.UI.createSwitch({
style:Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title:"Sound Enabled",
value:true
});
// My Header label inside table-view
var headerLabel = Ti.UI.createLabel({
backgroundColor:'#035385',
color:"white",
font:{ fontSize: 30, fontWeight:"bold" },
text:"Favoriete Merken",
textAlign:"center",
height:45,
width:500
});
// My Table View
var table = Ti.UI.createTableView({
backgroundColor:"white",
data:checkboxArray,
headerView:headerLabel,
separatorColor:"black",
top:0,
width:'auto'
});
win2.add(table);

Rows created via object literals cannot have views added to them. But if you create the row via Ti.UI.createTableViewRow, you can. So to add checkboxes, just change your example to create the rows explicitly, add the checkboxes, store a reference to the checkboxes, and you're done.
var win = Ti.UI.createWindow({
backgroundColor: '#fff'
});
var rows = [];
var data = [
{ title: 'Mountain View (North America)\nCloudy', leftImage: 'http://www.google.com/ig/images/weather/cloudy.gif' },
{ title: 'Sucre (South America)\nMostly Cloudy', leftImage: 'http://www.google.com/ig/images/weather/mostly_cloudy.gif' },
{ title: 'Prague (Europe)\nClear', leftImage: 'http://www.google.com/ig/images/weather/sunny.gif' },
{ title: 'St Petersburg (Europe)\nSnow', leftImage: 'http://www.google.com/ig/images/weather/snow.gif' }
];
for (var i = 0, l = data.length; i < l; i++) {
var row = Ti.UI.createTableViewRow();
row.add(Ti.UI.createImageView({
image: data[i].leftImage,
width: 45, height: 45,
left: 0
}));
row.add(Ti.UI.createLabel({
text: data[i].title, textAlign: 'left',
color: '#000',
left: 50, right: 50
}));
row.add(data[i].switch = Ti.UI.createSwitch({
style: Ti.UI.Android && Ti.UI.Android.SWITCH_STYLE_CHECKBOX,
title: 'Sound Enabled',
value: true,
right: 5,
width: 40
}));
rows[i] = row;
}
win.add(Ti.UI.createTableView({
data: rows,
backgroundColor: 'white',
separatorColor: 'black',
headerView: Ti.UI.createLabel({
backgroundColor: '#035385',
color: 'white',
font: { fontSize: 30, fontWeight: 'bold' },
text: 'Favoriete Merken', textAlign: 'center',
height: 45
}),
bottom: 45
}));
var alertFirstSwitchValue = Ti.UI.createButton({
title: 'Alert First Switch Value',
bottom: 0, right: 0, left: 0,
height: 45
});
alertFirstSwitchValue.addEventListener('click', function () {
alert(data[0].switch.value);
});
win.add(alertFirstSwitchValue);
win.open();

how to keep the highligh on a bar chart?

var colors = ['url(#v-1)',
'url(#v-2)',
'url(#v-3)',
'url(#v-4)',
'url(#v-5)'];
var baseColor = '#eee';
Ext.define('Ext.chart.theme.Fancy', {
extend: 'Ext.chart.theme.Base',
constructor: function(config) {
this.callParent([Ext.apply({
axis: {
fill: baseColor,
stroke: baseColor
},
axisLabelLeft: {
fill: baseColor
},
axisLabelBottom: {
fill: baseColor
},
axisTitleLeft: {
fill: baseColor
},
axisTitleBottom: {
fill: baseColor
},
colors: colors
}, config)]);
}
});
var win = Ext.create('Ext.Panel', {
width: 1000,
height: 300,
hidden: false,
maximizable: true,
title: 'Column Chart',
renderTo: Ext.getBody(),
enableToggle: true,
pressed: true,
layout: 'fit',
items: {
id: 'chartCmp',
xtype: 'chart',
theme: 'Fancy',
animate: {
easing: 'bounceOut',
duration: 750
},
store: store,
background: {
fill: 'rgb(17, 17, 17)'
},
gradients: [
{
'id': 'v-1',
'angle': 0,
stops: {
0: {
color: 'rgb(212, 40, 40)'
},
100: {
color: 'rgb(117, 14, 14)'
}
}
},
{
'id': 'v-2',
'angle': 0,
stops: {
0: {
color: 'rgb(180, 216, 42)'
},
100: {
color: 'rgb(94, 114, 13)'
}
}
},
{
'id': 'v-3',
'angle': 0,
stops: {
0: {
color: 'rgb(43, 221, 115)'
},
100: {
color: 'rgb(14, 117, 56)'
}
}
},
{
'id': 'v-4',
'angle': 0,
stops: {
0: {
color: 'rgb(45, 117, 226)'
},
100: {
color: 'rgb(14, 56, 117)'
}
}
},
{
'id': 'v-5',
'angle': 0,
stops: {
0: {
color: 'rgb(187, 45, 222)'
},
100: {
color: 'rgb(85, 10, 103)'
}
}
}],
axes: [{
type: 'Numeric',
position: 'left',
fields: ['Quantidade'],
minimum: 0,
// maximum: 100,
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Numero de Processos',
grid: {
odd: {
stroke: '#555'
},
even: {
stroke: '#555'
}
}
}, {
type: 'Category',
position: 'bottom',
fields: 'Range',
title: 'Espaço temporal'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
highlightCfg: {
fill: '#a2b5ca'
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
//Numero que aparece em cima da barra
field: 'Quantidade',
orientation: 'horizontal',
fill: '#fff',
font: '17px Arial'
},
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
},
style: {
opacity: 0.95
},
listeners: {
'itemmousedown': function(item) {
if(!flag) return flag;
flag = false;
var cmp = Ext.getCmp('chartCmp');
var series = cmp.series.get(0);
index = Ext.Array.indexOf(series.items, item);
selectionModel = grid.getSelectionModel();
selectedStoreItem = item.storeItem;
var as = selectedStoreItem.data.Range;
storeDadosFiltrados.proxy.extraParams.range = as;
storeDadosFiltrados.load();
}
},
xField: 'Range',
yField: ['Quantidade']
}]
},
renderTo:'grafico'
});
});
image of the chart--> http://alojaimagens.com/viewer.php?file=zz7slhsprnopuoui1mpv.jpg
I am selecting the first column, and i don't click it, just with the mouse over it. The higlight color is a variante of blue. But in the code i use itemmousedown, and i don't understand why the bar changed color only by passing by the mouse? how can i put it only highlight only in mouse click?

What about highlight: false?
If you just want the bar to be highlighted by a click, you should add a listener which highlights it on clicking the bar.