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.

visual example

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

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -