Category / Section
How to render third party JS control in our diagram
1 min read
Render third party JS control in diagram
You can able to render third part java-script controls inside the diagram with the help of HTML node. The following code illustrates how to render ejLinearGuage inside the diagram by adding it in the template for HTML node.
HTML
<script id="htmlTemplate" type="text/x-jsrender"> <div id="guage" style="position: fixed"></div> </script> <div id="diagram"></div>
Java-script
var nodes = [{ name: "Html", width: 100, height: 400, offsetX: 250, offsetY: 250,fillColor:"white",borderColor:"#3382c4", type: ej.datavisualization.Diagram.Shapes.Html, templateId: "htmlTemplate" }]; //Initialize diagram control $("#diagram").ejDiagram({ width: "501px", height: "501px", nodes: nodes, pageSettings: { height: 500, width: 500}, }); //Initialize linear guage control $("#guage").ejLinearGauge({ labelColor: "#8c8c8c", width: 100, scales: [{ width: 4, border: { color: "transparent", width: 0 }, showBarPointers: false, showRanges: true, length: 310, position: { x: 52, y: 50 }, markerPointers: [{ value: 50, length: 10, width: 10, backgroundColor: "#4D4D4D", border: { color: "#4D4D4D" } }], labels: [{ font: { size: "11px", fontFamily: "Segoe UI", fontStyle: "bold" }, distanceFromScale: { x: -13 } }], ticks: [{ type: "majorinterval", width: 1, color: "#8c8c8c" }], ranges: [{ endValue: 60, startValue: 0, backgroundColor: "#F6B53F", border: { color: "#F6B53F" }, startWidth: 4, endWidth: 4 }, { endValue: 100, startValue: 60, backgroundColor: "#E94649", border: { color: "#E94649" }, startWidth: 4, endWidth: 4 }] }] });
The following screenshot displays rendering ejLinearGauge inside the diagram control.