diff --git a/README.md b/README.md index 10c7e41..810215b 100644 --- a/README.md +++ b/README.md @@ -87,7 +87,7 @@ Direct developer email support can be purchased through a [Support Plan][4] or b © LightningChart Ltd 2009-2022. All rights reserved. -[XY cartesian chart]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/classes/ChartXY.html -[Area point]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/interfaces/AreaPoint.html -[Area Range series]: https://lightningchart.com/lightningchart-js-api-documentation/v4.0.0/classes/AreaRangeSeries.html +[XY cartesian chart]: https://lightningchart.com/lightningchart-js-api-documentation/v4.1.0/classes/ChartXY.html +[Area point]: https://lightningchart.com/lightningchart-js-api-documentation/v4.1.0/interfaces/AreaPoint.html +[Area Range series]: https://lightningchart.com/lightningchart-js-api-documentation/v4.1.0/classes/AreaRangeSeries.html diff --git a/package.json b/package.json index a60f17f..f59871d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "webpack-stream": "^7.0.0" }, "dependencies": { - "@arction/lcjs": "^4.0.1", + "@arction/lcjs": "^4.1.0", "@arction/xydata": "^1.4.0" }, "lightningChart": { diff --git a/src/index.js b/src/index.js index 5a64269..eb593f9 100644 --- a/src/index.js +++ b/src/index.js @@ -8,19 +8,21 @@ const lcjs = require('@arction/lcjs') const { lightningChart, AxisTickStrategies, SolidFill, SolidLine, ColorRGBA, ColorHEX, LegendBoxBuilders, LinearGradientFill, Themes } = lcjs -// Decide on an origin for DateTime axis. -const dateOrigin = new Date(2019, 3, 1) - // Create a XY Chart. const chart = lightningChart().ChartXY({ // theme: Themes.darkGold -}) -chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin)) -chart.setTitle('Daily temperature range, April 2019') +}).setTitle('Daily temperature range, April 2019') const axisX = chart.getDefaultAxisX() const axisY = chart.getDefaultAxisY().setTitle('Temperature (°C)').setScrollStrategy(undefined) +// Use DateTime TickStrategy and set the interval +axisX.setTickStrategy(AxisTickStrategies.DateTime) + .setInterval({ + start: new Date(2019, 0, 1).getTime(), + end: new Date(2019, 0, 31).getTime() + }) + // Daily temperature records const recordRange = chart.addAreaRangeSeries() // Current month daily temperature variations @@ -83,7 +85,7 @@ const recordRangeData = [] // Current range for (let i = 0; i < 31; i++) { const randomPoint = () => { - const x = i + const x = new Date(2019, 0, i + 1).getTime() let yMax if (i > 0) { const previousYMax = currentRangeData[i - 1].yMax @@ -112,7 +114,7 @@ axisY.setInterval({ start: recordYMin - 5, end: recordYMax + 5, stopAxisAfter: f // ----- Generate record temperatures for (let i = 0; i < 31; i++) { const randomPoint = () => { - const x = i + const x = new Date(2019, 0, i + 1).getTime() const yMax = randomInt(recordYMax - 2, recordYMax + 2) const yMin = randomInt(recordYMin - 1, recordYMin) return { @@ -125,11 +127,11 @@ for (let i = 0; i < 31; i++) { } // ----- Adding data points recordRangeData.forEach((point, i) => { - recordRange.add({ position: point.x * 24 * 60 * 60 * 1000, high: point.yMax, low: point.yMin }) + recordRange.add({ position: point.x, high: point.yMax, low: point.yMin }) }) currentRangeData.forEach((point, i) => { - currentRange.add({ position: point.x * 24 * 60 * 60 * 1000, high: point.yMax, low: point.yMin }) + currentRange.add({ position: point.x, high: point.yMax, low: point.yMin }) }) // ----- Add legend box const legendBox = chart