UNPKG

gojs/intro/graduatedPanels.html

Version:
1<!DOCTYPE html>
2<html lang="en">
<head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>

7<link rel="stylesheet" href="../assets/css/style.css"/> 
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. -->    <title> GoJS Graduated Panels -- Northwoods Software </title>
  <link rel="stylesheet" href="../assets/css/prism.css"  />
</head>
<script>
  
  window.diagrams = [];
  window.goCode = function(pre, w, h, parentid, animation) {
    window.diagrams.push([pre, w, h, parentid, animation]);
  }
</script>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
  <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
    <div class="md:pl-4">
      <a class="text-white hover:text-white no-underline hover:no-underline
      font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
        <h1 class="mb-0 p-1 ">GoJS</h1>
      </a>
    </div>
    <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
      <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
        <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
        <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
      </svg>
    </button>
    <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
      <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
        <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
         target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
      </ul>
    </div>
  </div>
  <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
  
  <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
    
  <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
    <div class="flex-shrink-0 px-8 py-4">
      <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
        <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
          <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
          <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>
    <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="index.html">Basics</a>
<a href="buildingObjects.html">Building Parts</a>
<a href="usingModels.html">Using Models</a>
<a href="dataBinding.html">Data Binding</a>
<a href="react.html">GoJS with React</a>
<a href="angular.html">GoJS with Angular</a>
<a href="textBlocks.html">TextBlocks</a>
<a href="shapes.html">Shapes</a>
<a href="pictures.html">Pictures</a>
<a href="panels.html">Panels</a>
<a href="tablePanels.html">Table Panels</a>
<a href="brush.html">Brushes</a>
<a href="sizing.html">Sizing Objects</a>
<a href="itemArrays.html">Item Arrays</a>
<a href="changedEvents.html">Changed Events</a>
<a href="transactions.html">Transactions</a>
<a href="viewport.html">Coordinates</a>
<a href="initialView.html">Initial View</a>
<a href="collections.html">Collections</a>
<a href="links.html">Links</a>
<a href="linkLabels.html">Link Labels</a>
<a href="connectionPoints.html">Link Points</a>
<a href="ports.html">Ports</a>
<a href="nodes.html">Nodes</a>
<a href="debugging.html">Debugging</a>
<a href="layouts.html">Layouts</a>
<a href="trees.html">Trees</a>
<a href="subtrees.html">SubTrees</a>
<a href="groups.html">Groups</a>
<a href="subgraphs.html">SubGraphs</a>
<a href="sizedGroups.html">Sized Groups</a>
<a href="selection.html">Selection</a>
<a href="highlighting.html">Highlighting</a>
<a href="animation.html">Animation</a>
<a href="toolTips.html">ToolTips</a>
<a href="contextmenus.html">Context Menus</a>
<a href="events.html">Diagram Events</a>
<a href="tools.html">Tools</a>
<a href="commands.html">Commands</a>
<a href="permissions.html">Permissions</a>
<a href="validation.html">Validation</a>
<a href="HTMLInteraction.html">HTML Interaction</a>
<a href="layers.html">Layers &amp; Z-ordering</a>
<a href="palette.html">Palette</a>
<a href="overview.html">Overview</a>
<a href="resizing.html">Resizing Diagrams</a>
<a href="replacingDeleting.html">Replacing and Deleting</a>
<a href="buttons.html">Buttons</a>
<a href="templateMaps.html">Template Maps</a>
<a href="legends.html">Legends and Titles</a>
<a href="extensions.html">Extensions</a>
<a href="geometry.html">Geometry Strings</a>
<a href="grids.html">Grid Patterns</a>
<a href="graduatedPanels.html">Graduated Panels</a>
<a href="makingImages.html">Diagram Images</a>
<a href="makingSVG.html">Diagram SVG</a>
<a href="printing.html">Printing</a>
<a href="serverSideImages.html">Server-side Images</a>
<a href="nodeScript.html">GoJS in Node.js</a>
<a href="testing.html">Testing</a>
<a href="storage.html">Storage</a>
<a href="performance.html">Performance</a>
<a href="source.html">Building from Source</a>
<a href="platforms.html">Platforms</a>
<a href="deployment.html">Deployment</a>
    </nav>
  </div>      
    <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133<h1>Graduated Panels</h1>
