I am trying to make word cloud using zingcharts. But I am not able to reduce white space between the words and make the word cloud more compact.
Current Version of word cloud
I want something like this.
Ideal wordcloud version
Code for generating word cloud.
var myConfig = {
type: 'wordcloud',
options: {
words:arr,
minLength: 4,
colorType: 'palette',
palette:['#99bbff','#80aaff','#6699ff','#4d88ff','#3377ff','#1a66ff','#0055ff','#004de6','#0044cc','#003cb3','#003399'].reverse()
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '500px',
width: '65%'
});
Is there any way to do this ? I was not able to find any such property in zingcharts.
Thanks.
You can adjust the spacing between words by setting the padding in the style object like so:
style: {
padding: '-1px'
}
Here is an example of modified spacing on a wordchart: https://demos.zingchart.com/view/BHHBSRA8
Related
I am currently working on a project for my company, where I need to plot highstock charts, which show energy-data of our main buildings.
Since it is live data, new datapoints come per Websocket every few-or-so seconds. However, the graph should only show one datapoint every hour. I wanted to clear this with the highstock dataGrouping, but it does not really work. It groups the points yes, but it still shows the „transmission“, the graph-line, between them. Thus making the whole graph completely irreadable.
In an other Version of the project, the graph only shows the latest datapoint of each group (as specified in the „approximate“ object in the chart options), but also does not start a new group after the chosen Interval runs through.
I've been sitting on this problem for about 3 days now and have not found any proper completely working solution yet.
Unfortunately, due company policy and due to hooks and components necessary, which are only used here in the company, I'm not able to give you a jsfilddle or similar, even though I'd really love to. What I can do is give you the config, mabye you find something wrong there?
const options = {
plotOptions: {
series: {
dataGrouping: {
anchor: 'end',
approximation: function (groupData: unknown[]) {
return groupData[groupData.length - 1];
},
enabled: true,
forced: true,
units: [['second', [15]]],
},
marker: {
enabled: false,
radius: 2.5,
},
pointInterval: minutesToMilliseconds(30),
pointStart: currentWeekTraversed?.[0]?.[0],
},
},
}
This would be the plotOptions.
If you need any more information, let me know. I'll see then, what and how I can send it to you.
Thank you for helping. ^^
This is example how dataGrouping works with live data,
try to recreate your case in addition or use another demo from official Highcharts React wrapper page.
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 15,
text: '15S',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['second', [15]]
]
}
}, {
type: 'hour',
count: 1,
text: '1M',
preserveDataGrouping: true,
dataGrouping: {
forced: true,
units: [
['minute', [1]]
]
}
}
},
Demo: https://jsfiddle.net/BlackLabel/sr3oLkvu/
I try to build a globe with markers (like the markers on google maps) with HERE and harp.gl. These markers are SVG-Images and need to be loaded from their file.
They also need to be clickable with some metadata attached like an ID.
So my questions are:
what is the best way to display these markers?
how can I make them clickable? (raycasting?)
is there a way to attach some metadata?
thanks in advance!
Edit:
To clarify, the Markers are SVG-Images stored in SVG-Files which need to be loaded and displayed as Markers.
The Data is provided by an API and therefore I tried adding it as Point of it's own like the Cube-Example and also tried to translate it to GeoJSON and FeatureSets:
const geojsonPoints: {type: "FeatureCollection", features: Feature[]} = { type: "FeatureCollection",
features: [
]
};
for(let i = 0; i < locationdata.length; i++) {
geojsonPoints.features.push({
type: "Feature",
id: i.toString(),
geometry: {
type: "Point",
coordinates: [locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]]
},
properties: locationdata[i]
})
}
const features: MapViewFeature[] = [];
for(let i = 0; i < locationdata.length; i++) {
features.push(new MapViewPointFeature([locationdata[i]["lonlat"][1], locationdata[i]["lonlat"][0]], locationdata[i]))
}
When I try adding a GeoJSON-Layer I get an error that the decoder.min.js couldn't be loaded but I configured it like that:
const mapView = new MapView({
canvas: this.canvas,
projection: sphereProjection,
theme: {
extends: pluginpath + "/js/harp.gl-example/dist/resources/berlin_tilezen_base_globe.json",
styles: {
geojson: this.getStyleSet()
}
},
decoderUrl: pluginpath + "/js/harp.gl-example/dist/decoder.bundle.js"
});
pluginpath is a variable containing prefix since the js-folder isn't directly in the root-directory like in all the examples.
To sum it all up:
I need to display the data provided by the API as markers. The markers should be the SVG-Images mentioned earlier and these markers should be clickable.
Edit 2:
I tried modifying this example to display the SVG-Markers.
The first step worked where I just displayed the cubes from the example at the needed locations, but I couldn't replace the cube with markers. I used these two documentations from three.js website but they didn't work for me:
https://threejs.org/docs/#examples/en/renderers/SVGRenderer
https://threejs.org/docs/#examples/en/loaders/SVGLoader
I didn't get any error the SVGs just didn't show up.
Just a quick note that in general, it's better to ask one question at a time. I'm going to focus on your first one about adding markers. Our tutorial has a section on adding markers, https://developer.here.com/tutorials/harpgl/#add-data. In the example, it assumes GeoJSON data. You didn't mention what kind of file you had so I don't know if it's GeoJSON or not.
I'd say - begin by describing what kind of file you have, how the data looks. Then look at the example I linked to in terms of adding markers. Then - share with us what you tried.
Loading SVGs directly is not supported but you could use base64 encoded svg images, e.g.:
const imageString =
"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgaWQ9Imx1aS1pY29uLWRlc3RpbmF0aW9ucGluLW9uZGFyay1zb2xpZC1sYXJnZSIKCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ4IDQ4IgoJIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0ibHVpLWljb24tZGVzdGluYXRpb25waW4tb25kYXJrLXNvbGlkLWxhcmdlLWJvdW5kaW5nLWJveCIgb3BhY2l0eT0iMCI+CgkJPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTQ3LDF2NDZIMVYxSDQ3IE00OCwwSDB2NDhoNDhWMEw0OCwweiIvPgoJPC9nPgoJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmZmZmYiIGQ9Ik0yNCwyQzEzLjg3MDgsMiw1LjY2NjcsMTAuMTU4NCw1LjY2NjcsMjAuMjIzMwoJCWMwLDUuMDMyNSwyLjA1MzMsOS41ODg0LDUuMzcxNywxMi44ODgzTDI0LDQ2bDEyLjk2MTctMTIuODg4M2MzLjMxODMtMy4zLDUuMzcxNy03Ljg1NTgsNS4zNzE3LTEyLjg4ODMKCQlDNDIuMzMzMywxMC4xNTg0LDM0LjEyOTIsMiwyNCwyeiBNMjQsMjVjLTIuNzY1LDAtNS0yLjIzNS01LTVzMi4yMzUtNSw1LTVzNSwyLjIzNSw1LDVTMjYuNzY1LDI1LDI0LDI1eiIvPgo8L2c+Cjwvc3ZnPgo=";
This image can then be used in the style definition like this:
styles: {
geojson: [
{
when: ["==", ["geometry-type"], "Point"],
technique: "labeled-icon",
attr: {
text: ["get", "text"],
textMayOverlap: true,
size: 14,
imageTexture: "custom-icon",
screenHeight: 32,
iconScale: 0.5,
distanceScale: 1,
iconYOffset: 20
}
}
]
},
images: {
"custom-icon": {
url: imageString,
preload: true
}
},
imageTextures: [
{
name: "custom-icon",
image: "custom-icon"
}
]
I have this example where I am locating a matching string via regex and changing the styles using highlight rules.
this.$rules = {
start: [{
token: 'variableRef',
regex: /\$variable\..+\$/
}]
};
and alter the color using a css class:
.ace_variableRef {
color: red;
}
But what I would really like to do is change the text that is being displayed from $variable.1.name$ to the "resolved value". I have access to:
var variables = {
1: 'timeout'
};
so I can use the reference path to get the value, but is it even possible to do this with ace-editor?
Ideally I would display the string in the user friendly way, but keep the original reference value handy (in metadata or something) since that is what is actually stored in the db.
You can accomplish this by defining a custom onMatch for your rule, like so
this.$rules = {
start: [{
onMatch: function(value, state, stack) {
var values = this.splitRegex.exec(value);
return [{
type: 'variableRef',
value: variables[values[1]]
}]
},
regex: /\$variable\.(\d+).+\$/
}]
};
but the actual text will remain unaltered (thus causing oddities with text selection/cursor), so you'll need to pad/clip the resulting value for it to match length of values[0]
I use JsPlumb to connect various div. The options i use for connection is as follows,
var option = {
anchors: ["RightMiddle", "Bottom"],
connectorStyle: { strokeWidth: 0.5, stroke: "#243CA8"},
connector: ["Flowchart", { stub: [35, 70], midpoint: 0, cornerRadius: 1 }],
paintStyle: { stroke: "#243CA8", strokeWidth: 30},
overlays: [["Arrow", { location: 1, width: 65, length: 32 }]]
};
But the arrow overlaps on connector and output is not looking good.
I also tried setting overlay options 'location:-1' but still does not make any difference and also tried setting 'gap:10' for connector but it applies for both arrow overlay and connector by which the problem is still same but with space between element and connector. I cannot find anyother solution. Can anyone please suggest a solution. Thanks!
I was trying different options and accidentally came across the solution which is mentioned nowhere.
I just changed the 'location: 1' option of overlays to 'location: [0,1]' and it worked. Had no idea it was possible and it is mentioned nowhere. This is to help those who are struggling with the same issue!
I've been running into an issue with clicking on JsPlumb connections. In my application, users can draw connections between JsPlumb objects, and delete them by clicking on a connection and confirming on a deletion prompt.
The specific issue that I'm having is that the connections are too thin to be able to click on easily (especially on mobile devices, for which this application is also targeted), and yet for design reasons, the width of these connections cannot be enlarged.
The solution I'm looking into is creating a sort of invisible buffer around each connection, to give the user a bit of leeway in selecting them. However, I've been looking into how I might do this, and I haven't been able to come up with anything.
Here's my JsPlumb defaults:
jsPlumb.importDefaults({
Anchors: [
["Perimeter", {
shape: "Rectangle"
}],
["Perimeter", {
shape: "Rectangle"
}]
],
Connector: ["Straight"],
ConnectionsDetachable: false,
ConnectionOverlays: [
["Arrow", {
width: 8,
length: 15,
location: 1
}],
["Label", {
label: '0',
id: "distanceLabel",
cssClass: "distance-label"
}]
],
DoNotThrowErrors: false
});
I'm pretty sure I'm not looking to add elements on top of the connections, as I still want to use the JsPlumb click event to handle deletions. If anyone has any ideas how this could be done, it would be greatly appreciated.
From API's I couldn't find any option for setting border for connections. Try connection labels as work around solution. Connection will be removed when user clicks on the label.
FIDDLE LINK
You can set label in defaults as:
jsPlumb.importDefaults({
ConnectionOverlays: [["Label", {
cssClass:"component",
label : "<div class='DCon'><div>",
location:0.4,
id:"label",
events:{
"click": function(label, evt) {
jsPlumb.detach(label.component);
},
"mouseenter": function(label, evt) {
label.component.setPaintStyle({lineWidth:1,strokeStyle:"#FF0040"});
},
"mouseexit": function(label, evt) { // Try "mouseleave" if this doesn't work.
label.component.setPaintStyle({lineWidth:1,strokeStyle:"gray"});
}
}
}]
});
I have specified the label image in the CSS:
.DCon {
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTk2D-dANCTuefhUI8C9Q3krWq5-J0tZpeSPY65Qc6bUuZLz1Uj);
background-size: 100% 100%;
cursor:pointer;
background-repeat: no-repeat;
height: 15px;
width: 15px;
}
You could set an invisible outline (with alpha = 0) to each connector:
PaintStyle:
{
outlineColor:"rgba(255,255,255,0)",
outlineWidth:10
}
References:
https://jsplumbtoolkit.com/doc/paint-styles.html
https://jsplumbtoolkit.com/doc/defaults.html