I am using Nuxt-Gmaps and would like to add a local clusterStyle icon.
My code
clusterStyle: [
{
url: "~/assets/img/map_cluster.svg",
width: 48,
height: 48,
textColor: "#000"
}
],
The snippet is used here
<GMap
class="map"
ref="gMap"
language="en"
:cluster="{options: {styles: clusterStyle}}"
:options=mapOptions
>
I have found a workaround, when I put the icon in the static folder, but this isn't really best practice.
you will need to use require here
clusterStyle: [
{
url: require("#/assets/img/map_cluster.svg"),
width: 48,
height: 48,
textColor: "#000"
}
],
Related
I am creating a QuickChart.io using Chart.JS within a PowerApps canvas and am having some issues with formatting. Everything works on the visualization (filtering, rendering, etc.) but I am trying to remove the gridlines and resize the display area but the formatting options are not showing up. Any idea what's causing this?
"https://quickchart.io/chart?c="&EncodeUrl("{
'type': 'bar',
'data': {
'labels': ["&Concat(Filter(Table2,Scenario=_code),"'"&'X-Axis'&"',")&"],
'datasets': [
{
'label': 'Dataset 2',
'backgroundColor': 'rgba(54, 162, 235, 0.5)',
'borderColor': 'rgb(54, 162, 235)',
'borderWidth': 1,
'data': ["&Concat(Filter(Table2,Scenario=_code),"'"&DataSet1&"',")&"]
}
]
},
'options':
{
'elements': {
'rectangle': {
'borderWidth': 2
}
},
'responsive': true,
'maintainAspectRatio': false,
'legend': {
'display': false
},
'grid': {
display: false
},
'title': {
'display': true,
'text': 'Revenue'
}
}
}")
Your config is invalid, there is no grid option in the root of the options.
Depending on if quick chart is using chartjs V2 or v3 you need to configure it in the scales section
V2: options.scales.xAxes[0].gridLines.display
V3: options.scales.x.grid.display
And then you replace x by y to remove the y grid
I am trying to download pdf with jquery but when I download pdf it showing content
for that I have make below code
{
extend: 'pdfHtml5', title: 'Customer Sales Rep Sales Totals', orientation: 'landscape',
footer: true,
action: newPDFAction,
exportOptions: {
columns: ':visible',
order: 'applied',
modifier: {
pageMargins: [ 0, 0, 0, 0 ], // try #3 setting margins
margin: [ 10,0 ], // try #4 setting margins
alignment: 'center'
},
body : {
margin:[10,0],
pageMargins: [ 0, 0, 0, 0 ],
alignment: 'center'
} // try #5 setting margins
,columns: [0,1,2,3,4,5,6,7] //column id visible in PDF
},customize: function (doc)
{
doc.content[1].table.widths = [ '15%', '15%', '10%','10%','10%', '15%', '15%' ,'10%'];
doc.content[1].borders = ['2px solid'];
doc.content[1].fillColor = '#ccc';
doc.content.splice(0,0);
}
}
I don't know why it is showing like this. html is showing properly while I am hitting this html in browser
can anybody help me in this?
My particles.js won't load with my WorpdPress custom theme.
The console throws this error:
I found plugin for this Particles effect, but I don't know how to use it :D And, I'd like to implement my own.
So, particles worked just fine, until I transformed my website into a WordPress theme... It's obviously problem with a JSON file....how can I go around this?
btw....it's on localhost....would it make difference when on a server?
Ok, so I managed to solve this problem. Not sure if it's THE solution, but what worked for me was: I had to put the JSON config inline, in a custom app.js file. Then it worked.
When the JSON config is in a separate file, WP has a problem loading it. It throws GET 404 not found. So....this worked for me...
I found the solution here: https://github.com/VincentGarreau/particles.js/issues/157
what I did was include the json settings in a variable and place that code in the javascript file that you put this code
particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});
But I did not use particlesJS.load, just particlesJS. So it would look something like this
var config = {
particles: {
number: {
value: 100
},
color: {
value: "#d4d4d4"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#d4d4d4"
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: "#d4d4d4",
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "out",
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
retina_detect: true
}
particlesJS("your-id-or-class", config, function () {})
I need seperate labels mounted for example:
this is an Area Chart from Google Chart. is posible change distance of label to points?
Regards,
I Resolved it, only need add atribute "stem" to an annotations, i share the solution:
series: {
0: {
pointSize: 5,
annotations: {
textStyle: {
auraColor: 'none',
bold: true,
fontSize: 11
}
}
},
1: {pointSize: 5,
annotations: {
stem: { length: 20 },
textStyle: {
auraColor: 'none',
bold: true,
fontSize: 11,
}
}
},
}
The result:
I hope it help anyone,
Regards
I want use cytoscape librairy for build a sample graphs but I want display on each node different images.
I tried that :
[
{
"data": [
"id0"
],
"position": {
"x": 44,
"y": 93
}
},
{
"data": [
"id1"
],
"position": {
"x": 77,
"y": 200
},
"background-image": [
"https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg",
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Pigeon_silhouette_4874.svg/1000px-Pigeon_silhouette_4874.svg.png"
],
"background-fit": "cover cover",
"background-image-opacity": 0.5
}
]
But when I load my page I see two 'empty' nodes. I used this javascript script :
fetch('data.json', {mode: 'no-cors'})
.then(function(res) {
return res.json()
})
.then(function(data) {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
layout: {
name: 'preset',
},
style: [
{
selector: 'node',
style: {
'height': 20,
'width': 20,
}
}
],
elements: data
});
});
Where is my mistake ? How can I generate a graph with different background images on each nodes ?
Thanks you :)
Here is my solution:
https://plnkr.co/edit/lKjxkMS8F1E68Mk70fjS?p=preview
It is important set to css for #cy.
#cy {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
}
EDIT:
This is correct -> https://plnkr.co/edit/lKjxkMS8F1E68Mk70fjS?p=preview
It is necessarily "background-image" wrap tag "style".
"style": {
"background-image": [
"https://upload.wikimedia.org/wikipedia/commons/b/b4/High_above_the_Cloud_the_Sun_Stays_the_Same.jpg",
"https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Pigeon_silhouette_4874.svg/1000px-Pigeon_silhouette_4874.svg.png"
],
"background-fit": "cover cover",
"background-image-opacity": 0.5
}