I need a little help related to autotable.I am using JSPDF library and I want to generate 3 columns(Fatal,Non-Fatal and Property Damage) horizontally under the column 2017.I tried to find through internet but could not find any solution.
doc.setFontStyle('normal');
doc.setFontSize(12);
var columns = [
{ title: "Month", dataKey: "Month" },
{ title: "2017", dataKey: "2017" },
];
var vehicle=[{'Month':'January','2017':'Fatal'},{'Month':'February'},{'Month':'March'},{'Month':'April'},{'Month':'May'},{'Month':'June'},{'Month':'July'},{'Month':'August'},{'Month':'September'},{'Month':'October'},{'Month':'November'},{'Month':'December'}];
doc.autoTable(columns,vehicle, {
startY:55,
margin: {horizontal: 5},
bodyStyles: {valign: 'middle'},
styles: {overflow: 'linebreak'},
theme: 'grid',
columnStyles: {
text: {
columnWidth: 'wrap'
},
Month: {
columnWidth: '10',
fontStyle: 'bold',
textColor: 40 ,
valign: 'left'
},
2017: {
columnWidth: '20',
fontStyle: 'bold',
textColor: 40 ,
valign: 'left'
}
});
doc.save('Accident.pdf');
}
Related
I have a multiple series chart created in Highstock and each line data starts at different date.
Fund A start date : Oct 8, 2002
Fund B start date : Nov 15, 1995
On first load the chart will have a start date from Nov 15, 1995 to latest data date.
If I manually key-in the start date at the datepicker for an out of range date e.g. Nov 15, 1990 the datepicker will automatically reset to Fund A start date, Oct 8, 2002.
Any ideas on how to make it to refresh correctly as per initial load date? I would like to avoid the user to have to click the All button again in the rangeSelector.
Link for reference
https://jsfiddle.net/mrseia/j8d2Lrve/4/
$(function () {
var seriesOptions3 = [];
seriesCounter3 = 0;
var tl = document.getElementById('str').value;
var x = tl.split('|');
var fnd = document.getElementById('dataPoint').value;
var y = fnd.split(';');
var stripe = document.getElementById('stripe').value;
var z = stripe.split(',');
for(i=0; i<x.length; i++)
{
var data = eval(y[i]);
var name = x[i];
var strip = z[i];
seriesOptions3[seriesCounter3] =
{
name : name,
dashStyle : strip,
data : data
};
seriesCounter3++;
}
Highcharts.stockChart('cumChartResp',{
rangeSelector: {
selected: 5
},
legend: {
enabled: true,
align: 'center',
borderWidth: 0.5,
layout: 'horizontal',
verticalAlign: 'bottom',
itemStyle: {
color: '#000000',
fontWeight: 'bold',
fontSize: '14px'
},
symbolWidth: 42
},
credits: {
enabled: false,
text: 'Powered by Novagni',
href: 'http://www.novagni.com.my'
},
yAxis: {
title: {
text: 'Cumulative Returns (%)'
},
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions:{
series:{
dataGrouping:{
enabled: false
},
compare: 'percent',
compareStart: true,
lineWidth: 3
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: {point.change}%<br/>',
valueDecimals: 2,
split: true,
xDateFormat: '%A, %b %d, %Y'
},
//<b>{point.y}</b> ({point.change}%)<br/> '%d-%m-%Y'
title: {
text: 'Cumulative Returns',
style: {
color: '#333333',
fontWeight: 'bold',
fontSize: '18px'
}
},
subtitle: {
text: 'The Start Date for all cumulative returns calculation for the periods of 1m, 3m, 6m & 1y is based in reference to the latest Start Date amongst the selected funds',
style: {
color: '#333333',
fontSize: '14px'
}
},
colors: ['#0067B1', 'black', '#865439', '#00FF00', '#FFD700'],
exporting: { enabled: false },
series: seriesOptions3
});
})
It occurs because the rangeSelector gets extremes from the navigator. You can set for each series showInNavigator: true to avoid that behaviour.
Demo: https://jsfiddle.net/BlackLabel/njpe98hx/
So the problem is that my last two columns merge together into one. In this case i have as wel values of 9 as of 10 in my array but it just adds the number of 9's and 10's together and labels them all as 9 in the histogram. The result is shown in the picture histogram. You can find my code here https://jsfiddle.net/vlovlo/ypv1jg3u/5/
let testArray = [0,0,0,1,1,1,1,1,2,2,3,3,4,4,4,4,5,5,6,6,6,6,7,7,7,8,8,8,8,8,9,9,9,10,10,10,10]
Highcharts.chart('test', {
title: {
text: 'test',
margin: 50,
style:{
fontWeight: "bold",
},
},
xAxis: [{
visible: false,
}, {
title: {
text: 'test x',
style:{
fontWeight: "bold",
},
},
showLastLabel: true,
}],
yAxis: [{
visible: false
}, {
title: {
text: 'test x',
style:{
fontWeight: "bold",
},
},
}],
plotOptions: {
series: {
borderWidth: 0,
pointPlacement: 'between',
dataLabels: {
enabled: true
},
},
histogram: {
binWidth: 1
}
},
series: [{
name: 'Test',
type: 'histogram',
yaxis: 1,
xAxis: 1,
baseSeries: 'testSeries'
},
{
id: 'testSeries',
visible: false,
data: testArray
}]
});
Try to set the binWidth as 0.99
Demo: https://jsfiddle.net/BlackLabel/doqgcy0z/
I' m using jspdf with vue. I want the text to come under that table after adding a table, but I get the error doc.autotable.previous is undefined.
exportPdf(){
var doc = new jsPDF('l', 'pt');
doc.setFontSize(20);
doc.text(170, 20, 'Ürün Teslim Belgesi',{
halign: 'center',
valign: 'middle'
});
var vm = this;
var columns = [
{title: "Ürün", dataKey: 'product'},
{title: 'Tip', dataKey: 'type'},
{title: 'Adet', dataKey: 'piece'},
{title: 'Tarih', dataKey: 'date'}
];
doc.autoTable(
columns, vm.products,{
margin: {left: 35},
headStyles: {halign: 'center', valign: 'middle'},
theme: 'grid',
tableWidth: 'auto',
fontSize: 8,
overflow: 'linebreak',
});
doc.setProperties({
title: 'xxx',
subject: 'yyy',
author: 'ttt',
keywords: 'qqq',
creator: 'www'
});
doc.text("example text example text example text example text.", 14, doc.autoTable.previous.finalY + 10);
doc.save('test.pdf');
},
Thank you very much if you can help, have a nice day.
Seems strange to me - tried your code and I got settings.styles is undefined error instead the one you describing. It seems you mixing options from Styling options and Other options
Following code works just fine (had to replace data - jspdf 1.5.3, jspdf-autotable 3.2.11):
var doc = new jsPDF("l", "pt");
doc.setFontSize(20);
doc.text(170, 20, "Ürün Teslim Belgesi", {
halign: "center",
valign: "middle"
});
var products = [
{ product: "Retro", type: "Shoes", piece: 1, date: "1.1.2020" }
];
var columns = [
{ title: "Ürün", dataKey: "product" },
{ title: "Tip", dataKey: "type" },
{ title: "Adet", dataKey: "piece" },
{ title: "Tarih", dataKey: "date" }
];
doc.autoTable(columns, products, {
theme: "grid",
styles: {
fontSize: 8,
overflow: "linebreak"
},
headStyles: { halign: "center", valign: "middle" },
tableWidth: "auto",
margin: { left: 35 }
});
doc.setProperties({
title: "xxx",
subject: "yyy",
author: "ttt",
keywords: "qqq",
creator: "www"
});
doc.text(
"example text example text example text example text.",
14,
doc.autoTable.previous.finalY + 10
);
doc.save("test.pdf");
I have lines for all rows except the top row.
I need to show the top grid line (where $ 50B) like the other lines.
I can't understand what's wrong. Please help me to do this.
Look at the image below to know what I mean.
Here is my code:
window.revenueIncomeChart = new Highcharts.Chart('revenueIncomeChartBox', {
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: chartData.categories,
title: {
text: null
},
labels: {
style: {
color: '#BBBBBB',
fontSize: '14px'
}
}
},
yAxis: {
title: {
text: null
},
className: 'axis-class',
labels: {
formatter: function() {
return '$ ' + this.value + $.trim(chartData.tooltipSuffix);
},
style: {
color: '#BBBBBB',
fontSize: '14px'
}
}
},
tooltip: {
valueSuffix: chartData.tooltipSuffix,
valueDecimals: 2,
shared: true,
split: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
borderColor: '#f2f2f2',
backgroundColor: '#FFFFFF',
shadow: false,
itemStyle: {
fontSize: '16px',
color: '#797979',
fontWeight: 'normal'
}
},
credits: {
enabled: false
},
series: chartData.series
});
I have lines for all rows except the top row.
I need to show the top grid line (where $ 50B) like the other lines.
I can't understand what's wrong. Please help me to do this.
Look at the image below to know what I mean.
I've got a chart where there are multiple yAxes and labels that overlap. I cannot instantiate them with different x values because I've got a UI that will switch the axes on and off, so that would leave weird spacing to one of the labels. I want to use formatter to detect if the label is not a first label and then change the x value then, but I have trouble finding how to change the value in formatter callback. Below is my code
{
title: 'Count',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'right',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
}
},
opposite: true,
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
{
title: 'Cost',
gridLineDashStyle: 'Dash',
gridLineColor: '#e8ebef',
showFirstLabel: false,
labels: {
enabled: true,
align: 'left',
x: 5,
y: 15,
style: {
fontFamily: fontFamily,
fontSize: '10px',
fontWeight: 'bold',
color: '#8596a5'
},
formatter: function() {
if ( this.isFirst ) { console.log("first") }
this.attr({ x:44 })
}
},
allowDecimals: true,
min: 0,
minRange: 2 // Ensures flat charts don't show line at the bottom
},
Any ideas?
Both of your yAxis should have order in which you want to show them.YAxis needs to be stacked. Use
yAxis:0, //for first series
yAxis:1 //for second series
I Will add a fiddle in few mins.