Close Editor Run Reset Auto Update CJS /*
* LightningChartJS example for several AxisXY
*/
// Import LightningChartJS
const lcjs = require('@arction/lcjs')
// Import Random Generator
const { createProgressiveRandomGenerator } = require('@arction/xydata')
// Extract required parts from LightningChartJS.
const {
lightningChart,
SolidFill,
SolidLine,
ColorRGBA,
Themes,
} = lcjs
const ls = lightningChart()
const chart = ls.ChartXY({
// theme: Themes.darkGold
})
.setTitle('Several Axis')
// Cache colors used in the example
const blueFill = new SolidFill( { color: ColorRGBA(0, 0, 255) } )
const greenFill = new SolidFill( { color: ColorRGBA(0, 255, 0) } )
const redFill = new SolidFill( { color: ColorRGBA( 255, 0, 0 ) } )
// Cache StrokeStyles used in the example
const blueLine = new SolidLine( { fillStyle: blueFill } )
const greenLine = new SolidLine( { fillStyle: greenFill } )
const redLine = new SolidLine( {fillStyle: redFill } )
// First Axes (default)
const axisX1 = chart.getDefaultAxisX()
// Set title of Axis
.setTitle('Axis X1')
// Set interval of X axis
.setInterval(-10, 1300, false, true)
.setStrokeStyle( blueLine )
const axisY1 = chart.getDefaultAxisY()
// Set title of Axis
.setTitle('Axis Y1')
// Set interval of Y axis
.setInterval(-150, 100, false, true)
.setStrokeStyle( blueLine )
// Second Axes (extra)
const axisX2 = chart.addAxisX({
opposite: true
})
.setTitle('Axis X2')
.setInterval(-60, 500, false, true)
.setStrokeStyle( greenLine )
const axisY2 = chart.addAxisY({
opposite: true
})
.setTitle('Axis Y2')
.setInterval(-20, 200, false, true)
.setStrokeStyle( greenLine )
// Create series with explicit axes.
// Axes 1
const splineSeries1 = chart.addSplineSeries({
xAxis: axisX1,
yAxis: axisY1
})
.setStrokeStyle( redLine )
.setPointFillStyle( blueFill )
.setName('Axis 1')
// Axes 2
const splineSeries2 = chart.addSplineSeries({
xAxis: axisX2,
yAxis: axisY2
})
.setStrokeStyle( greenLine )
.setName('Axis 2')
// Function to add random values to given series with createProgressiveRandomGenerator
const setSeries = (amountOfDots, splineSeries) => {
createProgressiveRandomGenerator()
.setNumberOfPoints(amountOfDots)
.generate()
// Set stream to output X points at a time
.setStreamBatchSize(amountOfDots)
// Create a new stream with previously defined stream settings
.toStream()
.forEach((point, i) => {
point.x = point.x * 5, // define X coordinates for point
point.y = (20 * Math.sin(i / (10 * Math.PI)) + (Math.floor(Math.random() * 20))) // define Y coordinates for point
splineSeries.add(point) // add to series
})
}
// set Series 1
setSeries(250, splineSeries1)
// set Series 2
setSeries(70, splineSeries2)
Several AxesXY - Editor Several Axes XY chart
This example shows creation of a Chart with 2 XY Axes. This Chart can be used to compare or see several graphs
Here's the creation of a 2 XY Axes Chart.
const chart = lightningChart ( ) . ChartXY ( )
const axisX1 = chart. getDefaultAxisX ( )
const axisX1 = chart. getDefaultAxisY ( )
const axisX2 = chart. addAxisX ( {
opposite: true
} )
const axisX2 = chart. addAxisY ( {
opposite: true
} )
const splineSeries1 = chart. addSplineSeries ( {
xAxis: axisX1,
yAxis: axisY1
} )
const splineSeries2 = chart. addSplineSeries ( {
xAxis: axisX2,
yAxis: axisY2
} )
splineSeries1. add ( { x: 0 , y: 0.4 } )
splineSeries2. add ( { x: 2 , y : 0.6 } )