AWS Open Source Blog
Visualizing time series data with the open source Synchro Charts
We are excited to open source Synchro Charts, a front-end component library that provides a collection of components to visualize time-series data for application developers with a focus on monitoring, root cause analysis, and analytics.
Synchro Charts is used in AWS IoT SiteWise Monitor to help end users understand their operational data and alarms by providing visualization components to monitor and explore AWS IoT SiteWise data.
Check out the following visualization components in the Synchro Charts GitHub repository:
The following is an example of streaming live data onto two Synchro Charts components: a line chart and a status timeline.
Synchro Charts come with a lot of great capabilities that help you, as an application developer, have a seamless application-building experience optimized for visualizing time series data. Synchro Charts offers the following capabilities:
- Synchronize visualizations: Provide a coherent data picture to end users as they explore data by having one or more groups of in sync visualizations. By keeping the charts in sync, you can build dashboards or applications with components that display the same period of time. Read the documentation to learn more about synchronization and how it works.
- Alarms: Synchro Charts can help you build applications to help end users understand alarm data. You can tell Synchro Charts that a data point represents the status of an alarm, and associate that alarm data point with the underlying data that triggered the alarm. For example, if your end user has an alarm on the number of 4xx API errors, you can use Synchro Charts components to visualize both the status of the 4xx alarm and the number of 4xx errors that have occurred in an intuitive and clear manner to your end user, where it is clear that the status of the alarm is associated with the number of 4xx errors. Read the documentation to learn more about alarms.
- Framework agnostic: With Synchro Charts, you can build your website or application the way you want, using your framework of choice. Synchro Charts is built and distributed as web components, but also can be utilized through the React wrapper.
- Intuitive and fluid interactions: Using interactions such as panning, and zooming in and out, you can let end users intuitively and fluidly navigate across a variety of visualizations to provide a delightful user experience, and help them maintain context as they explore data.
- Performance: Synchro Charts is built utilizing WebGL to render of large amount of data quickly. Synchro Charts has shown seamless and fluid performance with line chart rendering a million points in 1.4 seconds, with a rate of thousand points per 1.4 milliseconds measured on a 16 GB MacBook Pro. Check out our performance demonstration of half a million points across 9 synchronized charts.
Getting started with Synchro Charts
Synchro Charts is available in GitHub, and you can find documentation on synchrocharts.com.