Export Chart as JavaScript: /home/

Export Chart as JavaScript

Once you have created a chart and filtered and refined it using the chart wizard tool, you can export it as JavaScript if you have Developer permissions. You can then insert it into an HTML page, such as a wiki, and direct edit the script. The powerful LabKey visualization libraries include many ways to customize the chart including going beyond features available in the wizard. This lets you rapidly prototype and collaborate with others to get the precise presentation of data you would like. The exported JavaScript 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 the walkthrough below, we will export a timechart as JavaScript, embed it in a wiki, and make a few modifications. 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: Step 1: Install the Sample Study.

Create a Chart and Export to JavaScript

We will start by making a time chart grouped by treatment group as follows:

Navigate to the home page of your sample study, "HIV-CD4 Study."
Click the Clinical and Assay Data tab.
Open the Lab Results data set.
Select Charts > Create Chart.
Click Time.
Drag CD4+ from the column list to the Y Axis box.
Click Apply.
You will see a basic time chart. Before exporting the chart to Javascript, we can customize it within the wizard.
Click Chart Type.
In the X Axis box, change the Time Interval to "Months".
Click Apply and notice the X axis now tracks months.
Click Chart Layout, then change the Subject Selection to "Participant Groups". Leave the default "Show Mean" checkbox checked.
Change the Number of Charts to "One per Group".

Click Apply.
In the Filters > Groups panel on the left, select Treatment Group and deselect anything that was checked by default. The chart will now be displayed as a series of four individual charts in a scrollable window, one for each treatment group:

Hover over the chart to reveal the Export buttons, and click to Export as Script.
You will see a popup window containing the HTML for the chart, including the JavaScript code.

Select All within the popup window and Copy the contents to your browser clipboard. For safekeeping, you can paste to a text file.
Click Close. Then Save your chart with the name of your choice.

Copy JavaScript to Wiki

You can embed the chart without further modifications into a Wiki or any other HTML page.

Click the Overview tab to go to the home page of your study, or navigate to any tab where you would like to place this exported chart.
Select Wiki from the <Select Web Part> pulldown in the lower left, then click Add.
Create a new wiki:

If the folder already contains a wiki page named "default", the new webpart will display it. Choose New from the triangle menu next to the webpart name.
Otherwise, click Create a new wiki page in the new wiki webpart.

Give the page the name of your choice. Wiki page names must be unique, so be careful not to overwrite something else unintentionally.
Enter a Title such as "Draft of Chart".
Click the Source tab. Note: if there is no Source tab, click Convert To..., select HTML and click Convert.
Paste the JavaScript code you copied above onto the source tab.

You could also add additional HTML to the page before or after the pasted JavaScript of the chart.

Caution: Do not switch to the Visual tab. The visual editor does not support this JavaScript element, so switching to that tab would cause the chart to be deleted. You will be warned if you click the Visual tab. If you do accidentally lose the chart, you should be able to recover it using the History of the wiki page, or by pasting the exported script again.

Scroll up and click Save and Close.
Return to the tab where you placed the new wiki. If it does not already show your chart, select Customize from the triangle menu next to the title and change the Name and title of the page to display to the name of the wiki you just created.
Notice that the new wiki now contains the series of single timecharts as created in the wizard.

Edit JavaScript

The chart wizard itself offers a variety of tools for customizing your chart. However, by editing the exported JavaScript for the chart directly you can have much finer grained control as well as make modifications that are not provided by the wizard. In this step we will modify the chart to use an accordian layout and change the size to better fit the page.

Open your wiki for editing by clicking the pencil icon or Edit button.
Confirm that the Source tab is selected. Reminder: Do not switch to the Visual tab.
Scroll down to the end of the chart validation section and paste the following code defining the accordian panel. It is good practice to mark your additions with comments such as those shown here.

...
        if (!validation.success)
        {
            renderMessages(CHART_ID, messages);
            return;
        }

        // ** BEGIN MY CODE **
        var accordionPanel = Ext4.create('Ext.panel.Panel', {
            renderTo: CHART_ID,
            title: 'Time Chart: CD4 Levels per Treatment Group',
            width: 760,
            height: 500,
            layout: 'accordion',
            items: []
        });
        // ** END MY CODE **

        // For time charts, we allow multiple plots to be displayed by participant, group...

Next, scroll to the portion of script defining plotConfig.
Before and after that definition, paste two new sections as shown below.
Also edit the lines shown in the section below marked CHANGED THIS LINE to match this example:

...
            var data = plotConfigsArr[configIndex].individualData ? plotConfigsArr[configIndex].individualData : 
plotConfigsArr[configIndex].aggregateData;

            // ** BEGIN MY CODE **
	    var divId = 'TimeChart' + configIndex;
            var plotPanel = Ext4.create('Ext.panel.Panel', {
                html: '<div id="' + divId + '"></div>',
                title: labels.main.value
            });
            accordionPanel.add(plotPanel);
            // ** END MY CODE **

            var plotConfig = {
                renderTo: divId, 	// ** CHANGED THIS LINE **
                clipRect: clipRect,
                width: 750,			// ** CHANGED THIS LINE **
                height: 350,			// ** CHANGED THIS LINE **
                labels: labels,
                aes: aes,
                scales: scales,
                layers: layers,
                data: data
            };

            // ** BEGIN MY CODE **
            plotConfig.labels.main.value = "";
            plotConfig.scales.yRight.tickFormat = function(v) { 
                     return v.toExponential(); 
            };
            // ** END MY CODE **

            var plot = new LABKEY.vis.Plot(plotConfig);
            plot.render();

Click Save and Close to view your new chart. Notice that by clicking the - and + buttons on the right, you can switch between the individual charts in the display panel.

Displaying a Chart with Minimal UI

To embed an exported chart without surrounding user interface, create a simple file based module where your chart is included in a simple myChart.html file. Create a myChart.view.html file next to that page with the following content. This will load the necessary dependencies and create a page displaying only the simple chart. (To learn how to create a simple module, see Tutorial: Hello World Module.)

<view xmlns="http://labkey.org/data/xml/view" template="print" frame="none"> 
</view>

LabKey Support

LabKey Support