How to load EJ1 diagram in EJ2 diagram

18 Nov 20182 minutes to read

To load EJ1 JSON data in an Vue Diagram, follow these steps.

  1. Import and inject the EJ1SerializationModule as shown in the following code example.
<template>
    <div id="app">
        <ejs-diagram ref="diagramObject" id="diagram"  :width='width' :height='height'></ejs-diagram>
    </div>
</template>
<script setup>
const width = "100%";
const height = "350px";
</script>
<template>
    <div id="app">
        <ejs-diagram ref="diagramObject" id="diagram"  :width='width' :height='height'></ejs-diagram>
    </div>
</template>
<script>
export default {
    name: 'App',
    data() {
        return {
            width: "100%",
            height: "350px",
        }
    },
}
</script>
  1. Load the EJ1 JSON data using the diagram loadDiagram method and set the second parameter to true.
<script setup>
import { onMounted } from "vue";

onMounted(function() {
    let diagram = document.getElementById("diagram").ej2_instances[0];
    let ej1Data = {"JSONData"};  //Replace JSONData with your EJ1 JSON data
    //Load the EJ1 JSON and pass a boolean value as true.
    diagram.loadDiagram(ej1Data, true);
})

</script>
<script>
export default {
    mounted: function() {
        let diagram = document.getElementById("diagram").ej2_instances[0];
        let ej1Data = {"JSONData"};  //Replace JSONData with your EJ1 JSON data
        //Load the EJ1 JSON and pass a boolean value as true.
        diagram.loadDiagram(ej1Data, true);
    }
}
</script>