create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
283 lines (245 loc) • 12.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="GoJS nodes containing simple range charts." />
<meta itemprop="description" content="GoJS nodes containing simple range charts." />
<meta property="og:description" content="GoJS nodes containing simple range charts." />
<meta name="twitter:description" content="GoJS nodes containing simple range charts." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Candlestick Charts or Range Charts in Nodes" />
<meta property="og:title" content="Candlestick Charts or Range Charts in Nodes" />
<meta name="twitter:title" content="Candlestick Charts or Range Charts in Nodes" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/candlestickcharts.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/candlestickcharts.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/candlestickcharts.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/candlestickCharts.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/candlestickCharts.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Candlestick Charts or Range Charts in Nodes | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv');
// the template for each attribute in a node's array of item data
var itemTempl =
new go.Panel('TableRow')
.add(
new go.TextBlock({ column: 0 })
.bind('text'),
new go.Shape({
column: 1,
alignment: go.Spot.Left,
fill: 'slateblue',
stroke: 'darkblue'
})
.bind('geometry', '', produceRange)
);
function produceRange(d) {
var h = 12; // total height for the markers
var w = 3; // half width for the median marker
// using constructors is more efficient than calling go.GraphObject.mak:
return new go.Geometry()
.add(
new go.PathFigure(d.min, h / 2, false)
.add(new go.PathSegment(go.SegmentType.Line, d.max, h / 2))
)
.add(
new go.PathFigure(d.min, 0, false)
.add(new go.PathSegment(go.SegmentType.Line, d.min, h))
)
.add(
new go.PathFigure(d.max, 0, false)
.add(new go.PathSegment(go.SegmentType.Line, d.max, h))
)
.add(
new go.PathFigure(d.val - w, 0)
.add(new go.PathSegment(go.SegmentType.Line, d.val + w, 0))
.add(new go.PathSegment(go.SegmentType.Line, d.val + w, h))
.add(new go.PathSegment(go.SegmentType.Line, d.val - w, h).close())
);
}
myDiagram.nodeTemplate =
new go.Node('Auto')
.add(
new go.Shape({ fill: 'white' }),
new go.Panel('Table', {
margin: 6,
itemTemplate: itemTempl
})
.bind('itemArray', 'items')
);
const nodeDataArray = [
{
items: [
{ text: 'first', min: 10, val: 50, max: 60 },
{ text: 'second', min: 20, val: 70, max: 90 },
{ text: 'third', min: 40, val: 60, max: 110 },
{ text: 'fourth', min: 50, val: 80, max: 130 }
]
}
];
myDiagram.model = new go.GraphLinksModel({
copiesArrays: true,
copiesArrayObjects: true,
nodeDataArray: nodeDataArray
});
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div
id="myDiagramDiv"
style="background-color: white; border: solid 1px black; width: 100%; height: 500px"></div>
</div>
<p>
This is a simple example of a candlestick chart made using a custom <a>Geometry</a>
inside the <a>Panel.itemTemplate</a>.
</p>
<p>
For more sophisticated charts within nodes, see the
<a href="canvases.html">Canvas Charts</a> sample.
</p>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Table Panels</h4>
<p>
The "Table" Panel, <a href="../api/symbols/Panel.html#static-Table" target="api">Panel.Table</a>, arranges objects in rows and columns.
Each object in a Table Panel is put into the cell indexed by the value of <a href="../api/symbols/GraphObject.html#row" target="api">GraphObject.row</a> and <a href="../api/symbols/GraphObject.html#column" target="api">GraphObject.column</a>.
The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have.
More information can be found in the <a href="../intro/tablePanels.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tables">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Item Arrays</h4>
<p>
It is sometimes useful to display a variable number of elements in a node by data binding to a JavaScript Array.
In GoJS, this is simply achieved by binding (or setting) <a href="../api/symbols/Panel.html#itemArray" target="api">Panel.itemArray</a>.
The <a href="../api/symbols/Panel.html" target="api">Panel</a> will create an element in the panel for each value in the Array.
More information can be found in the <a href="../intro/itemArrays.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#itemarrays">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Geometry Path Strings</h4>
<p>
The <b>GoJS</b> <a href="../api/symbols/Geometry.html" target="api">Geometry</a> class controls the "shape" of a <a href="../api/symbols/Shape.html" target="api">Shape</a>,
whereas the <a href="../api/symbols/Shape.html#fill" target="api">Shape.fill</a> and <a href="../api/symbols/Shape.html#stroke" target="api">Shape.stroke</a> and other shape properties control the colors and appearance of the shape.
For common shape figures, there are predefined geometries that can be used by setting <a href="../api/symbols/Shape.html#figure" target="api">Shape.figure</a>.
However one can also define custom geometries.
</p>
<p>
One can construct any Geometry by allocating and initializing a <a href="../api/symbols/Geometry.html" target="api">Geometry</a> of at least one <a href="../api/symbols/PathFigure.html" target="api">PathFigure</a> holding some <a href="../api/symbols/PathSegment.html" target="api">PathSegment</a>s.
But you may find that using the string representation of a Geometry is easier to write and save in a database.
Use the static method <a href="../api/symbols/Geometry.html#parse" target="api">Geometry.parse</a> or the <a href="../api/symbols/Shape.html#geometryString" target="api">Shape.geometryString</a> property to transform a geometry path string into a <a href="../api/symbols/Geometry.html" target="api">Geometry</a> object.
</p>
<p>
More information can be found in the <a href="../intro/geometry.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#geometries">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
</div>
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>