I am trying to create pdf with JavaScript using pdfmake. My question is I have array but I cannot loop array.
PDF
function printPDF() {
var activities = [
['Work', 9],
['Eat', 1],
['Commute', 2],
['Play Game', 1],
['Sleep', 7]
];
var dd = {
content: [{
text: 'Teslim Formu',
style: 'header'
},
{
style: 'tableExample',
table: {
body: [
[{
text: 'Toplam Adet',
style: 'subheader'
}, {
text: 'Etiket Değeri',
style: 'subheader'
}, {
text: 'Toplam Ağırlık',
style: 'subheader'
}, {
text: 'Sigorta Değeri',
style: 'subheader'
}, {
text: 'Mağaza Adı',
style: 'subheader'
}, {
text: 'Mağaza Yetkilisi',
style: 'subheader'
}],
["a", "b", "c", "d", "f", "g", "f"]
]
}
},
{
text: 'Ürün Bilgisi',
style: 'margin-header'
},
{
style: 'tableExample',
table: {
body: [
[{
text: 'Adet',
style: 'subheader'
}, {
text: 'Barkod No',
style: 'subheader'
}],
activities.flatMap((item) => {
return [item[0], item[1]]
})
]
}
},
],
styles: {
header: {
fontSize: 14,
bold: true,
margin: [0, 0, 0, 10]
},
'margin-header': {
fontSize: 14,
bold: true,
margin: [0, 20, 0, 10]
},
subheader: {
fontSize: 12,
bold: true,
},
tableHeader: {
bold: true,
fontSize: 13,
color: 'black'
}
},
defaultStyle: {
// alignment: 'justify'
}
}
pdfMake.createPdf(dd).open();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.59/vfs_fonts.js"></script>
<button class="convertPdf" onclick="printPDF()">PDF</button>
This is my code.
I am trying to do something like this. But It doesn't allow me to insert more than 1 array. It allows if my activities array just ['Work',9]. But If I add array more than Work 9 it gives me error : "Cannot read properties of undefined (reading '_calcWidth')".
Your body's first array has 6 elements, while the second one has 7 ('a', 'b' ...).
As seen in pdfmake's playground, the table body's arrays cannot have different sizes :
table: {
body: [
["A", "B", "C"],
["D", "E"], (error: pdfmake expected 3 elems here)
],
}
As a workaround, you can add an empty string to the smaller arrays, to equalize :
table: {
body: [
["A", "B", "C"],
["C", "D", ""],
],
}
Related
I'm trying to use a pie Highchart to change the series of a line chart. It worked as expected until the different series to choose from have different number of elements. I don't know how to update the values of the series AND the categories shown on xAxis.
Html code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container-pie" style="height: 300px;"></div>
<div id="container-line" style="height: 300px;"></div>
JS code:
Highcharts.setOptions({
credits: {
enabled: false
}
});
var circuits = {
linechart_Mar_22: {
name: 'Circuit 1',
areaName: 'First floor',
color: Highcharts.getOptions().colors[0],
data: [3, 15, 26, 13, 23, 91, 13],
ents: ["A", "B", "D", "E", "F", "G", "H"]
},
linechart_Dec_21: {
name: 'Circuit 2',
areaName: 'Second floor',
color: Highcharts.getOptions().colors[1],
data: [92, 34, 56, 88, 18, 23],
ents: ["A", "B", "C", "D", "E", "F"]
},
linechart_Sep_21: {
name: 'Circuit 3',
areaName: 'Parking',
color: Highcharts.getOptions().colors[2],
data: [29, 12, 53, 19, 29, 10, 34, 77],
ents: ["A", "B", "C", "D", "E", "F", "G", "H"]
},
linechart_Jun_21: {
name: 'Circuit 4',
areaName: 'Roof',
color: Highcharts.getOptions().colors[3],
data: [88, 92, 91, 23, 50, 29, 31, 10],
ents: ["A", "B", "C", "D", "E", "F", "G", "H"]
}
};
Highcharts.chart('container-pie', {
chart: {
type: 'pie'
},
title: {
text: 'Areas'
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
var circuitName = this.name,
circuitSeries = [];
for (var name in circuits) {
circuits[name].areaName === circuitName ? circuitSeries.push(circuits[name]) : null;
}
if (Highcharts.charts.length === 1) {
Highcharts.chart('container-line', {
chart: {
type: 'column'
},
title: {
text: 'Circuit'
},
series: circuitSeries,
xAxis: {
type: 'category',
tickInterval: 1,
gridLineWidth:1,
labels: {
enabled: true, step:1,
rotation: 90
},
categories: circuits[name].ents
},
});
} else {
Highcharts.charts[1].update({
series: circuitSeries
});
}
}
}
}
}
},
series: [{
name: 'Areas',
data: [{
name: 'First floor',
y: 1
}, {
name: 'Second floor',
y: 1
}, {
name: 'Parking',
y: 1
}, {
name: 'Roof',
y: 1
}]
}]
});
You can use this fiddle to see what happens.
http://jsfiddle.net/cjxm0huz/
I have to align label with one letter (number) inside node using vis js network. As documentation says, there is font.align property inside node option and by default it's set to center. It looks nice when there are more than one letter in label:
However with one letter it looks like labels are aligned to the left:
Is it a bug or am I doing something wrong? If it's a bug, how can I get around it?
My full code (i'm using react-graph-vis version 1.0.5):
import React from 'react';
import Graph from "react-graph-vis";
import 'vis-network/styles/vis-network.min.css';
const ExecutionPathGraph = ({issueTraces}) => {
const graph = {
nodes: [
{ id: 1, label: "1"},
{ id: 2, label: "2"},
{ id: 3, label: "3"},
{ id: 4, label: "4"},
{ id: 5, label: "5"}
],
edges: [
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]
};
const options = {
height: '500px',
nodes: {
shape: 'circle',
borderWidth: 0,
color: '#000',
font: {
color: '#fff',
size: 18,
align: 'center'
},
shadow: true,
},
edges: {
color: {
color: '#F98323'
},
width: 1.5
},
layout: {
hierarchical: {
sortMethod: 'directed',
shakeTowards: 'roots',
direction: 'UD'
}
},
interaction: {
dragNodes: false,
dragView: false,
selectable: false,
selectConnectedEdges: false,
hover: false,
hoverConnectedEdges: false,
zoomView: false,
},
physics: false
};
return (
<Graph
graph={graph}
options={options}
/>
);
};
export default ExecutionPathGraph;
I ran into this same issue and have a really dumb solution: add an empty space before and after your number.
nodes: [
{ id: 1, label: " 1 "},
{ id: 2, label: " 2 "},
{ id: 3, label: " 3 "},
{ id: 4, label: " 4 "},
{ id: 5, label: " 5 "}
I need to build a time series horizontal bar chart that looks something like this. Each bar represents a query running on the cluster. The length of the bar represents the duration. Each query has start time and end time. Multiple queries can have either same start time or end time or both. Queries may be running in parallel.
I am using highcharts/highstocks charting library, wondering what kind of Highchart config I need to use to accomplish it. Please advise.
I would use a columnrange series. Here you have an example of it: https://jsfiddle.net/BlackLabel/6bu8gtaw
It is hardcoded for now, you can edit it and adjust to your requirements.
All used API properties you can find here: https://api.highcharts.com/highcharts
Highcharts.chart('container', {
chart: {
type: 'columnrange',
inverted: true,
height: 200,
borderWidth: 1,
borderColor: '#d3d3d3'
},
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
plotOptions: {
series: {
groupPadding: 0,
pointPadding: 0.1,
grouping: false,
pointWidth: 6,
borderWidth: 0
}
},
title: {
text: null
},
xAxis: {
visible: false,
reversed: false,
min: -3,
max: 7
},
yAxis: {
opposite: true,
min: -3,
max: 18
},
series: [{
data: [
[0, 10, 13]
]
}, {
data: [
[1, 2, 5]
]
}, {
data: [
[1, 6, 9]
]
}, {
data: [
[1, 12, 16]
]
}, {
data: [
[2, 3, 7]
]
}, {
data: [
[2, 7, 12]
]
}, {
data: [
[3, 0, 4]
]
}, {
data: [
[3, 5, 10]
]
}, {
data: [
[3, 10, 14]
]
}, {
data: [
[3, 16, 18]
]
}, {
data: [
[4, 0, 5]
]
}, {
data: [
[4, 6, 11]
]
}, {
data: [
[4, 11, 15]
]
}, {
data: [
[4, 16, 18]
]
}]
});
After googling lot of time I decided visjs will fit for my solution to develop network graph. I was able generate network graph with Dataset by Hierarchical Layout Horizontal. I have a small issue in network i.e i want all edges only in one(forward) direction.
I needed B, C and F nodes in this screenshot of network left side of the triangle:
I tried changing different options but not able achieve it.
is there anybody have used this library for network graph, Please help me.
Thanks in advance.
Refrence Example in documentation.
Here is code sample.
const container = document.getElementById("mynetwork");
const nodes = new vis.DataSet([
{
id: 1,
label: "A",
color: {
background: "rgb(76, 195, 217)",
border: "rgb(255, 198, 93)"
}
},
{
id: 2,
label: "B",
color: {
background: "rgb(147, 100, 14)",
border: "rgb(123, 200, 164)"
}
},
{
id: 3,
label: "C",
color: {
background: "rgb(76, 195, 217)",
border: "rgb(241, 103, 69)"
}
},
{
id: 4,
label: "D",
shape: "triangle",
size: 25,
color: { background: "white", border: "rgb(64, 64, 64)" }
},
{
id: 5,
label: "E",
color: {
background: "rgb(238,238,238)",
border: "rgb(241, 103, 69)"
}
},
{
id: 6,
label: "F",
color: {
background: "rgb(147, 100, 14)",
border: "rgb(123, 200, 164)"
}
},
{
id: 7,
label: "G",
shape: "triangle",
size: 25,
color: { background: "white", border: "rgb(64, 64, 64)" }
},
{
id: 8,
label: "H",
color: { background: "rgb(238,238,238)", border: "rgb(64, 64, 64)" }
}
]);
const edges = new vis.DataSet([
{ from: 1, to: 4, label: "70%" },
{ from: 3, to: 4 },
{ from: 2, to: 4 },
{ from: 4, to: 5 },
{ from: 6, to: 7 },
{ from: 5, to: 7 },
{ from: 7, to: 8, label: "50%" }
]);
const data = {
nodes: nodes,
edges: edges
};
const options = {
nodes: {
font: {
size: 22
},
borderWidth: 3
},
edges: {
font: {
align: "top"
},
smooth: {
type: "dynamic",
forceDirection:
directionInputValue === "UD" || directionInputValue === "DU"
? "vertical"
: "horizontal",
roundness: 0.0
},
arrows: {
to: { enabled: true, scaleFactor: 1, type: "arrow" }
}
},
layout: {
hierarchical: {
direction: directionInputValue
}
},
interaction: {
tooltipDelay: 200,
hover: true
},
physics: {
enabled: false
}
};
const network = new vis.Network(container, data, options);
You need to set the option layout.hierarchical.sortMethod to directed for the correct calculation of levels:
Directed adheres to the to and from data of the edges. A --> B so B is
a level lower than A.
http://visjs.org/docs/network/layout.html
layout: {
hierarchical: {
direction: "LR",
sortMethod: "directed"
}
}
https://jsfiddle.net/whhqka68/
I am using Kendo charts. I need to show the value of respective stacked bar chart in the below format. Please find the below image and JSfiddle URL for reference.
Sample Code
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
data: [10, 10, 10, 10, 10],
color: "#32CD32",
}, {
name: "BB",
data: [30, 10, 10, 10, 45],
color: "#0000FF",
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
categories: ['A', 'B', 'C', 'D', 'E'],
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
Expected output
You could use data binding and label templates. Bind to:
var data = [
{"Category": "A", "AA": 10, "BB": 30},
{"Category": "B", "AA": 10, "BB": 10},
{"Category": "C", "AA": 10, "BB": 10},
{"Category": "D", "AA": 10, "BB": 10},
{"Category": "E", "AA": 10, "BB": 45}
];
$("#chart").kendoChart({
legend: {
visible: false
},
dataSource: {
data: data
} ,
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "AA",
field: "AA",
color: "#32CD32",
}, {
name: "BB",
field: "BB",
color: "#0000FF",
labels:{
visible: true,
template: "#: dataItem.AA # (#: dataItem.BB #)"
}
}],
valueAxis: {
max: 180,
line: {
visible: false
},
minorGridLines: {
visible: true
},
labels: {
rotation: "auto",
visible: true
}
},
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
chartArea: {
width: 500,
height: 255
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
DEMO