dynamic pdf using pdfmake in react - javascript

I try to make a dynamic pdf using pdfMake in reactjs. I am able to generate pdf from static data. In order to make it dynamic, I made a function that takes parameters that further set the variables of pdfMake object.
However, when I access the object, object didn't update.
Sample code for pdfMake object and function(sample object not full)
import { logo} from './pdf-logo';
var receipt_number=null;
var date_issued=null;
var status=null;
export const setDefinition=(id,created_date,invoice_status)=>
{
receipt_number=id;
date_issued=created_date;
status=invoice_status;
return dd;
}
var dd = {
content: [
{
columns: [
{
image: logo,
width: 150,
},
[
{
text: 'Receipt',
color: '#333333',
width: '*',
fontSize: 28,
bold: true,
alignment: 'right',
margin: [0, 0, 0, 15],
},
{
stack: [
{
columns: [
{
text: 'Receipt No.',
color: '#aaaaab',
bold: true,
width: '*',
fontSize: 12,
alignment: 'right',
},
{
text: receipt_number, //vaiable used
bold: true,
color: '#333333',
fontSize: 12,
alignment: 'right',
width: 100,
},
],
},
{
columns: [
{
text: 'Date Issued',
color: '#aaaaab',
bold: true,
width: '*',
fontSize: 12,
alignment: 'right',
},
{
text: date_issued, //variable used
bold: true,
color: '#333333',
fontSize: 12,
alignment: 'right',
width: 100,
},
],
},
{
columns: [
{
text: 'Status',
color: '#aaaaab',
bold: true,
fontSize: 12,
alignment: 'right',
width: '*',
},
{
text: status, //vaiable used
bold: true,
fontSize: 14,
alignment: 'right',
color: 'green',
width: 100,
},
],
},
],
},
],
],
}
};
I import setDefinition function in my invoice component and call it with some values. For example.
let obj=setDefinition('123345','10 July 2020','Paid');
cosole.log(obj)//not getting the updated object

I found a way to make the dd object dynamic. we have to break the dd object into smaller objects and then update the value of the smaller objects.
for example:
function update=(value){
logo.width=value;
return dd;
}
var logo={
width:'50'
}
var dd={
logo
}

Related

How to minimize the space between the text and subtext in the Doughnut Chart of ECharts?

I am using ECharts to create a Doughnut chart and I would like to display static text in the center of the chart. However, there is a space between the text and subtext that I am unable to reduce. Can somebody please assist me in resolving this issue? The code is provided below with screenshot.
https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut
option = {
title: {
text: `51`,
subtext: 'INSTANCES',
x: 'center',
y: 'center',
textStyle:{
color: '#111111',
fontFamily: 'Montserrat',
fontWeight: 'bolder',
fontSize: 70,
},
subtextStyle:{
fontSize: 16,
color: '#888888',
}
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['55%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: [
{ value: 36, name: 'Standard' },
{ value: 12, name: 'High Memory' },
{ value: 3, name: 'High CPU' },
{ value: 3, name: 'Other' },
]
}
]
};

Apache Echarts & Vue-ECharts - Pie charts animation not working on load

