Render third party JS control in diagramYou 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.
|
This page will automatically be redirected to the sign-in page in 10 seconds.