We Keep Coding

Is it possible to force one specific item to be horizontal?

I'm working on a wordcloud for my personal website. I'm really happy with how it looks so far, but I want to force the biggest word to be horizontal. I have looked through the Wiki and haven't been able to find how to do it.
I have tried with both angles: tag as well as rotation: tag.
Does anyone know how to keep that one word fixed to horizontal in amchart 5 wordcloud?
Parts of the code:
var root = am5.Root.new("content-chart-frontpage-wordcloud-div");
root.setThemes([
am5themes_Animated.new(root)
]);
var container = root.container.children.push(am5.Container.new(root, {
width: am5.percent(100),
height: am5.percent(100),
layout: root.verticalLayout
}));
var series = container.children.push(am5wc. WordCloud.new(root, {
minFontSize:am5.percent(10),
maxFontSize:am5.percent(50),
categoryField: "tag",
valueField: "weight",
calculateAggregates: true
}));
series.set("heatRules", [{
target: series.labels.template,
dataField: "value",
min: am5.Color.fromString("#9f8155"),
max: am5.Color.fromString("#bda684"),
key: "fill"
}]);
series.labels.template.setAll({
paddingTop: 5,
paddingBottom: 5,
paddingLeft: 5,
paddingRight: 5,
fontFamily: "Norse",
cursorOverStyle: "pointer"
});
series.data.setAll([
//Most important word, horizontal
{ tag: "data", weight: 60 },
//Words scraped from the website
{ tag: "grafana", weight: 12 },
{ tag: "prometheus", weight: 10 },
{ tag: "export", weight: 8 },
{ tag: "dashboards", weight: 8 },
{ tag: "visualize", weight: 4 },
...
]);

Apex Chart - How to target and style one specific grid line?

Does anyone has clue how to target specific grid line and style like in the example?
I know how to dash line with:
grid: {
strokeDashArray: 10,
},
But how can I target grid line according to the tick value?
Desired result

Only way you can do it is via css
.apexcharts-gridline:nth-child(2) {
stroke-dasharray: 10;
}
Or use annotations instead https://apexcharts.com/docs/annotations/

I have sorted it by using annotations property. Here is an example:
// Breakdown line
annotations: {
position: 'front',
yaxis: [
{
y: 3000,
strokeDashArray: 5,
label: {
position: 'left',
borderColor: 'transparent',
textAnchor: 'middle',
offsetY: -10,
offsetX: 50,
style: {
color: '#D0D4D9',
background: "transparent",
},
text: ''
}
}
]
}

Javascript variable not working inside obejct . But getting on console.log

