JavaScript Temperature Anomaly Chart
This example shows visualization of Temperature anomaly index and Atmospheric Carbon Dioxide in parts per million (ppm for short) for period from 1880 to 2020.
- Temperature anomaly means a departure from a reference value or long-term average. A positive anomaly indicates that the observed temperature was warmer than the reference value, while a negative anomaly indicates that the observed temperature was cooler than the reference value.
This chart has two Y axes since it displays two trends on the same time range, but with different value ranges.
The extra Y axis on the right side is created like this
const axisY2 = chart.addAxisY({ opposite: true })
When creating series, the connected axes can be explicitly defined like so
const temperatureAnomalyIndexSeries = chart.addLineSeries({ yAxis: axisY2 })
Additionally, this example showcases adding animated video icons inside the chart. The thunderclouds in this example are displayed from an attached .mp4
asset file, which is displayed using an UIElement
.
const video = document.createElement('video')
video.src = 'thundercloud.mp4'
const uiIcon = chart.addUIElement().setBackground((background) => background.setFillStyle(new ImageFill({ source: video })))