Tutorial: Visualizations in JavaScript

2024-03-28

Once you have created a chart and filtered and refined it using the data grid and user interface, you can export it as JavaScript. Then, provided you have Developer permissions (are a member of the "Developer" site group), you can insert it into an HTML page, such as a wiki, and directly edit it. The powerful LabKey visualization libraries include many ways to customize the chart beyond features available in the UI. This lets you rapidly prototype and collaborate with others to get the precise presentation of data you would like.

The exported JavaScript from a chart will:

  • Load the dependencies necessary for visualization libraries
  • Load the data to back the chart
  • Render the chart
Because the exported script selects data in the database directly, if the data changes after you export and edit, the chart will reflect the data changes as well.

In this tutorial, we will:

  1. Export Chart as JavaScript
  2. Embed the Script in a Wiki
  3. Modify the Exported Chart Script
  4. Display the Chart with Minimal UI
This example uses the sample study datasets imported in the study tutorial. If you have not already set that up, follow the instructions in this topic: Install the Sample Study.

First Step

Related Topics