How to plot multiple diagrams on the same page

Question

Hello,I have successfully plotted 1 diagram with nodes & connectors using json data.Now I want to plot multiple diagrams according to the json data on the same page.json data will be something like below mentioned for multiple diagrams canvas_diagarm:any[] = [ { "canvas_id":"1", "diagram_details": [ { "xaxis": 0, "yaxis": 0, "width": 500, "length": 1000, "endx":"", "endy":"", "shape_type": "input" }, { "xaxis": 0, "yaxis": 0, "width": 500, "length": 1000, "endx":"", "endy":"", "shape_type": "input" } ] }, { "canvas_id":"2", "diagram_details": [ { "xaxis": 0, "yaxis": 0, "width": 500, "length": 1000, "endx":"", "endy":"", "shape_type": "input" }, { "xaxis": 0, "yaxis": 0, "width": 500, "length": 1000, "endx":"", "endy":"", "shape_type": "input" } ] }]Below is my html code which is working fine for single diagram & attached is my component.ts Attachment: dashboard.component_3ffea9fc.zip

Aravind Ravi · Accepted Answer

Hi Monika, 
 
We have created a sample to show the node dimensions i.e. offsetX, offsetY, height and width on the node using the annotations. By using multiple annotations we can able to show the multiple text on the node.  In the given sample shape.xaxis, yaxis m height and width are number. The annotations content property is a string type. Only string type want to declare in the content property. So convert the annotation x axis and y axis value as string and set them to the annotation content property. To show multiple annotations in node set different offset for the annotation through annotation offset property so that one annotation does not get overlap with other. Please find the below code snippet for how to set multiple annotations for node 
 




GetRectangle() { 
    var _me = this; 
    var num = 1; 
    _me.nodes=[]; 
    this.rectangles.map(function (shapes) { 
      if (shapes.shape_type == "input") { 
        _me.bgcolor = 'burlywood'; 
        _me.bordercolor = 'black'; 
      } 
      else if (shapes.shape_type == "parts") { 
        _me.bgcolor = '#c0c0c0'; 
        _me.bordercolor = '#9a9a9a'; 
      } 
      else if (shapes.shape_type == "remnant") { 
        _me.bgcolor = '#ffffff'; 
        _me.bordercolor = 'aqua'; 
      } 
      else if(shapes.shape_type=="scrap") { 
        _me.bgcolor = 'black'; 
        _me.bordercolor = 'red'; 
      } 
      _me.nodes.push({ 
        id: 'shape' + num, 
        offsetX: shapes.xaxis, 
        offsetY: shapes.yaxis, 
        width: shapes.length, 
        height: shapes.width, 
        style: { 
          fill: _me.bgcolor, 
          strokeColor: _me.bordercolor 
        }, 
        annotations: [ 
          { 
            content: "parts", offset: {x: 0.5, y: 0.1 } 
          }, 
          { 
            content: (shapes.xaxis).toString(), offset: {x: 0.5, y: 0.3 } 
          }, 
          { 
            content: (shapes.yaxis).toString(), offset: {x: 0.5, y: 0.5 } 
          }, 
          { 
            content: (shapes.length).toString(), offset: {x: 0.5, y: 0.7 } 
          }, 
          { 
            content: (shapes.width).toString(), offset: {x: 0.5, y: 0.9 } 
          } 
        ], 
        pivot: {x:0,y:0} 
      }); 
      num++; 
    })     
  } 
 
Please refer below screen shot that how multiple annotations render on node. 
 
  
 
We have attached a sample for your reference. Please find the sample in below link 
 
Sample: https://stackblitz.com/edit/angular-c6dmfq-h4oswv 
 
 For more information about multiple annotations please refer to below UG documentation link 
 
UG link: https://ej2.syncfusion.com/angular/documentation/diagram/labels/#multiple-annotations 
 
Regards 
Aravind Ravi

Aravind Ravi · Answer

Hi Monika, We have created a sample to show multiple diagrams in a single page. For second diagram also you can use the same node and connectors collection that you have used for the first diagram. The Id and instance for the both diagram should be different. In the diagram Id should be unique do not use the same Id for the two diagram. Please find the below code snippet for how to render multiple diagrams in single page.

Please find the below screen shot that how multiple diagrams render in single page #Diagram 1 #Diagram 2 We have attached a sample for your reference. Please find the sample in below link Sample: https://stackblitz.com/edit/angular-c6dmfq-gaoy3y Regards Aravind Ravi

Monika Suresh Gujar · Answer

Hi Monika, We have created a sample to show multiple diagrams in a single page. For second diagram also you can use the same node and connectors collection that you have used for the first diagram. The Id and instance for the both diagram should be different. In the diagram Id should be unique do not use the same Id for the two diagram. Please find the below code snippet for how to render multiple diagrams in single page.

Please find the below screen shot that how multiple diagrams render in single page #Diagram 1 #Diagram 2 We have attached a sample for your reference. Please find the sample in below link Sample: https://stackblitz.com/edit/angular-c6dmfq-gaoy3y Regards Aravind Ravi I am done with multiple diagrams.Now I am facing another issue, where I want some details on node like, it's height & width i.e. DimensionsHelp me with thisThank YouFor your reference:shapes.xaxis and shapes.yaxis is not working like the way shapes.shape_type is working// shapes GetRectangle() { var _me = this; var num = 1; _me.nodes=[]; this.rectangles.map(function (shapes) { if (shapes.shape_type == "parts") { _me.bgcolor = '#c0c0c0'; _me.bordercolor = '#9a9a9a'; } else if (shapes.shape_type == "remnant") { _me.bgcolor = '#ffffff'; _me.bordercolor = 'aqua'; } else if(shapes.shape_type=="scrap") { _me.bgcolor = 'red'; _me.bordercolor = 'blue'; } else if (shapes.shape_type == "input") { _me.bgcolor = 'burlywood'; _me.bordercolor = 'black'; } _me.nodes.push({ id: 'shape' + num, offsetX: shapes.xaxis, offsetY: shapes.yaxis, width: shapes.length, height: shapes.width, style: { fill: _me.bgcolor, strokeColor: _me.bordercolor }, annotations: [ { content: shapes.shape_type } ], pivot: {x:0,y:0} }); num++; }) }

Monika Suresh Gujar · Answer

WOWworked for me... Thank you so much

Aravind Ravi · Answer

Hi Monika,  

Thanks for the update.  

Regards 
Aravind Ravi