You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
187 lines
6.5 KiB
187 lines
6.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Various Charts in GoJS Nodes</title>
|
|
<meta name="description" content="A diagram where each node contains a chart rendered by Chart.js." />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Copyright 1998-2019 by Northwoods Software Corporation. -->
|
|
|
|
<script src="../release/go.js"></script>
|
|
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>
|
|
<script id="code">
|
|
function init() {
|
|
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
|
|
|
|
var $ = go.GraphObject.make;
|
|
|
|
myDiagram =
|
|
$(go.Diagram, "myDiagramDiv",
|
|
{
|
|
layout: $(go.TreeLayout)
|
|
});
|
|
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Vertical",
|
|
$(go.Panel, "Auto",
|
|
$(go.Shape, { fill: "transparent" },
|
|
new go.Binding("stroke", "color")),
|
|
$(go.Picture,
|
|
{ width: 300, height: 150, portId: "" },
|
|
new go.Binding("element", "datasets", makeLineChart))
|
|
),
|
|
$(go.TextBlock,
|
|
{ margin: 8 },
|
|
new go.Binding("text"))
|
|
);
|
|
|
|
// This Binding conversion function creates a Canvas element for a Picture
|
|
// that has a rendering of a line chart drawn by Chart.js.
|
|
function makeLineChart(datasets, picture) {
|
|
var canvases = document.getElementById("myCanvases");
|
|
|
|
canv = document.createElement("canvas");
|
|
canv.width = canv.style.width = "600px";
|
|
canv.height = canv.style.height = "300px";
|
|
|
|
// apparently Chart.js expects the Canvas to be in a DIV
|
|
var div = document.createElement("div");
|
|
div.style.position = "absolute";
|
|
div.appendChild(canv);
|
|
// add the DIV/Canvas to the DOM, temporarily
|
|
canvases.appendChild(div);
|
|
|
|
var config = { // Chart.js configuration, including the DATASETS data from the model data
|
|
type: "line",
|
|
data: {
|
|
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
|
datasets: datasets
|
|
},
|
|
options: {
|
|
animation: {
|
|
onComplete: function() {
|
|
var canvases = document.getElementById("myCanvases");
|
|
if (canvases) { // remove the Canvas that was in the DOM for rendering
|
|
canvases.removeChild(div);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
new Chart(canv, config);
|
|
|
|
return canv;
|
|
}
|
|
|
|
myDiagram.model = $(go.GraphLinksModel,
|
|
{
|
|
copiesArrays: true,
|
|
copiesArrayObjects: true,
|
|
nodeDataArray:
|
|
[
|
|
{
|
|
key: 1, text: "Alpha",
|
|
datasets: [{
|
|
label: "Random data",
|
|
borderColor: "black",
|
|
data: makeRandomPoints(8, 10)
|
|
}]
|
|
},
|
|
{
|
|
key: 2, text: "Beta",
|
|
datasets: [{
|
|
label: "First dataset",
|
|
fill: false,
|
|
backgroundColor: "red",
|
|
borderColor: "red",
|
|
data: makeRandomPoints(8)
|
|
}, {
|
|
label: "Second dataset",
|
|
fill: false,
|
|
backgroundColor: "blue",
|
|
borderColor: "blue",
|
|
data: makeRandomPoints(8)
|
|
}]
|
|
},
|
|
{
|
|
key: 3, text: "Gamma", color: "green",
|
|
datasets: [{
|
|
label: "some data",
|
|
fill: false,
|
|
backgroundColor: "green",
|
|
borderColor: "green",
|
|
data: makeRandomPoints()
|
|
}]
|
|
}
|
|
],
|
|
linkDataArray: [
|
|
{ from: 1, to: 2 },
|
|
{ from: 1, to: 3 }
|
|
]
|
|
});
|
|
}
|
|
|
|
function makeRandomPoints(num, range) {
|
|
if (!num) num = 20;
|
|
if (!range) range = 100;
|
|
var pts = [];
|
|
for (var i = 0; i < num; i++) {
|
|
pts.push(Math.random() * range);
|
|
}
|
|
return pts;
|
|
}
|
|
|
|
function addNode() {
|
|
myDiagram.model.commit(function(m) {
|
|
var firstnode = myDiagram.nodes.first();
|
|
var color = go.Brush.darken(go.Brush.randomColor());
|
|
var data = {
|
|
text: "Node " + (myDiagram.nodes.count + 1),
|
|
color: color,
|
|
datasets: [{
|
|
label: "some data",
|
|
fill: false,
|
|
backgroundColor: color,
|
|
borderColor: color,
|
|
data: makeRandomPoints()
|
|
}]
|
|
};
|
|
m.addNodeData(data);
|
|
if (firstnode) {
|
|
m.addLinkData({ from: firstnode.key, to: m.getKeyForNodeData(data) });
|
|
// new node starts off at same location as the parent node
|
|
var newnode = myDiagram.findNodeForData(data);
|
|
if (newnode) newnode.location = firstnode.location;
|
|
}
|
|
}, "added chart node");
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload="init()">
|
|
<div id="sample">
|
|
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
|
|
<button onclick="addNode()">Add Chart</button>
|
|
<p>
|
|
This app demonstrates using a popular charting library, <a href="https://chartjs.org">Chart.js</a>,
|
|
for rendering charts within nodes.
|
|
</p>
|
|
<p>
|
|
The data for each chart is stored on the node data in the model. In this case the <code>datasets</code>
|
|
property value has the same properties that are expected by the Chart.js configuration, but you could
|
|
organize the data however you want.
|
|
</p>
|
|
<p>
|
|
The <code>makeLineChart</code> conversion function is used by a <a>Binding</a> on <a>Picture.element</a>
|
|
to generate a Canvas element that can be shown in the node. Most of the implementation of that function
|
|
is specific to Chart.js. The rendering requires the Canvas to be in the HTML DOM. To avoid accumulating
|
|
resources, the configuration of the chart defines an <code>onComplete</code> event handler to
|
|
remove the Canvas element from the DOM. That allows any future removal of the Node from the Diagram not
|
|
to leave an unused Canvas element behind.
|
|
</p>
|
|
<!-- myCanvases is used by makeLineChart, but need not be seen by the user -->
|
|
<div id="myCanvases" style="position:absolute; top:0px; left:0px; width:0px; height:0px; opacity:0"></div>
|
|
</div>
|
|
</body>
|
|
</html> |