im working on network graph highcharts
each node should have a new child but it should not merge with another subnode if its has the same name, like child1, child2, child3, pointing to subchild1,for each individual we should have the individual nodes pointing to each one
fiddle link -> https://jsfiddle.net/GnanaSagar/36k2wmry/1/
You can also use the formatter function for data labels:
series: [{
dataLabels: {
enabled: true,
format: undefined,
formatter: function() {
if (this.key.indexOf('subchild') >= 0) {
return 'subchild1'
}
return this.key
}
},
data: [...,
{
from: 'child1',
to: 'subchild1'
},
{
from: 'child2',
to: 'subchild2'
},
{
from: 'child3',
to: 'subchild3'
}
]
}]
Live demo: https://jsfiddle.net/BlackLabel/n4gd8v3r/
API: https://api.highcharts.com/highcharts/series.networkgraph.dataLabels.formatter
So apparently series.networkgraph.nodes works.
series: [{
dataLabels: {
enabled: true
},
data: [
{from: 'parent', to: 'child1'},
{from: 'parent', to: 'child2'},
{from: 'parent', to: 'child3'},
{from: 'child1', to: 'subchild1.1'},
{from: 'child2', to: 'subchild2.1'},
{from: 'child3', to: 'subchild3.1'}
],
nodes: [{
id: 'subchild1.1',
name: 'subchild1'
},
{
id: 'subchild2.1',
name: 'subchild1'
},
{
id: 'subchild3.1',
name: 'subchild1'
}
]
}]
jsFiddle: https://jsfiddle.net/9g42nqza/ (I have to comment out some of your original code because it was throwing error).
Related
I am trying to parse a piechart out of an json-object which I get by calling an API. I want to use a specific key-value pair for rendering of the piechart itself.
I then want to use some other key-value results in my tooltips.
Imagine the following scenario which works so far.
const labels = [
'Januar',
'Februar'
];
const data = {
labels: labels,
datasets: [{
label: 'My First dataset',
backgroundColor: ["#0074D9", "#FF4136"],
data: [req('url').current_price.eur, req('url').current_price.eur],
}]
const config = {
type: 'pie',
data: data,
options: {
responsive: true,
plugins: {
tooltip: {
enabled: true,
usePointStyle: true,
callbacks: {
title: function(tooltipItem, data) {
console.log(tooltipItem);
return "Index " + tooltipItem[0].label;
},
label: (context) => {
console.log('context', context);
return 'test'
}
},
},
},
},
};
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<html>
<meta charset="UTF-8">
<div>
<canvas id="myChart"></canvas>
</div>
</html>
So what I'm trying, is calling the API in data without the keys, so that I can access the object in context and use some of this values in my label for example.
I found the
parsing: {
yAxisKey: 'current_price.eur'
}
config but this isn't working for me if I change everything according to my idea, so that it renders the current_price.eur values
For pie/doughnut charts you need to specify the key option since it doesnt use any axes. So if you make your object like (together with latest version, 3.6.0) this it should work:
parsing: {
key: 'current_price.eur'
}
Example of object pie chart:
var options = {
type: 'doughnut',
data: {
datasets: [{
label: '# of Votes',
data: [{
id: 'parent1',
key: 55
}, {
id: 'parent2',
key: 55
}, {
id: 'paren3',
key: 30
}],
},
{
label: '# of Points',
data: [{
id: 'child1',
key: 55
}, {
id: 'child2',
key: 55
}, {
id: 'child3',
key: 30
}, {
id: 'child4',
key: 55
}, {
id: 'child5',
key: 55
}, {
id: 'child6',
key: 30
}],
}
]
},
options: {
plugins: {
tooltip: {
callbacks: {
label: (ttItem) => (`${ttItem.raw.id}: ${ttItem.raw.key}`)
}
}
},
parsing: {
key: 'key'
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>
I want to show the user about which nodes are some sort of type in network graph of Highchart JS.
For example, the red node would be about "car" and the black node would be about "person".
How can I implement such a legend in Highchart Js?
Here is my codepen.
Highcharts.seriesTypes.networkgraph.prototype.drawLegendSymbol = Highcharts.LegendSymbolMixin.drawRectangle;
Highcharts.chart('container', {
chart: {
type: 'networkgraph'
},
plotOptions: {
networkgraph: {
keys: ['from', 'to']
}
},
legend: {
enabled: true
},
series: [{
showInLegend: true,
data: [
['A', 'B'],
['C','D'],
['E','F']
],
nodes:[{
id:'A',
color:'#ff1000'
},{
id:'B',
color:'#222222'
},
{
id:'C',
color:'#ff1000'
},
{
id:'D',
color:'#222222'
},
{
id:'E',
color:'#ff1000'
},
{
id:'F',
color:'#222222'
},]
}]
});
Thank you in advance.
Have you tried adding the dataLabel to series property and add a name to your nodes.
{
id: "A",
color: "#ff1000",
name: "car" <--------- name property
},
Something like this:
series: {
dataLabels: {
linkFormat: '',
enabled: true,
format: "{point.name}",
crop: false,
defer: false,
useHtml: true,
},
}
Full example:
https://codepen.io/tiagotedsky/pen/zYZYOLR
I have some problems with highcharts. So, after i do drilldown series have same color, they extend it from column which was clicked, official highchart's jsfidle perfectly demonstrate this behaviour (https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-drilldown)
In my config object i have array of colours, but it uses it only for initial view and after drilldown everything have the same color. I tried this option, but it didn't help:
chartOptions.plotOptions.column = {
colorByPoint: true
};
Also had an idea to manually pick random color from array on each drilldown, but in this case i have problem with legend's item colours.
There must be some option to achieve it, but maybe i missing something.
Would be appreciate for any advice!)
You can achieve it by defining colorByPoint: true property for each series. Like this:
Highcharts.chart('container', {
...
drilldown: {
series: [
{
colorByPoint: true,
name: "Chrome",
id: "Chrome",
data: [
...
]
},
{
name: "Firefox",
id: "Firefox",
colorByPoint: true,
data: [
...
]
},
{
name: "Internet Explorer",
id: "Internet Explorer",
colorByPoint: true,
data: [
...
]
},
{
name: "Safari",
id: "Safari",
colorByPoint: true,
data: [
...
]
},
{
name: "Edge",
id: "Edge",
colorByPoint: true,
data: [
...
]
},
{
name: "Opera",
id: "Opera",
colorByPoint: true,
data: [
...
]
}
]
}
});
Check this fiddle - https://jsfiddle.net/30o1genk/
UPD: When you add series dynamically after a drilldown, your drilldown event handler should looks like this:
events: {
drilldown: function(e) {
const point = e.point;
const series = {
colorByPoint: true,
data: [{name: "test", y: 10}, {name: "test2", y: 20}],
};
this.addSingleSeriesAsDrilldown(point, series, false)
this.applyDrilldown();
}
}
Check this fiddle - https://jsfiddle.net/1fpdckn5/ for the dynamic case.
You can set a wanted color for each drilldown series.
Demo: https://jsfiddle.net/BlackLabel/1vbyp53w/
drilldown: {
series: [{
name: "Chrome",
id: "Chrome",
color: 'orange',
data: [
...
]
},
{
name: "Firefox",
color: 'red',
id: "Firefox",
data: [
...
]
},
{
name: "Internet Explorer",
id: "Internet Explorer",
color: 'blue',
data: [
...
]
},
]
}
API: https://api.highcharts.com/highcharts/drilldown.series
I want to modify this jsfiddle code.
I don't want to get data from json/xml, but I want to put it manually like this:
this is a part of my code I didn't continued cause I lost it and it's complicated
{
name: 'Air pressure',
color: Highcharts.getOptions().colors[2],
data: [1020.5, 0, 0, 0, 0, 1009.5, 1015.5, 1010.5, 1001.5, 1001.5],
marker: {
enabled: false
},
shadow: false,
tooltip: {
valueSuffix: ' hPa'
},
dashStyle: 'shortdot',
yAxis: 2
}
For all things I want to get just 5 values for all data.
Datetime, Precipitation, Temperature, Air pressure ....
This is an example of data entered manually, not from a server or somethings.
At the end, I want to do this to know where I can put my data because I have it but I don't know where I can put it.
At the end of JavaScript code you can find function(xml).
Inside it you can write console.log(xml) and then check in console (Developer Tools) what is the structure of the data.
If you do want to change the code of the demo, then you would have to write your data in the same format.
You can look in code to see what exactly is needed, because not all data is used. Based on that you can disable ajax call and create data object manually.
Example: http://jsfiddle.net/qLynjzds/
Example of how data can look to work in the demo (2 points):
var xml = {
credit: {
link: {
'#attributes': {
url: "http://www.yr.no/place/United_Kingdom/England/London/" //link for credits
}
}
},
location: {
country: "Country",
name: "City"
},
forecast: {
tabular: {
time: [{
'#attributes': {
from: "2015-05-28T14:00:00",
to: "2015-05-28T15:00:00"
},
symbol: {
'#attributes': {
'var': "01d",
name: "Clear sky"
},
},
temperature: {
'#attributes': {
value: "17"
},
},
precipitation: {
'#attributes': {
value: "0"
},
},
windDirection: {
'#attributes': {
deg: "252.6",
name: "West"
},
},
windSpeed: {
'#attributes': {
mps: "16.6",
name: "Strong breeze"
},
},
pressure: {
'#attributes': {
value: "1013.8"
},
}
}, {
'#attributes': {
from: "2015-05-28T15:00:00",
to: "2015-05-28T16:00:00"
},
symbol: {
'#attributes': {
'var': "01d",
name: "Clear sky"
},
},
temperature: {
'#attributes': {
value: "15"
},
},
precipitation: {
'#attributes': {
value: "1"
},
},
windDirection: {
'#attributes': {
deg: "252.6",
name: "West"
},
},
windSpeed: {
'#attributes': {
mps: "16.6",
name: "Strong breeze"
},
},
pressure: {
'#attributes': {
value: "1010.8"
},
}
}]
}
}
};
I have a treeview like below, i need to remove one child from the list based on the user. Can any one tell me how to remove the child from the treeview.
var treedata = [
{
label: 'Floor', type: 'Country',
children: [
{
label: 'Bangalore', type: 'Location',
children: [{ label: 'Technopolis', type: 'facility', id: 1 }, { label: 'Ecity Tower-2', type: 'facility', id: 2 }, { label: 'Bagmane', type: 'facility', id: 3 }, { label: 'Cyber Park', type: 'facility', id: 4 }]
},
{
label: 'Hyderabad', type: 'Location',
children: [{ label: 'Hitech City ', type: 'facility', id: 5 }, { label: 'Cyber City', type: 'facility', id: 6 }]
},
{
label: 'Chennai', type: 'Location',
children: [{ label: 'XXX', type: 'facility', id: 7 }]
},
{
label: 'Mumbai', type: 'facility', id: 8
}
]
},
{
label: 'Role Administration', type: 'Role',
children: [{ label: 'Assign Role', type: 'Role', id: 1 }]
},
{
label: 'Hoteling Admin', type: 'Hoteling',
children: [{ label: 'Hoteling', type: 'Hoteling', id: 1 }]
}
];
The above is my jquery tree data. I want to remove the role administration if the user is a normal user by checking the user role.
Anyone help me how to do using jquery.
Thanks
You can use $.grep() to filter the array to a new array based on whatever conditions you want.
var userRole='normal';
if( userRole === 'normal'){
treeview = $.grep(treeview, function(item){
return item.label != 'Role Administration';
});
}
grep() API docs