javascript - Declaration 2d array containing multiple objects for graph plugin? -
i using igdoughnutchart web-page, want graph shows following hierarchy
- source of attack (inside)
- login abuse
- dos
- spyware
- worm
- outside attackers
- spying
- social attacks
the current object array looks (also demo)
var data = [ { "attacksource": 43, "attacktype": 60, "at":"dos","label": "inisde" }, { "attacksource": 29, "attacktype": 40, "at":"login abuse","label": "outside" } ];
i want change following:- (also shown above)
where have parent , child values in 2d array above code transform as
var data = [ [{"attacksource": 43,"label":"inside"}], [ {"attacktype": 13,"label":"dos"}, {"attacktype": 13,"label":"virus"}... ] ];
i'm not sure if have initialized / assigned 2d using objects correctly.i appreciate if can @ code, , let me know if i'm doing right.
update
the jsbin example illustrate requirements new code. e.g "label":"virus"
hardcoded, in real code (which cannot on jsbin) values db.
i don't think chart trying use support want do. being said there of hack make work:
$(function () { var data = [ { "label": "inside", "attacks": 8 }, { "label": "outside", "attacks": 6 }, // inside { "label": "dos", vector: "inside", "dummyvalue": 6 }, { "label": "siem", detect: "dos", "detectvalue": 3 }, { "label": "user", detect: "dos", "detectvalue": 3 }, { "label": "worm", vector: "inside", "dummyvalue": 2 }, { "label": "siem", detect: "worm", "detectvalue": 1 }, { "label": "user", detect: "worm", "detectvalue": 1 }, // outside { "label": "spying", vector: "outside", "dummyvalue": 3 }, { "label": "siem", detect: "spying", "detectvalue": 1.5 }, { "label": "user", detect: "spying", "detectvalue": 1.5 }, { "label": "social", vector: "outside", "dummyvalue": 3}, { "label": "siem", detect: "social", "detectvalue": 1.5 }, { "label": "user", detect: "social", "detectvalue": 1.5 }, ]; $("#chart").igdoughnutchart({ width: "100%", height: "550px", innerextent: 6, series: [ { name: "attack type", labelmemberpath: "label", valuememberpath: "attacks", datasource: data, labelsposition: "center" }, { name: "attack vector", labelmemberpath: "label", valuememberpath: "dummyvalue", datasource: data, labelsposition: "center" }, { name: "detect vector", labelmemberpath: "label", valuememberpath: "detectvalue", datasource: data, labelsposition: "center" } ] }); });
the order of data
, series
arrays matter (not completely, partially). here jsfiddle demonstrates this. disclaimer: i'm not saying work, makes big assumption igniteui parse , display data in same way.
also i'm not familiar library bet there way customize colors of each section of chart. if make color function returns color based on vector
property.
some alternatives:
- highcharts
- d3 - preferred approach. browse gallery, there few examples apply here.
Comments
Post a Comment