TSIClient: The Azure Time Series Insights JavaScript SDK

---

NOTE

The Time Series Insights (TSI) service will no longer be supported after March 2025. Consider migrating existing TSI environments to alternative solutions as soon as possible. For more information on the deprecation and migration, visit our documentation.

---

The Azure Time Series Insights JavaScript SDK (aka tsiclient) is a JavaScript library for Microsoft Azure Time Series Insights, featuring components for data visualization and analytics, utilities for making calls directly to the TSI Platform API, and more. tsiclient also ships with an associated CSS file (which you must include using your preferred css linking method), which makes the components look great out of the box.

Resources

• API Reference documentation
• Product documentation
• Authorization and authentication
• Hosted tsiclient samples

Installing

If you use npm, npm install tsiclient. You can also load directly from unpkg. For example:

<script src="https://unpkg.com/tsiclient@latest/tsiclient.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/tsiclient@latest/tsiclient.css"></link>

To import all of tsiclient into an ES2015 application, import everything into a namespace, like so...

import TsiClient from "tsiclient";

// later, when you want a line chart
let tsiClient = new TsiClient();
let lineChart = new tsiClient.ux.LineChart(document.getElementById('chart'));

You can also import components individually. If you only need the LineChart, you can import it like so...

import LineChart from 'tsiclient/LineChart'

// later when you want a line chart
let lineChart = new LineChart(document.getElementById('chart'));

Importing individual components can help significantly reduce your bundle size as they work better with tree shaking. This is the recommended approach if your app only consumes specific components.

To import the tsiclient stylesheet into an ES2015 application, import either tsiclient.css or tsiclient.min.css, like so...

import 'tsiclient/tsiclient.css' // Standard styles
import 'tsiclient/tsiclient.min.css' // Minified styles

Release Notes

Starting with version 1.3.0, discrete events and state transitions will be represented just like numeric time series in the LineChart component. This may be a breaking change for users representing non-numeric series in the line chart using the "events" and "states" Chart Options. For usage instructions, consult this example and the associated documentation.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.