We Keep Coding

Word Cloud from Highcharts - Create a placement strategy so words are ordered from highest weight to lowest

I'm trying to create a placement strategy for Word Cloud from Highcharts so that the words themselves are placed based on their weight, from highest to lowest. I'm not entirely sure how to create this placement strategy based on their docs. Any help would be great!
I have this jfiddle with no rotation: https://jsfiddle.net/3gp2L1zw/1/
Highcharts.chart('container', {
accessibility: {
screenReaderSection: {
beforeChartFormat: '<h5>{chartTitle}</h5>' +
'<div>{chartSubtitle}</div>' +
'<div>{chartLongdesc}</div>' +
'<div>{viewTableButton}</div>'
}
},
series: [{
type: 'wordcloud',
data: data,
name: 'Occurrences',
rotation: {
from: 0,
to: 0
}
}],
title: {
text: 'Wordcloud of Lorem Ipsum'
}
});

According to the documentation placed below, I created a simplified demo where I added another method to the placementStrategy.
DOCS: https://www.highcharts.com/docs/chart-and-series-types/word-cloud-series#custom-spiralling-algorithm
Live demo: https://jsfiddle.net/BlackLabel/14q9hxvj/

HighStock: chart gets broken when navigator touches right border

I'm developing an web application that handles and shows large amounts of live data from some devices. To visualise the data I decided to use HighStock. It seems to work well on most of the data:
However, when the bottom navigator touches right border, the picture becomes quite different:
The timeline is almost the same, but the number of points is different, also vertical scale is different... What is this happening? How to fix it?
My code looks this way:
const ch1 = Highcharts.stockChart('chart1', {
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonTheme: {visibility: 'hidden'},
labelStyle: {visibility: 'hidden'},
},
title: {
text: 'Metrics',
},
series: [{
name: 'Sensor 1', data: [],
}, {
name: 'Sensor 2', data: [],
}, {
name: 'Sensor 3', data: [],
}]
});
// a,b,c gets values from the server
// They are arrays of pairs of timestamp & value
ch1.series[0].setData(a);
ch1.series[1].setData(b);
ch1.series[2].setData(c);
// tm_min & tm_max are dynamically calculated using the data
ch1.xAxis[0].setExtremes(tm_min, tm_max);
Update: Here is an example with 2% of my data – try to do the same as shown above.

I found the solution. The issue is caused by your data and xAxis.ordinal that is enabled by default in Highstock. Your data has many empty points on the right side of the chart and because of ordinal, the empty space was not rendered, yet dataGrouping grouped data differently.
Check this here https://jsfiddle.net/BlackLabel/x1tgqbw6/ (disabled ordinal):
xAxis: {
ordinal: true
}
So, the solution is to disable xAxis.ordinal or generate your data without null points:
https://jsfiddle.net/BlackLabel/ex054oy8/
API reference:
https://api.highcharts.com/highstock/xAxis.ordinal

cytoscape.js redundant edges

cytoscape.js to fails to render the graph if the graph has redundant edges/arcs. Why is this happening?
Example:
https://jsfiddle.net/smiccke/mq5t1rw9/4/
$(function() {
var cy = window.cy = cytoscape({
container: document.getElementById('cy'),
ready: function() {},
style: [{
selector: 'node',
css: {
'content': 'data(name)'
}
}, {
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
}],
elements: {
nodes: [{
data: {
id: 'j',
name: 'Jerry'
}
}, {
data: {
id: 'e',
name: 'Elaine'
}
}, {
data: {
id: 'k',
name: 'Kramer'
}
},
],
edges: [{
data: {
source: 'j',
target: 'e'
}
}, {
data: {
source: 'j',
target: 'k'
}
}
]
}
});
});
The graph works if you remove the two redundant edges from the end (j->e, j->e).
It seems like one redundant edge is ok, but two or more is a problem. Any clues why this is so?
As workaround, any nice short-cuts to remove redundant edges from the graph?

All the edges are there. You've rendered all parallel edges on top of one another, because that's how your edge style is specified.
Use appropriate style for the type of graph you're rendering. E.g., a multigraph should probably use haystack edges with a non-zero haystack radius or bundled bezier edges.
Refer to curve-style etc. in the docs: http://js.cytoscape.org/#style/edge-line

