I'm trying to plot a quite huge network (i.e., ~1k nodes and ~1k edges) with vis.js 4.21.0. Here is my options object:
var options = {
autoResize: true,
height: '400px',
clickToUse: false,
layout: {
hierarchical: {
direction: 'UD',
sortMethod: 'directed',
}
},
physics: {
stabilization: false,
barnesHut: {
gravitationalConstant: -80000,
springConstant: 0.001,
springLength: 200
}
},
nodes: {
shape: 'dot',
size: 20,
font: {
size: 15,
color: '#ffffff'
},
borderWidth: 2
},
groups: groups,
};
The problem is that it takes up to 4 minutes to render (see this simplified JSFiddle). In this example, much huger than the mine, the network is rendered almost instantaneously.
How can I speed up the rendering process of my chart?
Wait, your fiddle doesn't have all the options you mention in your post. For instance, the network is not shown at all before several minutes passes, but if you add physics: { stabilization: false } it is shown at once (although it is not static at that point and slowly relaxes). Moreover, adding barnesHut: { ... } to physics and adjusting springConstant changes the speed of relaxation.
But here's a tricky part: compare the unrelaxed tree (with stabilization: false) that you have with vis.js 4.21.0 and the one that you get with 4.19.1! It looks much nicer:
than this mess:
This was reported earlier and probably deserves more digging but what I can say for sure is 4.19.1 makes the initial tree much nicer to see stuff even before getting relaxed. With this version you can even go physcis: false and get this:
I'd consider using this approach although it has drawbacks:
the version with physics suffers from that to some extent too, so...
Related
Hi I am using АpexChart but I have problem setting up xaxis. The picture below is from another chart, but I'm looking for the effect it has. Note the long straight line, this means there is no data for the specific period.
How do I set up a АpexChart so I can display similar data
var options = {
series: [{
name: "Level",
data: [30,45,50,60,70,91,125]
}],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: true
}
},
dataLabels: {
enabled: true
},
stroke: {
curve: 'straight'
},
title: {
text: 'Battery',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
},
},
xaxis: {
categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
The chart we see on your screenshot has been made with Highcharts, right? I know that you can do something similar with amCharts or Chart.js. But this feature is not available in ApexCharts yet. With ApexCharts, you will get blanks (see demo) if you have null values in your data.
Take a look at this issue and this pull request on GitHub.
Comment of the library author (2019), from the issue:
This has been proposed, but not worked upon yet.
Comment of the library author (2021), from the PR:
Update: This PR doesn't solve the issue the way we wanted and doesn't cover multiple use-cases.
Please bear with us. There might be a new PR with a completely different implementation.
Is there a way to side scroll (I mean, on x axis) eCharts graph bar? I have a huge amount of data that needs to be displayed, so it cannot "fit" only browsers width, because the whole graph will be very hard to read (Every column loses on width).
My echarts version: ^4.0.4
My chart
You can add the attribute called dataZoom inside the object called options then pass this obj to the .setOption.
dataZoom: [
{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
I saw this example but i don't know what you want precisely.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=mix-zoom-on-value
I found this example that can help you:
Bar Chart with scrolling options
Here I have referred the open source javascript graph library for your slider chart requirement.
Plotly.js
I have found a need to make sure Highcharts is only using 1 yaxis at a time, Basically I typically have about 5-10 series but many do not have the same yaxis measurement.
For instance with air pollution PM2.5 is measured by ug/m3 and most others are by ppm, but there is also ppb.
I want to by default show only ppb series, but if you select a series (from the highcharts legend) that uses for instance ug/m3 then all ppb series will be hidden.
I am having some difficulty defining it so looking through the docs I just can't seem to find any connection to my issue to find a solution, and I really want to avoid trying to force Highcharts to do it when it seems like something that would most likely be supported in some fashion.
What I am mainly looking for is how this might be termed by highcharts that might direct me to the correct portion of the docs, or if not supported by highcharts what I might be able to do to achieve this without over complicating the setup (click events on the legend items, ect).
You can achieve this by using series.events.legendItemClick and hide all other series when enabling one. Useful option is also yAxis.showEmpty which will hide all yAxis elements if extremes are not set.
Demo: http://jsfiddle.net/BlackLabel/aqh5htqt/
Highcharts.chart('container', {
yAxis: [{
showEmpty: false
}, {
showEmpty: false
}, {
showEmpty: false
}],
plotOptions: {
series: {
events: {
legendItemClick: function() {
if (!this.visible) {
// Hide all others
Highcharts.each(this.chart.series, function(series) {
series.hide();
});
} else {
// Prevent hiding the only visible series
return false;
}
}
}
}
},
series: [{
data: [1, 2, 3]
}, {
data: [100, 400, 5000],
visible: false,
yAxis: 1
}, {
data: [5, 10, 15],
visible: false,
yAxis: 2
}]
});
I am struggling with a HighChart/HighStock problem. I have created a JSFiddle to explain my problem! When the user uses a drill down on one of the bar colums, the y-axis may shrink which causes the x-axis to get higher. This is no problem, but when the user goes back to the overview through a drill up, the previous x-axis length is implemented for the bar columns, while the x-axis gets lower. I can't find anything in the documentation to help my problem and I haven't found a similar problem.
The drilldown which I am using:
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#D2D2D2'
},
select: {
stroke: '#039',
fill: '#D2D2D2'
}
}
}
},
series: [{"data":......}]
}
Could someone please help me adjust the code so that on the drill-up event the bar columns are re-configured to reach the x-axis
It looks like it is a bug with drilldown animation which appears only when a navigator is enabled. Reported here.
Should work without the animation:
drilldown: {
animation: false,
example: http://jsfiddle.net/3e3xqv7e/47/
In general, I think a navigator was not meant to work with drilldowns, so making it work correctly might be tricky. An option series.showInLegend works, though, except the min/max of the navigator are changed after drillup - so you need to set it properly.
drillup: function (e) {
this.navigator.xAxis.setExtremes(0, 4, true, false);
/* this.navigator.xAxis.update({
min: 0,
max: 4
}, true);*/
}
example: http://jsfiddle.net/c1nqpz7d/2/
My flotchart is rendering incorrectly, in two target browsers (ie8 and firefox) this graph renders with grid lines in front of the data
In Chrome and Safari no lines appear at all, which is the desired outcome. In Internet Explorer 8 the graphs are rendered as VML and I was able to isolate the grid lines as vml objects, unfortunately the CSS involved in hiding those objects would be tricky while limited to CSS2 and then that would not work for firefox, where the elements of the graph are not rendered as separate elements.
Here is the graph code http://jsfiddle.net/gamm/t3Vqh/2/
var dataset = [overdue, open, completed];
var options = {
series: {
stack: true,
bars: {
show: true
}
},
bars: {
align: "center",
horizontal: false,
barWidth: .8,
lineWidth: 0
},
grid: {
borderWidth: 0,
borderColor: null,
backgroundColor: null,
labelMargin: 10,
minBorderMargin: 10
},
yaxis: {
tickColor: "FFFFFF"
},
xaxis: {
tickColor: "FFFFFF",
ticks: [
[1, "Public Works"],
[2, "Sanitation"],
[3, "Mayor"],
[4, "L&I"],
[5, "Police"]
]
},
legend: {
position: 'ne',
show: true
}
};
$.plot($("#example-section15 #flotcontainer"), dataset, options);
There are two things happening here:
It looks like Flot has always drawn grid lines above series fills. This has never been considered a bug because the lines are by default very light, and the effect is much less noticeable when the bars (or lines, etc.) have borders.
The reason why you have black lines in IE is because "FFFFFF" isn't a valid color-spec. If you instead use "#ffffff" (or "transparent") then IE looks the same as the other browsers, which are more forgiving. This isn't restricted to IE8 or Excanvas; even IE10 chokes on that format.
The former might be worth submitting as an issue on Github, since it is arguably a bug.