Modify the Exported Chart Script

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 Edit or the pencil icon if visible.
  • 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 (after the comment beginning "// Validate that the chart data has expected values...") 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.

Previous Step | Next Step

Discussion

Was this content helpful?

Log in or register an account to provide feedback


previousnext
 
expand all collapse all