Edit: you mention that cytoscape.js fails to render the graph, but it renders fine for me. Are you truly not seeing any graph at all? If so, what browser are you using, and have you checked your code for errors?
Multiple edges between nodes default along the same path as maxkfranz said. You can set the 'curve-style': 'bezier' which will show all of the edges, or use 'haystack-radius': 1 to keep straight lines (play with values between 0 and 1).
I also noticed you have directed arrows turned on. These won't work with the default 'haystack' curve style, so I would suggest you use 'bezier' if you want to visualize directed edges.

Creating a custom library in javascript for a table

I'm trying to build a custom library for my table, I want to add an option where for each column (th) I may be able to defined their width depends to what I declared. For example I only need to define the width of the first and second column (th) and I have 8 columns, there rest of the column should have width.
My sample snippets inside my table prototype:
init: function (el, options) {
column: {
width: [20, 200, 500]
}
}
I am not really sure how to, since I'm starting to learn javascript. For now I'm just up to adding the width, sooner or later I'll be adding more options inside the column, like color etc.
Additional information: I want pure JavaScript without using other library (jQuery) to my library.

Model-wise you probably want something like:
{
columns: [ {
label: "Foo",
width: 50 // px
}, {
label: "Bar",
width: 100 // px
}, {
label: "Baz",
width: "*"
} ]
}
instead of
{
column_widths: [ 50, 100, "*" ]
column_labels: [ "Foo", "Bar", "Baz" ]
}
The "*" would translate to a column with no defined width so the browser will decide how wide it is. Whether that is desirable or not is up to you.

Dojo HorizontalLinearGauge after dijit .startup()

I am attempting to create a Dojo layout using this code:
require([ 'dijit/registry', 'dijit/layout/BorderContainer', 'dijit/layout/TabContainer', 'dijit/layout/ContentPane', 'dojo/store/Memory', 'gridx/core/model/cache/Sync', 'gridx/Grid', 'dojox/dgauges/components/default/HorizontalLinearGauge', 'dojox/charting/Chart', 'dojo/domReady!' ], function(
registry,
BorderContainer,
TabContainer,
ContentPane,
Memory,
Sync,
Grid,
HorizontalLinearGauge,
Chart
) {
Layout = new BorderContainer({
'design' : 'headline',
'class': 'borderContainerLayout'
}, 'dashboardLayout');
Layout.addChild(new ContentPane({
'id': 'layoutRight',
'region' : 'right',
'content': '<div id="days-between-purchases"></div>',
'splitter': true
}));
Layout.startup();
var hlg = new HorizontalLinearGauge({
'title': 'Purchase Cycle (Average # of days between purchases)',
'srcRefNode': 'abc',
'value': 20,
'class': 'gauge',
'noChange': true,
'width': 150,
'height': 150,
'min': 0,
'max': 100,
}, registry.byId('days-between-purchases'));
hlg.render();
There is more code to add a center, left, etc to the BorderContainer, but the problem I'm getting is "Unable to get property 'nodeType' of undefined or null reference. From the DOM captured at the time, it seems that the layout is not yet rendered into the DOM, so it cannot find registry.byId('days-between-purchases'). I have tried about 10 different ways of trying to put this together to render the layout and gauge during run time and searched heavily for a solution, but have come up with nothing.
What am I doing wrong? Do you know of a tutorial which shows how to fully render a layout with a gauge at runtime? Sample code?
Thanks, in advance.
FYI: I am using the latest version of dojo with this dojoConfig:
var dojoConfig = {
baseUrl : "//ajax.googleapis.com/ajax/libs/dojo/1.9.1/",
async : true,
isDebug : true,
parseOnLoad : false,
//gfxRenderer: "svg,silverlight,vml",
packages : [ {
name : "dojo",
location : "dojo"
}, {
name : "dijit",
location : "dijit"
}, {
name : "dojox",
location : "dojox"
}, {
'name': 'gridx',
'location': '/resources/common/javascript/gridx'
}]
};

Hard to understand what is going on as your sample does not seem to be fully runnable? In particular I don't think gauges have a render() method and you are calling render on it?
In dojox/dgauges/tests/test_all.html you will find a test showing gauges used in a BorderContainer. Maybe it can help.