Sidebars


Layouts with Sidebars

The graphs on the previous page only had graphs, but generally you want to present the graph with a title, some text, and often some controls like sliders. These are presented in what we call a Sidebar.

While graphs always have the same aspect ratio, the Sidebar may be placed to the right of the graph or below it, depending on how wide the user’s window is. For wide windows, the Sidebar is placed to the right:

layout: OneGraphPlusSidebar: graph: xAxis: title: X Axis yAxis: title: Y Axis sidebar: controls: - title: Graph Title description: This is a description.

If there isn’t enough space, the Sidebar is positioned below the graph:

layout: OneGraphPlusSidebar: graph: xAxis: title: X Axis yAxis: title: Y Axis sidebar: controls: - title: Graph Title description: This is a description.

Available layouts with sidebars are:

3D graphs with sidebars will be coming soon…

Layouts with Multiple Controls

The TwoHorizontalGraphs layout optionally take leftControl and rightControl children; these place sidebar-like controls underneath the two graphs:

layout: TwoHorizontalGraphs: leftGraph: xAxis: {title: Left X Axis} yAxis: {title: Left Y Axis} leftControls: title: Left Graph description: Description of left graph rightGraph: xAxis: {title: Right X Axis} yAxis: {title: Right Y Axis} rightControls: title: Right Graph description: Description of right graph

The ThreeHorizontalGraphs also has this capability; see this example.

KGJS
KineticGraphs.org
Getting Started

About the Project

Authoring Sandbox

Graphs & Layouts

Layouts

Sidebars

Graphs

Trees

3D Graphs

Graph Objects

Styling Graph Objects

Points

Lines

Curves

Contours

Shapes and Areas

Segments and Arrows

Angles and Angle Markers

User Interactions

Parameters

Calculations

Dragging

Economics

Econ Schema

Supply and Demand

Consumer Optimization

Exchange