Develop Reference

Highcharts. Series have same color after drilldown

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

Angular : Filter object data to build a Highchart Widget with distinct elements attributes

I am loading json data from a webservice and i'm injecting the received data to my list component ,
like the following :
import {Component, OnInit} from '#angular/core';
import 'rxjs/add/operator/map'
import {HttpService} from '../http.service';
import * as $ from 'jquery';
import * as Highcharts from 'highcharts';
#Component({
selector: 'app-list',
templateUrl: './list.component.html',
styleUrls: ['./list.component.css'],
providers: [HttpService]
})
export class ListComponent implements OnInit {
dataItems: any;
nb = 0;
private dataUrl = 'http://localhost:3000/list'; // URL to web api
constructor(private dataServer: HttpService ) {}
ngOnInit() {
this.dataServer.loadDataItems(this.dataUrl).subscribe(
data => {
this.dataItems = data;
console.log(this.dataItems);
for (let i = 0 ; i < this.dataItems.length ; i++) {
// console.log(this.dataItems[i].g);
if (this.dataItems[i].browser === 'Firefox') {
this.nbFirefox++
}
if (this.dataItems[i].browser === 'Chrome') {
this.nbChrome++
}
}
console.log(this.nbFirefox); //print the firefox occurences
console.log(this.nbCHrome); //print the chrome occurences
...
// HIGHCHART WIDGET TO BUILD :
Highcharts.chart('systemsChart', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: this.nb
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
});
}
);
}
}
As you can see in my data , this.dataItems.browser refers to several navigators , which i won't list manually , i want to filter dynamically each browser occurence , and build my Highchart widget , there i'm used to add every dimension with its value
the static manner (bad) :
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
my purpose is to filter my data and build the chart dynmaically without enterning each browser type , since i don't know the complete list
Any ideas ??

It sounds like you need to build your list of of browsers dynamically from the response like this:
browsers: {[key:string]:number} = {};
this.dataServer.loadDataItems(this.dataUrl).subscribe(
data => {
this.dataItems = data;
console.log(this.dataItems);
this.dataItems.forEach(item => {
if (this.browsers[item.browser]) {
this.browsers[item.browser] += 1;
} else {
this.browsers[item.browser] = 1;
}
});
}
});
You'll then have an object with the browser names as keys and the number of occurrences as the value. You can then iterate over the key, value pairs to build your data series for your chart.

Iterating over rows in google charts

I am working on a bar chart, and for some rows I have a particular column which contains link, now on ready event I want to iterate over all the rows to find out what is the link, if link is type a I want to set element color red, otherwise not.
cols: [
{
id: 'first value',
label: 'name',
type: 'string'
},
{
id: 'second value',
label: 'type',
type: 'number'
},
],
rows: [
{
c: [
{
v: 'apple'
},
{
v: 24,
link : 'type A or type B '
},
]
},
]
Any help about this ?

How to remove treeview child node using jquery

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

Sencha touch: nested list with multiple root properties

I'm trying to display the JSON structure shown below in a nested list. Each category has a name and consists of subcategories and leafs.
{
name: 'root',
categories: [
{
name: 'Category 1',
categories: [
{
name: 'Category 1.1',
leafs: [
{ name: 'Leaf 1.1.1', leaf: true },
{ name: 'Leaf 1.1.2', leaf: true }
]
}
],
leafs: [
{ name: 'Leaf 1.1', leaf: true },
{ name: 'Leaf 1.2', leaf: true }
]
},
{
name: 'Category 2',
leafs: [
{ name: 'Leaf 2.1', leaf: true },
{ name: 'Leaf 2.2', leaf: true }
]
}
]
}
The data model is the following:
Ext.define('MyApp.model.Leaf', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'name', type: 'string'}
]
}
});
Ext.define('MyApp.model.Category', {
extend: 'Ext.data.Model',
//requires: ['MyApp.model.Leaf'],
config: {
fields: [
'id', 'name'
],
hasMany: [
{
model: 'MyApp.model.Category',
name: 'categories',
associationKey: 'categories'
},
{
model: 'MyApp.model.Leaf',
name: 'statistics',
associationKey: 'leafs'
}
],
proxy: {
type: 'ajax',
url : 'http://192.168.178.103?data',
reader: {
type: 'json',
rootProperty: 'categories'
}
}
}
});
And here is the nested list:
{
xtype: 'nestedlist',
title: 'Kategorien',
displayField: 'name',
store: Ext.create('Ext.data.TreeStore', {
model: 'MyApp.model.Category'
})
}
The problem is: The nested list shows me all categories und their child categories correctly, but I'm not able to get the leafs displayed. I think the reason is that the identifier of the leaf array is named 'leafs' and therefor is not recognized but i can only give one root property identifier.
Any ideas? Thanks in advance.