134<p>
The "Graduated" Panel, <a>Panel,Graduated</a>,
draws regular tick marks and/or text labels along the stroke of the main child <a>Shape</a>.
Graduated Panels can be considered scales showing a range of values.
138</p>
139<p>
For examples of Graduated Panels see the <a href="../samples/timeline.html">Timeline</a>,
<a href="../samples/thermometer.html">Thermometer</a>,
<a href="../samples/instrumentGauge.html">Instrument Gauge</a>,
and <a href="../samples/ruleredDiagram.html">Rulered Diagram</a> samples.
144</p>
145
146<h2 id="SimpleGraduatedPanels">Simple Graduated Panels</h2>
147<p>
Similar to Auto and Spot Panels, Graduated Panels should have two or more elements in them.
Elements must be either <a>Shape</a>s or <a>TextBlock</a>s.
The main Shape element may be declared by setting <a>GraphObject.isPanelMain</a> to true;
but no such setting is needed if it is the very first element of the panel.
Shapes and TextBlocks, other than the main Shape, basically act as templates for the drawing of each tick mark and label.
153</p>
154<p>
Tick mark <a>Shape</a>s within a Graduated Panel should have a measured size, either by setting a <a>GraphObject.desiredSize</a>
(or <code>width</code> and <code>height</code> properties), or by setting its <a>Shape.geometry</a>.
For basic tick marks drawn normal to the main Shape's path,
it is easiest to use a simple vertical line geometry string: <code>M0 0 V10</code>.
The height of the geometry will determine the length of the tick mark.
160</p>
161
162<pre class="lang-js" id="graduatedSimple"><code>
163diagram.add(
// all Parts are Panels
$(go.Part, go.Panel.Graduated,  // or "Graduated"
  $(go.Shape, { geometryString: "M0 0 H400" }),  // the main shape, a horizontal line
  $(go.Shape, { geometryString: "M0 0 V10" })  // a tick mark, a vertical line
));
169</code></pre>
170<script>goCode("graduatedSimple", 500, 100)</script>
171
172<p>
Any shape, including custom geometries, can be used as the main Shape or as a tick mark Shape of a Graduated Panel.
174</p>
175<pre class="lang-js" id="graduatedCircle"><code>
176diagram.add(
$(go.Part, "Graduated",
  { background: "transparent" }, // make panel pickable
  // main shape is a whole circle
  $(go.Shape, "Circle",
    { fill: null, desiredSize: new go.Size(150, 150) }),
  // tick shape is a double line
  $(go.Shape, { geometryString: "M0 0 V10 M3 0 V10" })
));
185</code></pre>
186<script>goCode("graduatedCircle", 200, 200)</script>
187
188<p>
Graduated Panels can also be labeled with TextBlocks denoting the values along the scale.
Often, these will be offset from the main stroke using <a>GraphObject.segmentOffset</a>, as one would
with Link labels, so that the text does not overlap the main stroke.
More detail on placing labels is in the "Appearance" section below.
193</p>
194<pre class="lang-js" id="graduatedLabels"><code>
195diagram.add(
$(go.Part, "Graduated",
  { background: "transparent" }, // make panel pickable
  $(go.Shape, { geometryString: "M0 0 H400" }),  // the main shape
  $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })  // tick labels
));
201</code></pre>
202<script>goCode("graduatedLabels", 500, 100)</script>
203
204<h2 id="GraduatedPanelProperties">Graduated Panel Properties</h2>
205<p>
There are a number of properties that govern the appearance of tick marks and labels.
207</p>
208
209<h3 id="TickMarkValues">Tick Mark Values</h3>
210<p>
The graduated values of a Graduated Panel will range on a linear scale from the start of the
main shape's stroke to the end of the stroke.
The values and frequency of tick marks and labels are governed by a few properties:
214</p>
215<ul>
<li><a>Panel.graduatedMin</a>
  - the minimum value represented on the scale, at the beginning of the stroke of the main shape</li>
<li><a>Panel.graduatedMax</a>
  - the maximum value represented on the scale, at the end of the main shape</li>
<li><a>Panel.graduatedTickBase</a>
  - the value of the "origin" tick mark, the first tick mark if it is the same as graduatedMin</li>
