I appreciate the help for the following with jsPDF AutoTable v2.3.0.
I have a table with images in the first column with the following style:
styles: {overflow: 'linebreak', columnWidth: 'wrap'},
columnStyles: {
0: {columnWidth: 25},
1: {columnWidth: 350}
},
When the table occupies two pages, the images do not fit correctly in the row.
Example: https://jsfiddle.net/shinseiki86/60qrh6e1/
Result: https://i.stack.imgur.com/PykQw.png
Thanks!
Fixed using the issue reported in the following link:
drawCell: function(cell, opts) {
if (opts.column.dataKey === 0 && opts.row.index < data.rows.length) {
images.push({
elem: imgElements[opts.row.index],
x: cell.textPos.x,
y: cell.textPos.y
});
}
},
Solution: https://jsfiddle.net/shinseiki86/j5dz8dv8/
Related
I am fetching data from an endpoint
I display the data in a highchart
There are several indicators that can be selected. For each of them another yAxis is added below the main one.
My series data are of this format :
series: [
{
data: [],
id: 'prices',
step: this.hasStep,
name: this.$props.title,
fillColor: 'rgba(127,183,240,0.2)',
},
{
visible: false,
type: 'column',
id: 'volume',
name: 'Volume_hardcoded',
//linkedTo: 'prices',
data: this.volumeSeries,
},
],
I save the data in the following way (don't pay attention in the logic, it works fine):
if (this.selectedTimeSpan.tickInterval === 1) {
for (let i = 0; i < prices.length; i++) {
let xData = null;
this.selectedTimeSpan.getIntradayData
? (xData = Math.floor(new Date(prices[i].time).getTime()))
: (xData = Math.floor(new Date(prices[i].date).getTime()));
priceSeries[i] = {
x: xData,
open: prices[i].first,
high: prices[i].high,
low: prices[i].low,
close: prices[i].last,
y: prices[i].last,
volume: prices[i].tradingVolume,
};
this.volumeSeries[i] = {
x: xData,
y: prices[i].tradingVolume,
};
}
} else {
let j = 0;
for (
let i = 4;
i < prices.length;
i += this.selectedTimeSpan.tickInterval
) {
priceSeries[j] = {
x: Math.floor(new Date(prices[i].date).getTime()),
open: prices[i].first,
high: prices[i].high,
low: prices[i].low,
close: prices[i].last,
y: prices[i].last,
volume: prices[i].tradingVolume,
};
this.volumeSeries[j] = {
x: Math.floor(new Date(prices[i].date).getTime()),
y: prices[i].tradingVolume,
};
j++;
}
}
When I select these indicators (they are based on the volume), I am getting this result.(You can see a blank space below the main chart.) Instead when i swap to OHLC or candlestick my main series (series[0]) it looks works fine and it looks like this. Any idea why is that happening? I haven't touched the tooltip settings at all (in case it was there a problem). I am struggling 2 days now with it can't really figure it out. Any help would be appreciated a lot. If you need more information feel free to comment so I can provide. Thanks in advance. Chris.
Fixed, there's a flag that can be used called usedOhlcData in series object. (series[0] in my case]. We just set it to true.
series:[{
data:[],
useOhlcData:true,
...}
,{
...
}]
I am using jspdf autotable plugin (jspdf.plugin.autotable.js and jspdf.min.js)
to make table grid view in PDF document.
this is my code bellow:
var listpaket2 = '<?php echo json_encode($new_array_list_paket_min_15_persen); ?>'
var columns = ["Nama Balai","Kode Satker","Kode PPK","Nama "];
var rows = jQuery.parseJSON(listpaket2); //listpaket2 contains dynamic big data, it is about 5000 rows of record
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
addPageContent: function(data) {
}
});
alert(doc.height)
when I am doing alert(doc.height)I got "undefined". that is not as my expectation.
How to detect table height when table contains big data?
You can set the new table height each time a cell was drawn, using the provided hooks like this:
var height = 0;
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
addPageContent: function(data) {},
createdCell: function (cell, data) {
height = data.table.height
}
});
alert(height)
Now the above implementation works up to v2.3.5, v3 was pre-release only 4 days ago (at time of writing), then this hook will be removed. At this time it looks like you can use the new hook : didParseCell like this:
var height = 0;
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
didParseCell: function (HookData) {
height = HookData.table.height
}
});
alert(height)
Note that addPageContent will also be removed in v3. Other things might still change, check your implementation if you decide to upgrade.
Use the didDrawPage hook passing a function like below to get the ending height of the table.
autoTable(doc, {
...,
didDrawPage: (d) => console.log(d.cursor.y),
};
Trying to set the height within the didParseCell hook did not work. You can capture the data from that hook and get the height after the table finishes.
let height = 0;
let tableMeta = null;
doc.autoTable(columns, rows, {
styles: {fillColor: [100, 255, 255]},
columnStyles: {
id: {fillColor: 255}
},
didParseCell: (data) => {
if (!tableMeta) {
tableMeta = data.table;
height = data.table.height; // <- doesn't work, sets height to 0
}
}
});
// Calculate the table height
height = tableMeta.finalY - tableMeta.pageStartY;
// Or the final Y position after drawing the table if that's what you need
height = tableMeta.height;
alert(height);
I am using highcharts for statistical data displaying. I want to display , on the stack label , the average of all the values .
Below is what i am doing but i cant seem to get it right :
yAxis: {
min: 0,
title: {
text: 'Task'
},
stackLabels: {
style: {
color: 'black'
},
enabled: true,
formatter: function() {
return (this.axis.series[1].yData[this.x]).toPrecision(2) + '%';
}
}
},
The above only takes the last value on the stack and shows the percentage. For instance , if the last value is 50 , the above displays 50% as the stack value . I want to take an average of all the values. Any help would be appreciated.
If you want to show any stack's percentage mean if your stacked column has two stack A-5 and B-10 , then the % of B in column is 66% and % of A is 33%. If you want to show that use following in formatter function ( refer This Fiddle Link)
formatter: function() {
return (this.axis.series[1].yData[this.x] / this.total * 100).toPrecision(2) + '%';
}
Updating as per OP 's comment Refer Working fiddle here
Use following code : Make your data in a variable and calculate the sum
var seriesData = [{
name: 'Incomplete',
data: [1, 3, 4, 7, 20]
}, {
name: 'Complete',
data: [3, 4, 4, 2, 5]
}];
var total = 0;
$.each(seriesData,function(item){
$.each(seriesData[item].data,function() {
total += this;
});
});
And then use following in stacklabel formatter :
formatter: function() {
return ( this.total/ total * 100).toPrecision(2) + '%';
}
series:seriesData
hope it helps :)
This doesn't seem to be as easy as it should be.
I would accomplish this by pre-processing the data to generate an array of averages, and then referencing that array from the stackLabels formatter function.
Example, build the averages (assumes array 'data' with sub array for each series data values):
var sum = 0;
var averages = [];
var dataLen = data.length;
$.each(data[0], function(x, point) {
sum = 0;
for(var i = 0; i < dataLen; i++) {
sum += data[i][x];
}
averages.push(sum/dataLen);
})
And then in the formatter:
yAxis : {
stackLabels: {
enabled: true,
formatter: function() {
return Highcharts.numberFormat(averages[this.x],2);
}
}
}
Example:
http://jsfiddle.net/jlbriggs/vatdrecb/
If I could find a way to get a reliable count of the points in each stack, you could just use
return this.total/countOfPoints;
in the formatter without needing to build an array, but I can't seem to reliably get that count.
I am new to Highcharts.
I have a line chart. Here is the categories:
["9/7/14", "9/8/14", "9/9/14", "9/10/14", "9/11/14", "9/12/14", "9/13/14", "9/14/14", "9/15/14", "9/16/14", "9/17/14", "9/18/14", "9/19/14", "9/20/14", ...]
Here is the data series:
[1, 4, 0, 2, 1, 1, 1, 5, 3, 1, 0, 0, 6, 8, ... ]
I added zoom to my chart, very similar to this jsfiddle demo: http://jsfiddle.net/348sh/3/
chart: {
renderTo: 'container',
zoomType: 'x'
},
I would like to get the total of only those Y values within the zoomed-in window, not the total of the entire data series. For this, I need to capture what values are included in the x axis in the zoomed window. So I added the following based on my research:
xAxis: {
type: 'line',
events: {
setExtremes: function(event) {
console.log(event.min);
console.log(event.max);
}
}
}
However, the values for event.min or event.max are numbers such as 3.6552511415525117, 7.10730593607306. I have no way to know which x values are included in the zoomed window. How can I find which x values are included? Any way to get the start and end x values ?
Thanks!
I did further research. I notice that I may have answered my question already in my question. It turns out that the numbers I gave in my question are very helpful, not clueless. Math.ceil(min) and Math.floor(max) are just the beginning and ending index of the data points in the data series that are show up in the zoomed window. The another thing to note is to use afterSetExtremes event. This is the moment where chart finalizes the starting and ending points in the X axis. So the complete answer is:
xAxis: {
type: 'line',
events: {
afterSetExtremes: function(event) {
var start = Math.ceil(event.min);
var end = Math.floor(event.max);
}
}
}
I am new to Highcharts and love to get corrected if I am wrong.
Cheers.
This may help you . Try this fiddle : http://jsfiddle.net/7kv9a25r/ .
chart: {
events: {
selection: function (event) {
var text,
label;
if (event.xAxis) {
text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
} else {
text = 'Selection reset';
}
label = this.renderer.label(text, 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
},
zoomType: 'x'
},
Can you please take a look at this example and let me know how I can format the dataLabels to be display only with two decimal numbers?
Here is the numver formats which I have in the series
series: [{
name: 'Tokyo',
data: [7.554555, 6.34345559, 9.5555, 14.5555, 18.4333433, 21.5555, 25.2, 26.5333333, 23.33333, 18.23243543, 13.776565669, 9.65454656]
}, {
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]
}]
and I would like to present them like 7.55 , 6.34, 9.55 . Thanks
You need to combine the dataLabels formatter and Highcharts.numberFormat:
...
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y,2);
}
}
...
See jsFiddle
I would simply add a the format option to data labels as follows:
dataLabels: {
enabled: true,
format: '{point.y:,.2f}'
}
It's the simple way of doing it without having to define a function using formatter.
extra:
The comma after the colon makes sure that a number like 1450.33333 displays as 1,450.33 which is nice also.
In case someone wants to go "further", I'm showing data that can be 10^1 to 10^9 so I'm converting them and showing the unit afterwards.
Remember, Highcarts deals only with integers so if you want to add units (and not in the YAxis because of multiple units) you can give it in the source data but you have to format them afterwards:
column: {
dataLabels: {
enabled: true,
formatter: function () {
// Display only values greater than 0.
// In other words, the 0 will never be displayed.
if (this.y > 0) {
if (this.y >= Math.pow(10, 9))
{
return Highcharts.numberFormat(this.y /Math.pow(10, 9) , 1) + " mias";
}
else if (this.y >= Math.pow(10, 6))
{
return Highcharts.numberFormat(this.y /Math.pow(10, 6) , 1) + " mios";
}
else
{
return Highcharts.numberFormat(this.y, 0);
}
}
},
mias : stands for "milliards" (french translation of billiards)
mios : stands for "millions" (french translation of millions)
I noticed in the comments you wanted to not display trailing zeroes.
This was the simplest solution I was able to muster:
...
dataLabels: {
enabled: true,
formatter: function () {
return parseFloat(this.y.toFixed(2)).toLocaleString();
}
}
...
If you don't want the number to end up with a comma-separator (depending on locale) remove the .toLocaleString().
Sidenote: Unfortunately using format (instead of formatter and a js func like we do above) is limited to a subset of float formatting conventions from the C library function sprintf, as indicated here on highcharts website. That library has the code g that would automatically do this for us but unfortunately it is not implemented in Highcharts :(, i.e. format: '{point.y:,.2g}' does not work.