Close Editor Run Reset Auto Update CJS /*
* LightningChartJS example that showcases creation of a Span-chart.
*/
// Import LightningChartJS
const lcjs = require('@arction/lcjs')
// Extract required parts from LightningChartJS.
const {
lightningChart,
SolidFill,
ColorRGBA,
emptyLine,
emptyFill,
AxisTickStrategies,
ColorPalettes,
SolidLine,
UIOrigins,
UIElementBuilders,
UILayoutBuilders,
UIDraggingModes,
Themes,
} = lcjs
const lc = lightningChart()
// Titles for span
const titles = [
'Certificate exams',
'Interview',
'Trainee training program',
'Department competition training sessions',
'Internet security training',
'Scrum meeting',
'Development meeting',
'First Aid training',
'Conquering the silence - How to improve your marketing',
]
// Define an interface for creating span charts.
let spanChart
// User side SpanChart logic.
{
spanChart = () => {
// Create a XY-Chart and add a RectSeries to it for rendering rectangles.
const chart = lc
.ChartXY({
// theme: Themes.darkGold
})
.setTitle('Conference Room Reservations')
.setMouseInteractions(false)
// Disable default AutoCursor
.setAutoCursorMode(0)
.setPadding({ right: '2' })
const rectangles = chart.addRectangleSeries()
const axisX = chart
.getDefaultAxisX()
.setMouseInteractions(false)
// Hide default ticks, instead rely on CustomTicks.
.setTickStrategy(AxisTickStrategies.Empty)
const axisY = chart
.getDefaultAxisY()
.setMouseInteractions(false)
.setTitle('Conference Room')
// Hide default ticks, instead rely on CustomTicks.
.setTickStrategy(AxisTickStrategies.Empty)
let y = 0
for (let i = 8; i <= 20; i++) {
const label = i > 12 ? i - 12 + 'PM' : i + 'AM'
axisX
.addCustomTick()
.setValue(i)
.setTickLength(4)
.setGridStrokeLength(0)
.setTextFormatter((_) => label)
.setMarker((marker) => marker.setTextFillStyle(new SolidFill({ color: ColorRGBA(170, 170, 170) })))
}
const figureHeight = 10
const figureThickness = 10
const figureGap = figureThickness * 0.5
const fitAxes = () => {
// Custom fitting for some additional margins
axisY.setInterval({ start: y, end: figureHeight * 0.5, stopAxisAfter: false })
}
let customYRange = figureHeight + figureGap * 1.6
const addCategory = (category) => {
const categoryY = y
const addSpan = (i, min, max, index) => {
// Add rect
const rectDimensions = {
x: min,
y: categoryY - figureHeight,
width: max - min,
height: figureHeight,
}
// Add element for span labels
const spanText = chart
.addUIElement(UILayoutBuilders.Row, { x: axisX, y: axisY })
.setOrigin(UIOrigins.Center)
.setDraggingMode(UIDraggingModes.notDraggable)
.setPosition({
x: (min + max) / 2,
y: rectDimensions.y + 5,
})
.setBackground((background) => background.setFillStyle(emptyFill).setStrokeStyle(emptyLine))
spanText.addElement(
UIElementBuilders.TextBox.addStyler((textBox) =>
textBox
.setTextFont((fontSettings) => fontSettings.setSize(13))
.setText(titles[index])
.setTextFillStyle(new SolidFill().setColor(ColorRGBA(255, 255, 255))),
),
)
if (index != i) {
customYRange = customYRange + figureHeight + 1
}
fitAxes()
// Return figure
return rectangles.add(rectDimensions)
}
// Add custom tick for category
axisY
.addCustomTick()
.setValue(y - figureHeight * 0.5)
.setGridStrokeLength(0)
.setTextFormatter((_) => category)
.setMarker((marker) => marker.setTextFillStyle(new SolidFill({ color: ColorRGBA(170, 170, 170) })))
y -= figureHeight * 1.5
fitAxes()
// Return interface for category.
return {
addSpan,
}
}
// Return interface for span chart.
return {
addCategory,
}
}
}
// Use the interface for example.
const chart = spanChart()
const categories = [
'5 chair room',
'5 chair room',
'5 chair room',
'10 chair room',
'10 chair room',
'20 chair room',
'Conference Hall',
].map((name) => chart.addCategory(name))
const colorPalette = ColorPalettes.flatUI(categories.length)
const fillStyles = categories.map((_, i) => new SolidFill({ color: colorPalette(i) }))
const strokeStyle = new SolidLine({
fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 0) }),
thickness: 2,
})
const spans = [
[
[10, 13],
[16, 18],
],
[[8, 17]],
[[12, 20]],
[[9, 17]],
[
[10, 12],
[15, 19],
],
[[11, 16]],
[[9, 18]],
]
let index = 0
spans.forEach((values, i) => {
values.forEach((value, j) => {
categories[i].addSpan(i, value[0], value[1], index).setFillStyle(fillStyles[i]).setStrokeStyle(strokeStyle)
index = index + 1
})
})
JavaScript Span Chart - Editor Also known as a Range Bar, Column Graph, Floating Bar Graph, Difference Graph, High-Low Graph
This example shows creation of a Span Chart made on user side by utilizing RectangleSeries. Span Charts display categorized value ranges - focusing only on the extreme values. Each category can have multiple 'spans'.
Here's the creation of a Span Chart using a pre-defined interface.
const chart = spanChart ( )
const tools = chart. addCategory ( 'Tools' )
const fools = chart. addCategory ( 'Fools' )
tools. addSpan ( 100 , 150 )
fools. addSpan ( 50 , 75 )
fools. addSpan ( 200 , 250 ) . setFillStyle ( new SolidFill ( ) . setColor ( prettyColor) ) . setStrokeStyle ( emptyLine)
The actual Span Chart logic just serves to provide a starting point for users to create their own API based on their needs and preferences. The functionality can be easily extended to construct Gantt Chart .