I have a simple doughnut/pie chart that is working fine, but I can not get the default animation, or any animation to work.
I'm using laravel 8, vuejs 2, and echarts / vue-echarts.
This is my vue component in /resopurces/js/components/popular-brands-chart.vue
<template>
<v-chart class="chart" :option="option" autoresize />
</template>
<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import { TitleComponent, TooltipComponent, LegendComponent } from "echarts/components";
import VChart from "vue-echarts";
use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);
export default {
name: "mostpopularbrands",
components: {
VChart,
},
data() {
return {
option: {
animation: true,
backgroundColor: "#fefefe",
color: ["#AD5BA3", "#4EC0B1", "#F4A620", "#EE5969", "#528DCA"],
textStyle: {
fontFamily: "museo-sans",
fontWeight: "bold",
},
label: {
show: true,
color: "#fff",
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
orient: "vertical",
right: "15%",
top: "13%",
data: ["Titleist", "TaylorMade", "Callaway", "Ping", "Nike"],
icon: "circle",
padding: [5, 5],
itemGap: 15,
textStyle: {
fontFamily: "museo-sans",
fontWeight: "normal",
color: "#4C4C4C",
fontSize: "15",
},
},
series: [
{
name: "Most popular brands",
type: "pie",
animationType: "expansion",
animationDuration: 5000,
animationDurationUpdate: 500,
startAngle: 0,
endAngle: 360,
radius: [30, 95],
center: ["25%", "36%"],
label: {
formatter: function (d = "{d}") {
let rounderPercent = Math.round(d.percent);
return rounderPercent + "%";
},
position: "inside",
show: true,
},
data: [
{ value: 170, name: "Titleist" },
{ value: 100, name: "TaylorMade" },
{ value: 75, name: "Callaway" },
{ value: 50, name: "Ping" },
{ value: 37, name: "Nike" },
],
itemStyle: {
borderColor: "#fff",
borderWidth: 2,
},
},
],
},
};
},
};
</script>
<style scoped>
.chart {
margin-top: 2rem;
height: 300px;
width: 100%;
}
</style>
In the bootstrap.js file I have added this also but pretty sure it's not doing anything at the moment, and even when I did import it using the vue 3 examples nothing worked.
/* VueCompositionAPI */
import VueCompositionAPI from '#vue/composition-api'
Vue.use(VueCompositionAPI)
Technically, I should not have to do anything to get this to animate, no console errors. Here is a reference of what it should do :
https://echarts.apache.org/examples/en/editor.html?c=pie-doughnut
I can actually get this working via the CDN and codepen here, why it works, I have no clue :
https://codepen.io/marcgaumont/pen/OJWyZwe
This is the package used for vue:
https://github.com/ecomfe/vue-echarts
Everything works fine, but after 10 + hours trying to get this to animate, trying every example there is. I'm totally out of luck.
Any ideas ?

Echart icon in series tooltip

So i have the following configuration:
const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
data: ['Frekvens', 'Vigtighed']
},
xAxis: {
type: 'category',
data: ['marker_01', 'marker_02'],
axisLabel: {
formatter: function (value) {
return '{' + value + '| }\n{value|}';
},
margin: 20,
rich: {
value: {
lineHeight: 30,
align: 'center'
},
marker_01: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.marker_01
}
},
marker_02: {
height: 20,
align: 'center',
backgroundColor: {
image: icons.maker_02
}
},
}
}
},
yAxis: {},
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: icons.marker_01,
itemStyle: {
normal: {
color: colors[0],
label: {
interval: 5,
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
},
{
name: 'Vigtighed',
type: 'bar',
data: frequencyChartImportance,
itemStyle: {
normal: {
color: colors[1],
label: {
show: true,
position: 'top',
formatter: '\n{c}'
}
}
}
}
]
};
Now as you can see i am using two images as my xAxis
Now i wish to make these show up on my tooltip when i hover over the chart. However i am not quite sure how to do that and was hoping some of you might be able to help?
Simply stated, a series may have a tooltip but the tooltip must be listed as an object with an identifying trigger (see tooltip documentation).
series: [{
name: 'Frekvens',
type: 'bar',
data: frequencyChartFrequencyScore,
tooltip: {
show: true,
trigger: 'axis',
formatter: (params) => {
// see tooltip.formatter for details
// you want to focus on the 'marker' property
return params[0].name;
}
}
}]
With this in mind, you can set two variables and print them as need be within the output of your tooltip. See the additional example below (from CodePen).
var myChart = echarts.init(document.getElementById("main"));
// specify chart configuration item and data
var option = {
title: {
text: "ECharts entry example"
},
tooltip: {
show: true,
trigger: "axis",
backgroundColor: 'rgba(0, 0, 0, 0.8)',
formatter: (params) => {
// create new marker
var icon0 = `<span data-tooltip="minimum" style="border-left: 2px solid #fff;display: inline-block;height: 12px;margin-right: 5px;width: 20px;"><span style="background-color:${params[0].color};display: block;height: 4px;margin-top: 4px;width: 20px;"></span></span>`;
var icon1 = `<span data-tooltip="implied-high" style="background-color:rgba(255,255,255,.75);border-radius: 2px;display: inline-block;height: 12px;margin-right:5px;width: 20px;"><span style="background-color:${params[0].color};border: 1px solid ${params[0].color};border-radius:50%;display:block;height:6px;margin-left:7px;margin-top:3px;width:6px;"></span></span>`;
console.log("params", params, params[0].name);
return `${icon0} ${params[0].name}
${icon1} ${params[0].value}`;
},
textStyle: {
fontWeight: 'bold',
fontSize: 18
}
},
legend: {
data: ["Sales"]
},
xAxis: {
data: ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"]
},
yAxis: {},
series: [
{
name: "Sales",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
// use configuration item and data specified to show chart
myChart.setOption(option);

javascript eCharts - Gauge is not showing

Hi I am trying gauge meter in script. I get this code from echarts.com and now I am including this one with asp. In console it doesn't show any error but it is not showing?
Hope I will get good answer from you friends.
<script>
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
timeTicket = setInterval(function() {
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
}, 2000)
clearInterval(timeTicket);
And the html code is
<canvas id="mychart"></canvas>
I don't know which version of eCharts you are trying to use, but for my example I'm using a 4.1.
I think you forgot the init method (echarts.init(...)) that is shown in eCharts documentation, at least in your code here you are not using it, and when I put it in my example, it works.
Also, I don't know why you are using a setInterval(), but for now, I removed it.
I also choose to use a div instead of a canvas to render the gauge, it appears better in my screen.
The options object I let the same as you.
Check below to see it working.
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
let myChart = echarts.init(document.getElementById('mychart'));
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
#mychart{
width: 350px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script>
<div id="mychart"></div>
In your div, set the width and heigh values.

How to create this chart with ZingChart

I am trying to create a chart that looks/functions like this with ZingChart.
I have tweaked a bar chart every way I can think of but I'm still not coming close.
Is this chart possible with ZingChart?
The following chart is mimicked from the cutout you have attached. If you have any questions about what I did, I can surely go into detail.
Note: For best viewing results look at the chart in the full page view.
var myConfig = {
type:'mixed',
title: {
text: 'Rank by MPH',
},
scaleX: {
offset: 0, // force line to start at scale
offsetEnd: 10, // force last bar away from end of the scale
maxItems: 2, // force display of first and last labels
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14,
rules: [ // adjust last label
{
rule: '%i == 16',
text: '129',
}
]
},
lineWidth:2,
lineColor: '#000',
},
scaleY: {
minValue: 0,
maxValue: 100,
step: 50,
format: '%v%',
markers: [
{ // diagonal line
type: 'line',
range: [0,100],
lineWidth: 3,
lineColor: '#000',
}
],
tick: {
visible:false,
},
item: {
fontColor: '#000',
fontSize: 14
},
guide: {
visible: false,
},
lineWidth:2,
lineColor: '#000',
},
labels: [
{ // hook label to line marker to display rank
hook: 'node:plot=1,index=1',
backgroundColor: '#000',
fontColor: '#fff',
text: 'Rank 11 / 16',
calloutWidth: 20,
callout: true,
calloutPosition: 'bottom',
padding: 15,
borderRadius: 10,
fontSize: 15,
offsetY: -50,
},
{ // hook label to scale to display mph
hook: 'scale:index=11',
text: '100 mph',
fontSize: 15,
offsetY: 15,
},
],
series: [
{
type: 'bar',
barWidth:20,
barSpacing:1,
borderRadius:'10 10 0 0',
backgroundColor: '#c0c0c0',
tooltip: {
backgroundColor: '#000',
text: 'Rank %i / 16',
calloutWidth: 20,
callout: true,
calloutPosition: 'bottom',
padding: 15,
borderRadius: 10,
fontSize: 15,
placement: 'node:top',
offsetY: -20,
},
rules: [
{ // make one bar purple
rule: '%i == 11',
backgroundColor: 'purple',
}
],
values: [null,5,9,12,19,25,30,34,39,45,49,54,58,65,69,74,79],
},
{
type: 'line',
lineColor: 'purple',
lineStyle: 'dotted',
valueBox: {
text: '%v%',
placement: 'left',
offsetX: -18,
fontSize: 12,
rules: [
{ // hide the valuebox at the node on the line
rule: '%i == 1',
visible: false,
}
],
},
marker: {
borderColor: 'purple',
borderWidth: 2,
backgroundColor: '#fff',
size: 9,
rules: [
{ // hide first marker of the line
rule: '%i == 0',
visible:false,
}
],
},
values: [[0,69], [11,69]], // array of arrays to better plot the line
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%',
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>

Categories

Resources