<li><a>Panel.graduatedTickUnit</a>
  - tick marks are positioned at multiples of the graduatedTickUnit added to the graduatedTickBase</li>
<li><a>Shape.interval</a>/<a>TextBlock.interval</a>
  - a multiple of the graduatedTickUnit at which to draw a tick or label</li>
226</ul>
227<p>
Graduated Panels can have multiple Shapes as tick marks and multiple TextBlocks as labels,
with the interval property controlling at what multiples of the <code>graduatedTickUnit</code> they are drawn.
In many of the examples below, larger ticks are drawn at intervals of 4; some have an interval of 5.
231</p>
232
233<p>
A <code>graduatedMin</code> of <code>0</code>, <code>graduatedMax</code> of <code>77</code>,
<code>graduatedTickBase</code> of <code>0</code>, <code>graduatedTickUnit</code> of <code>2.5</code>,
and intervals of 4 result in a scale that might appear as:
237</p>
238<pre class="lang-js" id="graduatedVals1"><code>
239diagram.add(
$(go.Part, "Graduated",
  {
    graduatedMin: 0, graduatedMax: 77,
    graduatedTickBase: 0, graduatedTickUnit: 2.5,
    background: "transparent"
  },
  $(go.Shape, { geometryString: "M0 0 H400" }),  // the main Shape
  // a short, frequent tick mark
  $(go.Shape, { geometryString: "M0 0 V5" }),
  // a longer tick mark every four ticks
  $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),
  // text label only every four ticks, with a vertical offset
  $(go.TextBlock, { segmentOffset: new go.Point(0, 12), interval: 4 })
));
254</code></pre>
255<script>goCode("graduatedVals1", 500, 100)</script>
256
257<p>
Changing <code>graduatedMin</code> to <code>-23</code> results in:
259</p>
260<pre class="lang-js" id="graduatedVals2"><code>
261diagram.add(
$(go.Part, "Graduated",
  {
    graduatedMin: -23, graduatedMax: 77,
    graduatedTickBase: 0, graduatedTickUnit: 2.5,
    background: "transparent"
  },
  $(go.Shape, { geometryString: "M0 0 H400" }),  // the main Shape
  $(go.Shape, { geometryString: "M0 0 V5" }),  // short tick mark
  $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),  // long tick mark
  $(go.TextBlock, { segmentOffset: new go.Point(0, 12), interval: 4 })  // labels
));
273</code></pre>
274<script>goCode("graduatedVals2", 500, 100)</script>
275<p>
The range from the min to the max value (<a>Panel.graduatedRange</a>) has increased from 77 to 100,
so the tick marks are closer to each other for the same length main path.
278</p>
279
280<p>
Changing <code>graduatedTickBase</code> to <code>1.2</code> results in:
282</p>
283<pre class="lang-js" id="graduatedVals3"><code>
284diagram.add(
$(go.Part, "Graduated",
  {
    graduatedMin: -23, graduatedMax: 77,
    graduatedTickBase: 1.2, graduatedTickUnit: 2.5,
    background: "transparent"
  },
  $(go.Shape, { geometryString: "M0 0 H400" }),  // the main Shape
  $(go.Shape, { geometryString: "M0 0 V5" }),  // short tick mark
  $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),  // long tick mark
  $(go.TextBlock, { segmentOffset: new go.Point(0, 12), interval: 4 })  // labels
));
296</code></pre>
297<script>goCode("graduatedVals3", 500, 100)</script>
298<p>
Basically, the "origin" for the scale has shifted slightly, even though the end values remain the same.
There will always be a tick mark at the <code>graduatedTickBase</code>
if that value is within the range of the graduated scale.
302</p>
303
304<p>
Doubling the <code>graduatedTickUnit</code> to <code>5</code> results in:
306</p>
307<pre class="lang-js" id="graduatedVals4"><code>
308diagram.add(
$(go.Part, "Graduated",
  {
    graduatedMin: -23, graduatedMax: 77,
    graduatedTickBase: 1.2, graduatedTickUnit: 5,
    background: "transparent"
  },
  $(go.Shape, { geometryString: "M0 0 H400" }),
  $(go.Shape, { geometryString: "M0 0 V5" }),  // short tick mark
  $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),  // long tick mark
  $(go.TextBlock, { segmentOffset: new go.Point(0, 12), interval: 4 })  // labels
));
320</code></pre>
321<script>goCode("graduatedVals4", 500, 100)</script>
322<p>
Doubling the tick unit halves the number of ticks for the same length path, but again the end values are unchanged.
324</p>
325
326<p>
Changing <code>graduatedTickBase</code> back to <code>0</code> and the intervals to <code>5</code> results in:
328</p>
329<pre class="lang-js" id="graduatedVals5"><code>
330diagram.add(
$(go.Part, "Graduated",
  {
    graduatedMin: -23, graduatedMax: 77,
    graduatedTickBase: 0, graduatedTickUnit: 5,
    background: "transparent"
  },
  $(go.Shape, { geometryString: "M0 0 H400" }),
  $(go.Shape, { geometryString: "M0 0 V5" }),  // short tick mark
  $(go.Shape, { geometryString: "M0 0 V10", interval: 5 }),  // long tick mark
  $(go.TextBlock, { interval: 5, segmentOffset: new go.Point(0, 12) })
));
342</code></pre>
343<script>goCode("graduatedVals5", 500, 100)</script>
344
345<p>
You can have more than one label.  For example, small text that is more frequent than larger text:
347</p>
348<pre class="lang-js" id="graduated2Labels"><code>
349diagram.add(
$(go.Part, "Graduated",
  {
    graduatedMin: 0, graduatedMax: 140,
    graduatedTickBase: 0, graduatedTickUnit: 5,
    background: "transparent"
  },
  $(go.Shape, { geometryString: "M0 0 H450" }),  // longer line
  $(go.Shape, { geometryString: "M0 0 V5" }),
  $(go.Shape, { geometryString: "M0 0 V10", interval: 4 }),
  // minor label
  $(go.TextBlock, { interval: 2, segmentOffset: new go.Point(0, 8),
                    stroke: "blue", font: "7pt sans-serif" }),
  // major label
  $(go.TextBlock, { interval: 4, segmentOffset: new go.Point(0, 12),
                    stroke: "red", font: "bold 12pt sans-serif" })
));
366</code></pre>
367<script>goCode("graduated2Labels", 500, 100)</script>
368
369<h3 id="TickMarkAppearance">Tick Mark Appearance</h3>
370<p>
The appearance of tick marks relative to the main shape path is controlled by a few properties:
372</p>
373<ul>
<li><a>Shape.graduatedStart</a>/<a>TextBlock.graduatedStart</a>
  - the fractional distance along the main stroke at which drawing this tick or label may begin</li>
<li><a>Shape.graduatedEnd</a>/<a>TextBlock.graduatedEnd</a>
  - the fractional distance along the main stroke beyond which it will not draw this tick or label</li>
<li><a>GraphObject.alignmentFocus</a>
  - the spot on the tick or label to align with the calculated path points, defaulting to the top center</li>
<li><a>GraphObject.segmentOffset</a>
  - how much to offset a TextBlock label from the main stroke -- the Y value specifies distance from the path</li>
<li><a>GraphObject.segmentOrientation</a>
  - how to rotate a TextBlock label relative to the main stroke</li>
384</ul>
385<p>
Only TextBlock labels should set the <a>GraphObject.segmentOffset</a> or <a>GraphObject.segmentOrientation</a>.
They have no impact on the main shape or tick shapes.
These GraphObject properties are also commonly used to place Link labels,
as seen in the <a href="linkLabels.html">Introduction page on Link labels</a>,
and are used by Graduated Panels in a similar manner.
391</p>
392
393<p>
Setting <code>graduatedStart</code> and/or <code>graduatedEnd</code> allows for drawing ticks only along part of the main stroke:
395</p>
396<pre class="lang-js" id="graduatedAppr1"><code>
397diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 H400" }),
  $(go.Shape, { geometryString: "M0 0 V10", graduatedStart: .25, graduatedEnd: .75 })
));
402</code></pre>
403<script>goCode("graduatedAppr1", 500, 100)</script>
404<p>
In this case, tick marks are now only drawn in the middle half of the main shape.
406</p>
407
408<p>
Setting <code>alignmentFocus</code> to <code>go.Spot.Bottom</code> will cause the ticks to have their bottoms aligned to the main stroke:
410</p>
411<pre class="lang-js" id="graduatedAppr2"><code>
412diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 H400" }),
  $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom })
));
417</code></pre>
418<script>goCode("graduatedAppr2", 500, 100)</script>
419
420<p>
Setting <code>alignmentFocus</code> to <code>go.Spot.Center</code> will cause the ticks to be centered across the path:
422</p>
423<pre class="lang-js" id="graduatedAppr21"><code>
424diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 H400" }),
  $(go.Shape, { geometryString: "M0 0 V10 M0 20 V30", alignmentFocus: go.Spot.Center })
));
429</code></pre>
430<script>goCode("graduatedAppr21", 500, 100)</script>
431<p>
Note the gap in the geometry of the shape.
433</p>
434
435<p>
Setting <code>segmentOffset</code> for labels can make them more readable near tick marks:
437</p>
438<pre class="lang-js" id="graduatedAppr3"><code>
439diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 H400" }),
  $(go.Shape, { geometryString: "M0 0 V10" }),
  // offset to display below ticks
  $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
));
446</code></pre>
447<script>goCode("graduatedAppr3", 500, 100)</script>
448
449<p>
Setting <code>segmentOrientation</code> for labels can alter the angle at which they are drawn relative to the main stroke:
451</p>
452<pre class="lang-js" id="graduatedAppr4"><code>
453diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 H400" }),
  $(go.Shape, { geometryString: "M0 0 V10" }),
  // change the angle of the text
  $(go.TextBlock, { segmentOrientation: go.Link.OrientMinus90 })
));
460</code></pre>
461<script>goCode("graduatedAppr4", 500, 100)</script>
462<p>
Note that the top-center point of each label is exactly at the point along the path for that value.
464</p>
465
466<p>
Combining these two properties and re-aligning the tick marks:
468</p>
469<pre class="lang-js" id="graduatedAppr5"><code>
470diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 H400" }),
  $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
  $(go.TextBlock,
    {
      alignmentFocus: go.Spot.Left,
      segmentOffset: new go.Point(0, -12),
      segmentOrientation: go.Link.OrientMinus90
    }
  )
));
482</code></pre>
483<script>goCode("graduatedAppr5", 500, 100)</script>
484<p>
These properties behave similarly to Link labels, in that they respond to the direction of the main stroke.
For example, let us turn the main shape so that it goes diagonally down from the top-left to the bottom-right.
487</p>
488<pre class="lang-js" id="graduatedApprDiag"><code>
489diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 L285 285" }),
  $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
  $(go.TextBlock,
    {
      alignmentFocus: go.Spot.Left,
      segmentOffset: new go.Point(0, -12),
      segmentOrientation: go.Link.OrientMinus90
    }
  )
));
501</code></pre>
502<script>goCode("graduatedApprDiag", 350, 350)</script>
503
504<p>
Now let us try a curve:
506</p>
507<pre class="lang-js" id="graduatedApprCurve"><code>
508diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, "Curve1", { desiredSize: new go.Size(285, 285) }),
  $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
  $(go.TextBlock,
    {
      alignmentFocus: go.Spot.Left,
      segmentOffset: new go.Point(0, -12),
      segmentOrientation: go.Link.OrientMinus90
    }
  )
));
520</code></pre>
521<script>goCode("graduatedApprCurve", 350, 350)</script>
522
523<p>
Here's another commonplace configuration:
525</p>
526<pre class="lang-js" id="graduatedApprCurve2"><code>
527diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 A120 120 0 0 1 200 0" }),  // an arc
  $(go.Shape, { geometryString: "M0 0 V10" }),
  $(go.TextBlock,
    {
      segmentOffset: new go.Point(0, 12),
      segmentOrientation: go.Link.OrientAlong
    }
  )
));
538</code></pre>
539<script>goCode("graduatedApprCurve2", 350, 100)</script>
540
541<p>
For vertical lines, it's not necessary to rotate the text:
543</p>
544<pre class="lang-js" id="graduatedApprVert"><code>
545diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 V400" }),
  $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Bottom }),
  $(go.TextBlock,
    {
      alignmentFocus: go.Spot.Left,
      segmentOffset: new go.Point(0, -12)
    }
  )
));
556</code></pre>
557<script>goCode("graduatedApprVert", 100, 450)</script>
558
559<p>
We can also go from bottom to top:
561</p>
562<pre class="lang-js" id="graduatedApprVertUp"><code>
563diagram.add(
$(go.Part, "Graduated",
  $(go.Shape, { geometryString: "M0 0 V-400" }),
  $(go.Shape, { geometryString: "M0 0 V10", alignmentFocus: go.Spot.Top }),
  $(go.TextBlock,
    {
      alignmentFocus: go.Spot.Left,
      segmentOffset: new go.Point(0, 12)
    }
  )
));
574</code></pre>
575<script>goCode("graduatedApprVertUp", 100, 450)</script>
576<p>
Note how the Geometry goes from 0,0 to 0,-400, because negative Y values are higher on the screen/page.
Note how because everything is relative to the path, the tick marks and labels would be on the opposite side,
so we have also changed the <code>alignmentFocus</code> and <code>segmentOffset</code> to have opposite values
from the previous example.
581</p>
582
583<p>
Lastly, any angle specified on a label will be respected if orientation is one of <a>Link.OrientNone</a>,
<a>Link.OrientAlong</a>, or <a>Link.OrientUpright</a>. In the case of Along and Upright, the angle will be
added to the slope of the main path at the point of the TextBlock.
587</p>
588<pre class="lang-js" id="graduatedApprTxtAngle"><code>
diagram.add(
  $(go.Part, "Spot",
    $(go.Panel, "Graduated",
      $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
      $(go.Shape, { geometryString: "M0 0 V10" }),
      $(go.TextBlock,
        {
          interval: 5,
          angle: 45,
          segmentOffset: new go.Point(0, 12)
        }
      )
    ),
    $(go.TextBlock, "None")
  ));
604
diagram.add(
  $(go.Part, "Spot",
    $(go.Panel, "Graduated",
      $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
      $(go.Shape, { geometryString: "M0 0 V10" }),
      $(go.TextBlock,
        {
          interval: 5,
          angle: 45,
          segmentOrientation: go.Link.OrientAlong,
          segmentOffset: new go.Point(0, 12)
        }
      )
    ),
    $(go.TextBlock, "Along")
  ));
621
diagram.add(
  $(go.Part, "Spot",
    $(go.Panel, "Graduated",
      $(go.Shape, { geometryString: "M0 0 L100 0 100 100 L0 100" }),
      $(go.Shape, { geometryString: "M0 0 V10" }),
      $(go.TextBlock,
        {
          interval: 5,
          angle: 45,
          segmentOrientation: go.Link.OrientUpright,
          segmentOffset: new go.Point(0, 12)
        }
      )
    ),
    $(go.TextBlock, "Upright")
  ));
</code></pre>
<script>goCode("graduatedApprTxtAngle", 300, 300)</script>
<p>
  With None, the labels are always 45 degrees. With Along, the labels are always 45 degrees more than the slope.
  With Upright, the labels are always 45 degrees more than the slope, then rotated upright if necessary.
</p>
644
645<h3 id="FunctionalAppearanceProperties">Functional Appearance Properties</h3>
646<p>
There are also some functional properties allowing for further customization of the appearance of ticks and labels.
648</p>
649<ul>
<li><a>Shape.graduatedSkip</a>/<a>TextBlock.graduatedSkip</a>
  - an optional function which returns true for values that should be skipped while drawing a particular tick or label</li>
<li><a>TextBlock.graduatedFunction</a>
  - an optional function which converts a value to a string to be displayed at that value -- if not defined, the default returns the value rounded to at most two decimals</li>
654</ul>
655
656<p>
Setting <code>graduatedSkip</code> allows for skipping ticks where the supplied function returns true:
658</p>
659<pre class="lang-js" id="graduatedSkip"><code>
diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape,
      { // skip drawing tick at 30
        graduatedSkip: function (v) { return v === 30; },
        geometryString: "M0 0 V10"
      }
    ),
    $(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
  ));
671</code></pre>
672<script>goCode("graduatedSkip", 500, 100)</script>
673
674<p>
Setting <code>graduatedFunction</code> allows for changing the way labels are displayed:
676</p>
677<pre class="lang-js" id="graduatedFunc"><code>
diagram.add(
  $(go.Part, "Graduated",
    $(go.Shape, { geometryString: "M0 0 H400" }),
    $(go.Shape, { geometryString: "M0 0 V10" }),
    $(go.TextBlock,
      { // always display two decimals
        graduatedFunction: function(val) { return val.toFixed(2); },
        segmentOffset: new go.Point(0, 12)
      }
    )
  ));
689</code></pre>
690<script>goCode("graduatedFunc", 500, 100)</script>
691
692<h2 id="GraduatedValueComputations">Graduated Value Computations</h2>
693<p>
There are some methods available for computing points along graduated paths:
695</p>
696<ul>
<li><a>Panel.graduatedPointForValue</a>
  - returns the Point along the main shape at some value between graduatedMin and graduatedMax in Panel coordinates</li>
<li><a>Panel.graduatedValueForPoint</a>
  - returns the value along the main shape nearest a given Point</li>
701</ul>
702<p>
In the following example, the red marker uses a <a>Part.dragComputation</a> function that
keeps it along the path of the Graduated Panel using the above functions.
705</p>
706
707<pre class="lang-js" id="graduatedPointValueCalc"><code>
708var gauge =
$(go.Part, "Auto",
  { location: new go.Point(10, 20) },
  $(go.Shape, { fill: "white" }),
  $(go.Panel, "Graduated",
    { name: "SCALE", margin: 10 },
    $(go.Shape, { name: "PATH", geometryString: "M0 0 A120 120 0 0 1 200 0" }),
    $(go.Shape, { geometryString: "M0 0 V10" }),
    $(go.TextBlock,
      { segmentOffset: new go.Point(0, 12), segmentOrientation: go.Link.OrientAlong })
  )
);
720diagram.add(gauge);
721
722var marker =
$(go.Part, "Spot",
  { locationSpot: go.Spot.Center, selectionAdorned: false },
  $(go.Shape, "Circle", { fill: "transparent", strokeWidth: 0, cursor: "pointer" }),
  $(go.Shape, "Circle", { fill: "red", strokeWidth: 0, width: 8, height: 8 }),
  {
    dragComputation: function(node, pt) {
      var scale = gauge.findObject("SCALE");
      var loc = scale.getLocalPoint(pt);
      var val = scale.graduatedValueForPoint(loc);
      var gpt = scale.graduatedPointForValue(val);
      return scale.getDocumentPoint(gpt);
    }
  }
);
737diagram.add(marker);
738
739// once everything has been positioned, give the marker its location
740diagram.addDiagramListener("InitialLayoutCompleted", function(e) {
var scale = gauge.findObject("SCALE");
var gpt = scale.graduatedPointForValue(0);
marker.location = scale.getDocumentPoint(gpt);
744});
745</code></pre>
746<script>goCode("graduatedPointValueCalc", 350, 200)</script>
747<p>
As you drag the red circle, you will notice that it always stays on the main shape's stroke.
The computation converts the point to the panel's coordinate system, computes the closest graduated value,
computes the point on the shape geometry for that value, and finally converts it back to document coordinates
for use as the marker's location.
752</p>
753<p>
Note that for demonstration purposes this example has the marker being a separate Part from the "gauge" Part.
A real gauge would have the marker be part of the gauge as an indicator of a particular value, optionally draggable by the user.
See some examples at <a href="../samples/controlGauges.html" target="_blank">Instrument Controls: Gauges and Meters</a>.
757</p>
758
759<h2 id="OtherConsiderations">Other Considerations</h2>
760<p>
By default, only the main shape of a Graduated Panel can be used to pick the panel.
As with Grid Panels, a Graduated Panel should have a non-null <code>background</code> if the entire panel needs to be pickable.
You cannot set or bind the <a>Panel.itemArray</a> of a Graduated Panel.
You can set and bind properties on tick <a>Shape</a>s and <a>TextBlock</a> labels
as you can with any other <a>GraphObject</a> properties.
766</p>
767<pre class="lang-js" id="graduatedBackground"><code>
768diagram.add(
$(go.Part, "Graduated",  // or "Graduated"
  { background: "white" },
  $(go.Shape, { geometryString: "M0 0 H150", stroke: "blue", strokeWidth: 2 }),
  $(go.Shape, { geometryString: "M0 0 V20", stroke: "blue", strokeDashArray: [2, 2] })
));
774</code></pre>
775<script>goCode("graduatedBackground", 500, 100)</script>
776<p>
Events on the tick Shapes and TextBlock labels will be ignored.
Rotating the main shape will not rotate the ticks, just as rotating a Spot Panel's main element
won't rotate its children. Rotation should generally be done at the Panel level. Another similarity
to Spot Panels is that resizing of a Graduated Panel should generally be done on the main shape.
TextBlock labels cannot be edited.
782</p>
    </div>
  </div>

