Radial graph chart - Radial graph chart with expandable nodes

Radial graph chart with expandable nodes

keyboard_arrow_leftGo back
      Open in JSFiddle
      JavaScript
      chart= new NetChart({
          navigation: {
              focusNodeExpansionRadius: 1,
              initialNodes: [
                  "m-1"
              ],
              mode: "focusnodes"
          },
          layout: {
              mode: "radial",
              nodeSpacing: 30
          },
          style: {
              node: {
                  display: "image",
                  lineWidth: 2,
                  lineColor: "#2fc32f",
                  imageCropping: true
              },
              "nodeStyleFunction": function(node) {
      node.image = "https://zoomcharts.com/dvsl/data/net-chart/friend-net/"+node.id+".png";
      node.label = node.data.name;
      }
          },
          container: "demo",
          data: [
              {
                  url: "\/dvsl\/data\/net-chart\/friend-net-tree.json"
              }
          ],
          toolbar: {
              fullscreen: true,
              enabled: true
          },
          interaction: {
              resizing: {
                  enabled: false
              }
          }
      })
      HTML
            <script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>
            <div id="demo"></div>
                        
      Data
      {
         nodes: [
            {
               id: "m-1",
               age: 20,
               name: "Joe",
               loaded: true
            },
            {
               id: "m-2",
               age: 15,
               name: "Fred",
               loaded: true
            },
            {
               id: "m-3",
               age: 16,
               name: "Tom",
               loaded: true
            },
            {
               id: "m-4",
               age: 35,
               name: "Robert",
               loaded: true
            },
            {
               id: "m-5",
               age: 38,
               name: "Mark",
               loaded: true
            },
            {
               id: "m-6",
               age: 42,
               name: "Jason",
               loaded: true
            },
            {
               id: "m-7",
               age: 37,
               name: "Bill",
               loaded: true
            },
            {
               id: "m-8",
               age: 60,
               name: "Andre",
               loaded: true
            },
            {
               id: "m-9",
               age: 63,
               name: "Daniel",
               loaded: true
            },
            {
               id: "m-10",
               age: 17,
               name: "Thomas",
               loaded: true
            },
            {
               id: "m-11",
               age: 21,
               name: "Sergejs",
               loaded: true
            },
            {
               id: "m-12",
               age: 26,
               name: "Bryon",
               loaded: true
            },
            {
               id: "m-13",
               age: 29,
               name: "Toby",
               loaded: true
            },
            {
               id: "f-1",
               age: 28,
               name: "Anna",
               loaded: true
            },
            {
               id: "f-2",
               age: 21,
               name: "Wendy",
               loaded: true
            },
            {
               id: "f-3",
               age: 17,
               name: "Dina",
               loaded: true
            },
            {
               id: "f-4",
               age: 26,
               name: "Cate",
               loaded: true
            },
            {
               id: "f-5",
               age: 31,
               name: "Elisa",
               loaded: true
            },
            {
               id: "f-6",
               age: 34,
               name: "Suzie",
               loaded: true
            },
            {
               id: "f-7",
               age: 26,
               name: "Trixie",
               loaded: true
            },
            {
               id: "f-8",
               age: 37,
               name: "Emily",
               loaded: true
            },
            {
               id: "f-9",
               age: 39,
               name: "Alice",
               loaded: true
            },
            {
               id: "f-10",
               age: 42,
               name: "Violet",
               loaded: true
            },
            {
               id: "f-11",
               age: 32,
               name: "Sara",
               loaded: true
            },
            {
               id: "f-12",
               age: 28,
               name: "Julia",
               loaded: true
            },
            {
               id: "f-13",
               age: 19,
               name: "Ramona",
               loaded: true
            },
            {
               id: "f-14",
               age: 20,
               name: "Flavia",
               loaded: true
            },
            {
               id: "f-15",
               age: 23,
               name: "Liga",
               loaded: true
            },
            {
               id: "f-16",
               age: 27,
               name: "Jessica",
               loaded: true
            },
            {
               id: "f-17",
               age: 40,
               name: "Barbara",
               loaded: true
            },
            {
               id: "f-18",
               age: 45,
               name: "Hanna",
               loaded: true
            },
            {
               id: "f-19",
               age: 53,
               name: "Giselle",
               loaded: true
            },
            {
               id: "f-20",
               age: 27,
               name: "Mia",
               loaded: true
            },
            {
               id: "f-21",
               age: 19,
               name: "Rose",
               loaded: true
            },
            {
               id: "f-23",
               age: 28,
               name: "Judy",
               loaded: true
            },
            {
               id: "f-22",
               age: 32,
               name: "Nikola",
               loaded: true
            },
            {
               id: "f-24",
               age: 34,
               name: "Sofia",
               loaded: true
            },
            {
               id: "f-25",
               age: 37,
               name: "Fatima",
               loaded: true
            },
            {
               id: "f-26",
               age: 44,
               name: "Samantha",
               loaded: true
            },
            {
               id: "f-27",
               age: 23,
               name: "Chelia",
               loaded: true
            },
            {
               id: "f-28",
               age: 18,
               name: "Alexa",
               loaded: true
            },
            {
               id: "f-29",
               age: 21,
               name: "Karla",
               loaded: true
            },
            {
               id: "f-30",
               age: 23,
               name: "Karina",
               loaded: true
            },
            {
               id: "f-31",
               age: 51,
               name: "Patricia",
               loaded: true
            },
            {
               id: "f-32",
               age: 47,
               name: "Anna",
               loaded: true
            },
            {
               id: "f-33",
               age: 38,
               name: "Laura",
               loaded: true
            }
         ],
         links: [
            {
               id: "l01",
               from: "m-1",
               to: "f-1",
               type: "friend"
            },
            {
               id: "l02",
               from: "m-1",
               to: "f-2",
               type: "friend"
            },
            {
               id: "l03",
               from: "m-1",
               to: "f-3",
               type: "friend"
            },
            {
               id: "l04",
               from: "m-1",
               to: "f-4",
               type: "friend"
            },
            {
               id: "l05",
               from: "m-1",
               to: "f-5",
               type: "friend"
            },
            {
               id: "l07",
               from: "f-1",
               to: "m-2",
               type: "collegue"
            },
            {
               id: "l08",
               from: "f-1",
               to: "m-3",
               type: "friend"
            },
            {
               id: "l09",
               from: "f-1",
               to: "m-4",
               type: "friend"
            },
            {
               id: "l10",
               from: "f-1",
               to: "f-6",
               type: "friend"
            },
            {
               id: "l11",
               from: "f-1",
               to: "f-7",
               type: "friend"
            },
            {
               id: "l15",
               from: "f-2",
               to: "f-8",
               type: "friend"
            },
            {
               id: "l16",
               from: "f-2",
               to: "f-9",
               type: "friend"
            },
            {
               id: "l17",
               from: "f-3",
               to: "m-5",
               type: "spouse"
            },
            {
               id: "l18",
               from: "f-3",
               to: "m-6",
               type: "collegue"
            },
            {
               id: "l19",
               from: "f-4",
               to: "f-10",
               type: "friend"
            },
            {
               id: "l20",
               from: "f-4",
               to: "f-11",
               type: "friend"
            },
            {
               id: "l21",
               from: "f-4",
               to: "f-12",
               type: "friend"
            },
            {
               id: "l22",
               from: "f-5",
               to: "f-13",
               type: "collegue"
            },
            {
               id: "l23",
               from: "f-5",
               to: "f-14",
               type: "collegue"
            },
            {
               id: "l24",
               from: "f-5",
               to: "f-15",
               type: "collegue"
            },
            {
               id: "l25",
               from: "f-5",
               to: "m-7",
               type: "collegue"
            },
            {
               id: "l26",
               from: "f-5",
               to: "m-8",
               type: "friend"
            },
            {
               id: "l27",
               from: "m-2",
               to: "f-16",
               type: "friend"
            },
            {
               id: "l28",
               from: "m-2",
               to: "f-17",
               type: "friend"
            },
            {
               id: "l29",
               from: "m-2",
               to: "f-18",
               type: "friend"
            },
            {
               id: "l30",
               from: "m-2",
               to: "f-19",
               type: "friend"
            },
            {
               id: "l31",
               from: "m-2",
               to: "f-20",
               type: "friend"
            },
            {
               id: "l32",
               from: "f-12",
               to: "f-21",
               type: "friend"
            },
            {
               id: "l33",
               from: "f-12",
               to: "f-22",
               type: "friend"
            },
            {
               id: "l34",
               from: "f-21",
               to: "f-23",
               type: "friend"
            },
            {
               id: "l35",
               from: "f-21",
               to: "f-24",
               type: "friend"
            },
            {
               id: "l36",
               from: "f-8",
               to: "f-25",
               type: "friend"
            },
            {
               id: "l37",
               from: "f-8",
               to: "f-26",
               type: "friend"
            },
            {
               id: "l38",
               from: "f-8",
               to: "f-27",
               type: "friend"
            }
         ]
      }
      //
      Mg9!