Javascript variable does not work inside an object. I see the data when I console.log(dataPondsRevenue) variable, but getting the error:
SyntaxError: missing ] after element list`!
when I use it inside the data:[] node:
$('.pondsRevenueBlock').on('click',function(){
var block_id = $(this).attr('data-id');
var url='{{ route('WhiteFish.client.pondsRevenueBlockWise') }}';
$.ajax({
url:url+'?block_id='+block_id,
}).done(function(pondsRevenueData){
var dataPondsRevenue = '';
$.each(pondsRevenueData, function(index, element) {
dataPondsRevenue+= '{value:'+element.pondTotalInvest+',name:'+element.name+'},';
});
console.log(dataPondsRevenue);
var eChart_2 = echarts.init(document.getElementById('pondsRevenue'));
var option1 = {
tooltip : {
backgroundColor: 'rgba(33,33,33,1)',
borderRadius:0,
padding:10,
axisPointer: {
type: 'cross',
label: {
backgroundColor: 'rgba(33,33,33,1)'
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: "'Open Sans', sans-serif",
fontSize: 12
}
},
// color: ['#0FC5BB', '#92F2EF', '#D0F6F5'],
color: ['#0FC5BB', '#0FC5BB', '#5AC4CC'],
series : [
{
name: 'task',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
roseType : 'radius',
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)",
backgroundColor: 'rgba(33,33,33,1)',
borderRadius:0,
padding:10,
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: "'Open Sans', sans-serif",
fontSize: 12
}
},
data:[
console.log(dataPondsRevenue);
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
eChart_2.setOption(option1);
eChart_2.resize();
}).fail(function (data) {
console.log('error');
});
});
How can I solve it?

Use an array (and optionally JSON.stringify it; in case of $.ajax, have a look at contentType at $.ajax docs), it is much less error-prone - in your case, there's always a trailing comma at the end, which is not a valid JSON:
console.log("Valid:")
console.log(JSON.parse('{ "whatever": 1 }'))
console.log("Invalid:")
console.log(JSON.parse('{ "whatever": 1, }'))
$('.pondsRevenueBlock').on('click',function(){
var block_id = $(this).attr('data-id');
var url='{{ route('WhiteFish.client.pondsRevenueBlockWise') }}';
$.ajax({
url:url+'?block_id='+block_id,
contentType: 'application/json'
}).done(function(pondsRevenueData){
var dataPondsRevenue = [];
$.each(pondsRevenueData, function(index, element) {
dataPondsRevenue.push({
value: element.pondTotalInvest,
name: element.name
})
});
console.log(dataPondsRevenue);
var eChart_2 = echarts.init(document.getElementById('pondsRevenue'));
var option1 = {
tooltip : {
backgroundColor: 'rgba(33,33,33,1)',
borderRadius:0,
padding:10,
axisPointer: {
type: 'cross',
label: {
backgroundColor: 'rgba(33,33,33,1)'
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: "'Open Sans', sans-serif",
fontSize: 12
}
},
// color: ['#0FC5BB', '#92F2EF', '#D0F6F5'],
color: ['#0FC5BB', '#0FC5BB', '#5AC4CC'],
series : [
{
name: 'task',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
roseType : 'radius',
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)",
backgroundColor: 'rgba(33,33,33,1)',
borderRadius:0,
padding:10,
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: "'Open Sans', sans-serif",
fontSize: 12
}
},
data: JSON.stringify(dataPondsRevenue),
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
eChart_2.setOption(option1);
eChart_2.resize();
}).fail(function (data) {
console.log('error');
});
});
Also, the console.log(), returns undefined - you can just pass the variable instead.

There seems to be quite a confusion as to how to create the needed data object. With the code
$.each(pondsRevenueData, function(index, element) {
dataPondsRevenue+= '{value:'+element.pondTotalInvest+',name:'+element.name+'},';
});
You are creating a JSON string. This could be parsed into an object using JSON.parse() but that seems unnecessary over complication as you could create the required array of objects to start with:
var dataPondsRevenue = [];
$.each(pondsRevenueData, function(index, element) {
dataPondsRevenue.push({value: element.pondTotalInvest, name: element.name});
});
Then, just assign dataPondsRevenue to data:
...
},
data: dataPondsRevenue,
itemStyle:
...

This is because console.log(dataPondsRevenue) is a function that returns undefined, so
data: [ console.log(dataPondsRevenue) ]
means
data: [ undefined ]
You should do
data: [ dataPondsRevenue ]
to get the actual data into the array.

You are creating a JSON string. This could be parsed into an object using JSON.parse() but that seems unnecessary over complication as you could create the required array of objects to start with:
var dataPondsRevenue = [];
$.each(pondsRevenueData, function(index, element) {
dataPondsRevenue.push({value: element.pondTotalInvest, name: element.name});
});

How to set font size of watermark in "pdfmake" javascript library

I am using pdfmake to generate pdf in angular js.
I am trying to reduce/set same font size of watermark should be display in pdf, according to the dynamic text.
I have tried below config in , playground
var dd = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
watermark:{
text:"Niklesh Raut",
header: {
fontSize: 22,
bold: true
},
anotherStyle: {
italic: true,
alignment: 'right'
}
}
}
Also tried like below.
var dd = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
watermark:{
text:"Niklesh Raut",
styles: {
fontSize: 22,
bold: true
}
}
}
But no luck.
Question : how to set/reduce font size for watermark ?

Hi Found below sample from https://itnext.io/angularjs-exporting-to-pdf-using-pdfmake-js-library-49f3afec97ef
var docDefinition = {
header: function() {
return [
{
style: 'table',
margin: [62,35,62,35],
table: {
widths: ['*', '*'],
headerRows: 0,
body: [
[
{text: 'Booking Summary', style: 'topHeader', alignment: 'left'},
{
'base64-image-string-goes-here',
width: 150,
alignment: 'right'
}
]
]
},
layout: 'noBorders'
}
]
},
footer: function(currentPage, pageCount) {
return [
{text: currentPage.toString() + ' of ' + pageCount, alignment: 'center', style: 'footer'}
]
},
content: [],
pageSize: 'A4',
pageMargins: [62,80,62,80],
styles: {
topHeader: {
fontSize: 20,
bold: true,
margin: [0, 6, 0, 30],
alignment: 'left'
},
table: {
fontSize: 8,
alignment: 'left',
color: 'black',
margin: [0, 5, 0, 15]
},
header: {
fontSize: 16,
bold: true,
margin: [0, 10, 0, 15],
alignment: 'left'
},
footer: {
fontSize: 8,
margin: [0, 25, 0, 17],
alignment: 'center'
}
}
};
pdfMake.createPdf(docDefinition).download();
};

pdfmake watermark fit to the page, even if length of character is 1, So added blank spaces to make word with a fixed length word, with below code
var stars = ' ';
var name = "Niklesh Raut";
var center = parseInt(stars.length/2) - parseInt(name.length/2);
var starsArr = stars.split("");
var nameArr = name.split("");
for(let i=0;i<name.length;i++){
starsArr[center+i] = nameArr[i];
}
console.log('|'+starsArr.join("")+'|');
And use this for watermark
var dd = {
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
],
watermark:{
text:' Niklesh Raut ',
}
}

When echarts is switched on tab, the container width is set to 100%, but no matter how it is set, the width is only 100px

html
js
var myChart = echarts.init(document.getElementById("main"));
window.onresize = myChart.resize;
var statistics = {
title: {
text: "面积",
textStyle: {
fontWeight: "normal",
color: "#fff",
fontSize: 14
},
left: "center"
},
tooltip: {
// 鼠标移动柱状图是提示文字
show: true
},
legend: {
// data: ['面积'],
textStyle: {
fontSize: 12
}
},
xAxis: {
data: ["灌木", "森林", "森林", "树木", "小树", "大树", "红树"],
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
axisLine: {
lineStyle: {
color: "#094060"
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: "#094060"
}
},
axisLabel: {
show: true,
textStyle: {
color: "#fff"
}
},
splitLine: {
lineStyle: {
color: ["#07405c"]
}
}
},
itemStyle: {
color: "#06ae7c",
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)"
}
},
series: [
{
type: "bar",
barWidth: 48,
data: [38, 23, 35, 12, 26, 8, 36]
}
]
};
myChart.setOption(statistics);
The echarts container in the tab switch width is set to 100%, but no matter how to set the width, are only 100px, the Internet that is because the tab bar tried to hide cause, many of the above methods, are not normal display, followed by window.onresize = myChart.resize in the code; only when changing the size of the browser window to display properly, but if you do not change the size of the window or after 100px, before we have encountered this kind of situation is how to solve?

put the class "echart" in each div chart, and execute that in your js.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
$(".echart").each(function() {
var id = $(this).attr('echarts_instance');
window.echarts.getInstanceById(id).resize();
});
});

I have discovered one workaround for this issue. Try to call the resize event of window object when you switch tabs. To achieve it with jQuery is straightforward:
$(window).trigger('resize');

var myChart=$("#myChart");
myChart.style.width=window.innerWidth+'px';
chartObj=echarts.init(myChart);
chartObj.setOption(option);