<div class="bg-nwoods-primary">
  <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
    <p id="version" class="leading-none mb-2 my-4">GoJS</p>
  </section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto  px-8">
  <div class="w-full py-6">
793
      <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
        <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="../samples/index.html">Samples</a>
              </li>
              <li>
                <a href="../learn/index.html">Learn</a>
              </li>
              <li>
                <a href="../intro/index.html">Intro</a>
              </li>
              <li>
                <a href="../api/index.html">API</a>
              </li>
              <li>
                <a href="../changelog.html">Changelog</a>
              </li>
              <li>
                <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Support</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com/contact.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
              </li>
              <li>
                <a href="https://forum.nwoods.com/c/gojs">Forum</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/sales/index.html"
                target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
              </li>
              <li>
                <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
              </li>
            </ul>
          </li>
          <li class="list-none row-span-2">
            <h2 class="text-base font-semibold tracking-wide">Company</h2>
            <ul class="list-none space-y-4 md:space-y-1 px-0">
              <li>
                <a href="https://www.nwoods.com">Northwoods</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/about.html">About Us</a>
              </li>
              <li>
                <a href="https://www.nwoods.com/contact.html">Contact Us</a>
              </li>
              <li>
                <a href="https://twitter.com/northwoodsgo">Twitter</a>
              </li>
856
            </ul>
          </li>
        </ul>
860
861
    <p class="text-sm text-gray-100 md:mb-6">
      Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
    </p>
  </div>
</div>
867</footer>  </body>
868
869<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> 
870<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'UA-1506307-5');
var getOutboundLink = function(url, label) {
  gtag('event', 'click', {
    'event_category': 'outbound',
    'event_label': label,
    'transport_type': 'beacon'
  });
}
881
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
  this.classList.toggle("active");
  topnavList.classList.toggle("hidden");
  document.getElementById("topnavOpen").classList.toggle("hidden");
  document.getElementById("topnavClosed").classList.toggle("hidden");
});
891</script>
<script src="../assets/js/prism.js"></script>
<script src="../release/go.js"></script>
894<script src="../extensions/Figures.js"></script>  <script src="../assets/js/goDoc.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
    if (window.goDoc) window.goDoc();
    var d = window.diagrams;
    for (var i = 0; i < d.length; i++) {
      var dargs = d[i];
      goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
    }
    if (window.extra) window.extra();
  });
</script>
907</html>
1	`<!DOCTYPE html>`
2	`<html lang="en">`
3	`<head>`
4	`<meta charset="utf-8"/>`
5	`<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>`
6
7	`<link rel="stylesheet" href="../assets/css/style.css"/>`
8	`<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS Graduated Panels -- Northwoods Software </title>`
9	`<link rel="stylesheet" href="../assets/css/prism.css" />`
10	`</head>`
11	`<script>`
12
13	`window.diagrams = [];`
14	`window.goCode = function(pre, w, h, parentid, animation) {`
15	`window.diagrams.push([pre, w, h, parentid, animation]);`
16	`}`
17	`</script>`
18	`<body>`
19	`<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">`
20	`<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">`
21	`<div class="md:pl-4">`
22	`<a class="text-white hover:text-white no-underline hover:no-underline`
23	`font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">`
24	`<h1 class="mb-0 p-1 ">GoJS</h1>`
25	`</a>`
26	`</div>`
27	`<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">`
28	`<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">`
29	`<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>`
30	`<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>`
31	`</svg>`
32	`</button>`
33	`<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">`
34	`<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">`
35	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>`
36	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>`
37	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>`
38	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>`
39	`<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>`
40	`<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>`