I am trying to create a network graph using visjs but the problem is it works for one set of nodes and edges but doesn't work for the other.
The data (nodes and edges) can vary so is there a way I can provide a generic settings?
As in the given example the graph keeps on moving in a circle and takes forever to stabilize. Can anyone please help me fix this issue?
Example: https://jsfiddle.net/aqarain92/eL1qt58r/16/
I am using the following options
const options = {
nodes: {
shape: "dot",
scaling: {
min: 3,
max: 70
}
},
edges: {
arrows: { to: { enabled: false } },
width: 1,
color: {
color: 'gray',
highlight: 'black'
},
smooth: { type: "continuous", roundness: 0 }
},
groups: {
authentic: { color: 'blue' },
inauthentic: { color: 'purple' },
parent: { color: 'black' }
},
layout: { improvedLayout: false },
physics: {
forceAtlas2Based: {
gravitationalConstant: -26,
centralGravity: 0.005,
springLength: 100,
springConstant: 0.04
},
maxVelocity: 146,
solver: "forceAtlas2Based",
timestep: 0.35,
stabilization: { iterations: 200 }
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true,
hideEdgesOnZoom: true
}
};
The same options work for different set of nodes and edges.
If it's not too late, here is the stabilized version of your network:
https://jsfiddle.net/8nowe7c4/
I changed your options a little bit:
const options = {
nodes: {
shape: "dot",
scaling: {
min: 3,
max: 70
}
},
edges: {
arrows: { to: { enabled: false } },
width: 1,
color: {
color: 'gray',
highlight: 'black'
},
smooth: { type: "continuous", roundness: 0 }
},
groups: {
authentic: { color: 'blue' },
inauthentic: { color: 'purple' },
parent: { color: 'black' }
},
layout: { improvedLayout: false },
physics: {
forceAtlas2Based: {
gravitationalConstant: -126,
springLength: 200,
springConstant: 0.01
},
maxVelocity: 50,
solver: "forceAtlas2Based",
timestep: 0.35,
stabilization: true
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true,
hideEdgesOnZoom: true
}
};
You may tune the parameters for your needs.
Related
Anyone here can help me how to change the color of a needle in my speedometer chart? I copied this chart in Apache E-charts.
This is the script:
var dom = document.getElementById('performance-chart');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
series: [
{
type: 'gauge',
progress: {
show: true,
width: 18,
itemStyle: {
borderWidth: 10,
color: '#8D7CDB'
}
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: false
},
splitLine: {
length: 5,
lineStyle: {
width: 1,
color: '#8D7CDB'
}
},
axisLabel: {
distance: 25,
color: '#8D7CDB',
fontSize: 9
},
anchor: {
show: true,
showAbove: true,
size: 25,
color: '#8D7CDB',
itemStyle: {
borderWidth: 8,
borderColor: '#8D7CDB'
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 20,
color: '#8D7CDB',
formatter: "{value}%",
offsetCenter: [0, '70%']
},
data: [
{
value: 5.85
}
]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
The 'needle' is represented by the pointer parameter. Like most of echarts items, you can change the pointer style with itemStyle.
series: [
{
type: 'gauge',
... // the rest of the config
pointer: {
itemStyle: {
color: 'red'
}
},
},
]
I am trying to get both lines on my chart to scale correctly, I have read through the documentation but can't seem to find how to do this.
images
The above image shows what happens to the orange line when a secondary axis is added. It's like they are using the same scale rather than their own.
I currently have the below code:
$(function(e) {
/*-----echart1-----*/
var options = {
chart: {
height: 300,
type: "line",
stacked: false,
toolbar: {
enabled: false
},
dropShadow: {
enabled: true,
opacity: 0.1,
},
},
colors: ["#f99433", '#6759C8'],
dataLabels: {
enabled: false
},
stroke: {
curve: "straight",
width: [3, 3, 0],
dashArray: [0, 4],
lineCap: "round"
},
grid: {
padding: {
left: 0,
right: 0
},
strokeDashArray: 3
},
markers: {
size: 0,
hover: {
size: 0
}
},
series: [{
name: "Price",
type: 'line',
data: ["4.12","4.08","3.98","3.99","3.95","4.01"] }, {
name: "Socials",
type: 'line',
data: ["23","17","6","6","7","7"] }],
yaxis: [
{
title: {
text: "Price",
},
},
{
opposite: true,
title: {
text: "Socials"
}
}
],
xaxis: {
type: "month",
categories: ["2021-12-09 17:01:25","2021-12-09 18:01:29","2021-12-09 19:01:33","2021-12-09 20:01:37","2021-12-09 21:01:42","2021-12-09 22:01:45"],
axisBorder: {
show: false,
color: 'rgba(119, 119, 142, 0.08)',
},
labels: {
style: {
color: '#8492a6',
fontSize: '12px',
},
},
},
fill: {
gradient: {
inverseColors: false,
shade: 'light',
type: "vertical",
opacityFrom: 0.85,
opacityTo: 0.55
}
},
tooltip: {
show:false
},
legend: {
position: "top",
show:true
}
}
var chart = new ApexCharts(document.querySelector("#chartArea"), options);
chart.render();
I'm using angular6 and the office highcharts angular wrapper (https://github.com/highcharts/highcharts-angular) in version 2.4.0.
Everything is working good except the labels that can be placed manually on the chart.
I just don't manage to get them refreshed.
I have a graph that can be filtered through the back-end. When I get the new generated data I update the data in my chartOptions which are used in the html as [options]="chartOptions" for the angular component.
The chartOptions are instanciated from my default class like this: this.chartOptions = new GraphConfigSeqAtteptedVsAchived().chartOptions;
The Class looks like this:
`import * as Highcharts from 'highcharts';
export class GraphConfigSeqAtteptedVsAchived{
public chartOptions: any;
constructor(){
this.chartOptions = {
chart: {
height: 600,
width: 620,
events:{load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
backgroundColor: 'transparent',
},
credits: {
text: 'charname',
href: ''
},
labels: {
},
exporting:{
chartOptions:{
title: {
text:'not set',
style:{
color: '#000000'
},
margin: 0
}
}
},
tooltip: {
enabled: false
},
xAxis: {
min: -10,
max: 0,
width: 535,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
yAxis: {
min: -10,
max: 0,
title: {
text: 'Rainfall (mm)',
style: {
fontWeight: "bold",
color: '#000000'
}
},
reversed: true,
tickInterval: 1
},
title: {
text: ' as',
margin: 0,
style:{
color: 'transparent'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 90,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1,
navigation: {
enabled: false
}
},
plotOptions: {
scatter: {
stickyTracking: false,
allowPointSelect: true,
marker: {
radius: 3,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '',
hideDelay: 500
},
symbol: "circle",
events: {
mouseOut: function() {
this.chart.myTooltip.hide();
this.chart.myTooltip.options.enabled = false;
},
mouseOver: function() {
if(this.halo) {
this.halo.attr({
'class': 'highcharts-tracker'
}).toFront();
}
},
click: function(event) {
this.chart.myTooltip.options.enabled = true;
this.chart.myTooltip.refresh(event.point, event);
}
}
},
line:{
events: {
legendItemClick: function () {
return false;
}
}
},
series:{
allowPointSelect: true
}
},
series: [{
type: 'line',
data: [[30, 30], [-30, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 1
}
},
showInLegend: false,
color: "rgba(0, 0, 0, 0.6)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29.5], [-29.5, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29.5, 30], [-30, -29.5]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(125, 162, 159, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[29, 30], [-30, -29]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
},{
type: 'line',
data: [[30, 29], [-29, -30]],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
showInLegend: false,
dashStyle: 'ShortDash',
color: "rgba(197, 144, 161, 0.35)",
enableMouseTracking: false
}]
}
}
}`
The generated data is in the typescript dynamically added and all of that works just fine. Everything is refreshed after I set the updateFlag for [(update)]="updateGraph". The axis titles are also fine.
The only thing that's not refreshed for me are the labels i dynamically added to the chart like this:
let labelTotalNumberOfEyes = {
html : this.translate.instant('GRAPHS.TOTAL_NUMBER_OF_EYES') + ': ' + (scatterSeries.data.length + scatterSeriesRetreatment.data.length),
style : {
left : '330px',
top : '368px',
fontSize : '14px',
backgroundColor: '#FFFFFF',
borderWidth: 1,
}
}
this.chartOptions.labels.items.push(labelTotalNumberOfEyes);
Does someone have any idea what I'm might doing wrong? I don't see any further option than just setting this update flag and it works fine for everything but the labels.
Please let me know if you're missing any information.
Thanks in advance.
This issue is actually a Highcharts bug. I've reported it here: https://github.com/highcharts/highcharts/issues/10429.
As a workaround, you can use Highcharts.SVGRenderer to add a custom label and store reference to it in your component. Next, when updating, call attr() method on the label (Highcharts.SVGElement) and set new options. Check demo and code posted below.
Add a label on chart callback:
constructor() {
const self = this;
this.chartCallback = chart => {
self.chart = chart;
self.label = chart.renderer
.text("test", 100, 100)
.css({
fill: "#555",
fontSize: 16
})
.add()
.toFront();
};
}
call attr() on the label while updating:
update_chart() {
const self = this,
chart = this.chart;
chart.showLoading();
setTimeout(() => {
chart.hideLoading();
self.chartOptions.series = [
{
data: [10, 25, 15],
name: "updatedSerieName"
}
];
self.chartOptions.yAxis.title.text = "updatedData";
self.label
.attr({
text: "test1",
x: 150,
y: 120
})
.css({
fill: "red",
fontSize: 20
});
self.updateFromInput = true;
}, 2000);
}
Demo:
https://codesandbox.io/s/8zo0yvqqwj
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr
Hi I am trying gauge meter in script. I get this code from echarts.com and now I am including this one with asp. In console it doesn't show any error but it is not showing?
Hope I will get good answer from you friends.
<script>
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
timeTicket = setInterval(function() {
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
}, 2000)
clearInterval(timeTicket);
And the html code is
<canvas id="mychart"></canvas>
I don't know which version of eCharts you are trying to use, but for my example I'm using a 4.1.
I think you forgot the init method (echarts.init(...)) that is shown in eCharts documentation, at least in your code here you are not using it, and when I put it in my example, it works.
Also, I don't know why you are using a setInterval(), but for now, I removed it.
I also choose to use a div instead of a canvas to render the gauge, it appears better in my screen.
The options object I let the same as you.
Check below to see it working.
option = {
series: [{
name: 'Machine Time',
type: 'gauge',
splitNumber: 10,
axisLine: {
lineStyle: {
color: [
[0.2, '#228b22'],
[0.8, '#48b'],
[1, '#ff4500']
],
width: 8
}
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: 'auto'
}
},
axisLabel: {
textStyle: {
color: 'auto'
}
},
splitLine: {
show: true,
length: 30,
lineStyle: {
color: 'auto'
}
},
pointer: {
width: 5
},
detail: {
formatter: '{value}%',
textStyle: {
color: 'auto',
fontWeight: 'bolder'
}
},
data: [{
value: 50,
name: 'Process'
}]
}]
};
let myChart = echarts.init(document.getElementById('mychart'));
option.series[0].data[0].value = 72;
myChart.setOption(option, true);
#mychart{
width: 350px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.min.js"></script>
<div id="mychart"></div>
In your div, set the width and heigh values.
Good day dear colleagues.
The problem is that the names of each bar are not where you need. The bar is located on the right and left of its name. But I need that title was above each bar, rather than his left. How this can be done, I am sure that this is not as difficult as it seem^
Here is my code:
$('header').jqChart({
title: { text: title],
fillStyle: '#85b1de'
},
legend: { visible: false },
border: { visible: false },
axes: [
{
strokeStyle: 'transparent',
visible: false,
majorGridLines: { visible: false },
lineWidth: 0,
location: 'bottom',
majorTickMarks: { visible: false },
labels: {
visible : false
}
},
{
strokeStyle: 'black',
visible: false,
majorGridLines: { visible: false },
lineWidth: 0,
location: 'left',
majorTickMarks: { visible: false },
labels: {
visible : true,
fillStyle: '#85b1de',
font: '16px sans-serif'
}
}
],
animation: { duration: 0.5 },
series: [
{
pointWidth: 0.5,
type: 'bar',
fillStyles: color,
data: [
[label[0], data['a']],
[label[1], data['b']],
[label[2], data['c']],
[label[3], data['d']]
],
labels: {
stringFormat: ' %s %%',
valueType: 'dataValue',
font: '14px sans-serif',
fillStyle: 'white'
}
}
]
});
it seems like there is some CSS defining things (and not included in your code) :)
I would check it for:
- display:inline (and remove it, or change it to block),
- width of parent container can be set to "too low",...
Can we see the whole thing (html+css+js) / fiddle / ...