Hi,
I am evaluating GO JS.
Facing some issues while using IVR Charts.
- How to add button actions, (ex:on click of button need to open popover etc plz dont give me link to button codes … i have already referred button code no luck…)
2 Aligning the buttons( in my example i have 2 buttons , first need to be aligned to left and the other one to right
3.Tree Expand Button :: how to replace default + and - images with down arrow and up arrow
My Sample Example:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="An Interactive Voice Response diagram showing a call-menu tree with various prompts and responses." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
$(go.Diagram, "myDiagram",
{
allowCopy: false,
initialContentAlignment: go.Spot.Center,
"draggingTool.dragsTree": true,
"commandHandler.deletesTree": false,
layout:
$(go.TreeLayout,
{ angle: 90, arrangement: go.TreeLayout.ArrangementFixedRoots }),
"undoManager.isEnabled": true
});
var bluegrad = $(go.Brush, "Linear", { 0: "white", 1: "skyblue" });
var greengrad = $(go.Brush, "Linear", { 0: "white", 1: "green" });
var redgrad = $(go.Brush, "Linear", { 0: "white", 1: "red" });
var yellowgrad = $(go.Brush, "Linear", { 0: "yellow", 1: "orange" });
var actionTemplate =
$(go.Panel, "Horizontal",
$(go.Shape,
{ width: 12, height: 12 },
new go.Binding("figure"),
new go.Binding("fill")),
$(go.TextBlock,
new go.Binding("text"))
);
myDiagram.nodeTemplate = // the default node template
$(go.Node, "Vertical",
{ selectionObjectName: "BODY" },
$(go.Panel, "Auto",
{ name: "BODY" },
$(go.Shape, "RoundedRectangle",
{ fill: bluegrad , stroke: "#009be0", strokeWidth: 2 , width:250},
new go.Binding("fill"),
new go.Binding("stroke")),
$(go.Panel, "Vertical",
// the title
$(go.TextBlock, { font: "bold 12pt roboto" },new go.Binding("text", "question")),
// the optional list of actions
$(go.Panel, "Table",
{ stretch: go.GraphObject.Horizontal,
visible: true },
$(go.Panel, "Vertical",
{
row: 1, name: "COLLAPSIBLE", // identify to the PanelExpanderButton
padding: 6,
stretch: go.GraphObject.Vertical, // take up whole available width
//background: "", // to distinguish from the node's body
defaultAlignment: go.Spot.Right, // thus no need to specify alignment on each element
itemTemplate: actionTemplate // the Panel created for each item in Panel.itemArray
},
new go.Binding("itemArray", "actions") // bind Panel.itemArray to nodedata.actions
)
)
)
),
$(go.Panel,
{ height: 15 },
$("TreeExpanderButton"))
);
myDiagram.linkTemplate =
$(go.Link, go.Link.Orthogonal,
{ corner: 15 },
$(go.Shape, { toArrow: "Standard",stroke: "#888", strokeWidth: 3 }),
$(go.TextBlock, go.Link.OrientUpright,
{ background: "yellow",
stroke: "#ff6d00",
visible: false, // unless the binding sets it to true for a non-empty string
segmentIndex: -2,
segmentOrientation: go.Link.None },
new go.Binding("text", "answer"),
// hide empty string;
// if the "answer" property is undefined, visible is false due to above default setting
new go.Binding("visible", "answer", function(a) { return (a ? true : false); }))
);
load();
}
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
</script>
</head>
> <body onload="init()">
> <div>
> <div id="myDiagram" style="width:100%; height:700px"></div>
> <!-- <p>
> <button id="SaveButton" onclick="save()">Save</button>
> <button onclick="load()">Load</button>
> </p>-->
> <textarea id="mySavedModel" style="width:100%;height:300px;display:none">
> {
> "class":"go.GraphLinksModel",
> "nodeDataArray":[
> {
> "key":"1",
> "question":"MARYLAND INDUSTRY",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ]
> },
> {
> "key":"2",
> "question":"CHESTERFILED HOLDING",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ]
> },
> {
> "key":"3",
> "question":"FARMER HOLDING",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ],
> "fill":{
> "class":"go.Brush",
> "type":"Linear",
> "colorStops":{
> "0":"orange",
> "1":"yellow"
> }
> }
> },
> {
> "key":"4",
> "question":"HEATON HOLDING",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ],
> "fill":{
> "class":"go.Brush",
> "type":"Linear",
> "colorStops":{
> "0":"yellow",
> "1":"orange"
> }
> }
> },
> {
> "key":"5",
> "question":"FRUIT",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ]
> },
> {
> "key":"7",
> "question":"LODGING",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ]
> },
> {
> "key":"6",
> "question":"WHEAT",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ]
> },
> {
> "key":"8",
> "question":"WHEAT 2",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ]
> },
> {
> "key":"9",
> "question":"WHEAT 3",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ]
> },
> {
> "key":"10",
> "question":"WHEAT 4",
> "actions":[
> {
> "text":"",
> "figure":"ThickCross"
> },
> {
> "text":"",
> "figure":"BpmnEventConditional",
> "fill":"yellow"
> }
> ]
> }
> ],
> "linkDataArray":[
> {
> "from":"1",
> "to":"2",
> "answer":"10%"
> },
> {
> "from":"1",
> "to":"3",
> "answer":"60%"
> },
> {
> "from":"1",
> "to":"4",
> "answer":"30%"
> },
> {
> "from":"3",
> "to":"5",
> "answer":"10%"
> },
> {
> "from":"3",
> "to":"6",
> "answer":"20%"
> },
> {
> "from":"3",
> "to":"7",
> "answer":"70%"
> },
> {
> "from":"6",
> "to":"8",
> "answer":"20%"
> },
> {
> "from":"6",
> "to":"9",
> "answer":"50%"
> },
> {
> "from":"6",
> "to":"10",
> "answer":"30%"
> }
> ]
> }
> </textarea>
> </div>
> </body>
> </html>