// ** BEGIN MY CODE **
// create an accordion layout panel for each of the treatment group plots
var accordionPanel = Ext4.create('Ext.panel.Panel', {
    renderTo: 'exportedChart',
    title: 'Time Chart: CD4 Levels per Treatment Group',
    width: 760,
    height: 500,
    layout: 'accordion',
    items: []
});

// loop through the array of treatment groups
var groupIndex = 0;
Ext4.each(chartConfig.subject.groups, function(group) {
    // add a new panel to the accordion layout for the given group
    var divId = 'TimeChart' + groupIndex ;
    accordionPanel.add(Ext4.create('Ext.panel.Panel', {
        title: group.label,
        html: '<div id="' + divId + '"></div>'
    }));

    // clone and modify the queryConfig and chartConfig for the plot specific to this group
    var groupQueryConfig = Ext4.clone(queryConfig);
    groupQueryConfig.defaultSingleChartHeight = 350;
    groupQueryConfig.defaultWidth = 750;
    var groupChartConfig = Ext4.clone(chartConfig);
    groupChartConfig.subject.groups = [group];

    // call the plot render method using the cloned config objects
    LABKEY.vis.TimeChartHelper.renderChartSVG(divId , groupQueryConfig, groupChartConfig);

    groupIndex++;
});
// ** END MY CODE **