Complex Plot Layouts

There are many ways you can create multiple graphs from a single data set rather than creating multiple graphs each with a diferent data object. The only caveat is that you cannot specify the parameter 'autoExtend'.

In the first example, the set consists of three series each with six data points. By specifying the flag 'allVsAll' you can produce a matrix of scatter plots in which each series is plotted individually against each other.

In the second example, the set has data for eigth samples from different tissues and six genes of different categories. You can segregate the data by 'Tissue' and 'Category' specifying the parameters 'segregateSamples' and 'segregateVariables' respectively. Also you can specify the sub graph types.

              var cx = new CanvasXpress('canvas',
                                       {y: {vars:  ['Gene1',  'Gene2', 'Gene3',  'Gene4', 'Gene5',  'Gene6'],
                                            smps:  ['Smp1',   'Smp2',  'Smp3'],
                                            desc:  ['Intensity'],
                                            data:  [[10, 12, 3],
                                                    [12, 4, 60],
                                                    [7, 12, 20],
                                                    [21, 10, 30],
                                                    [15, 14, 100],
                                                    [100, 82, 73]]}},
                                       {graphType: 'Scatter2D',
                                        allVsAll: true});

              var cx = new CanvasXpress('canvas1',
                                       {x: {Tissue:   ['Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver', 'Kidney', 'Liver']},
                                        y: {vars:     ['Gene1',  'Gene2', 'Gene3',  'Gene4', 'Gene5',  'Gene6'],
                                            smps:     ['Smp1',   'Smp2',  'Smp3',   'Smp4',  'Smp5',   'Smp6',  'Smp7',   'Smp8'],
                                            desc:     ['Intensity'],
                                            data:    [[10, 12, 3, 4, 100, 73, 42, 64],
                                                      [12, 4, 60, 5, 24, 14, 32, 13],
                                                      [7, 12, 20, 13, 49, 52, 42, 92],
                                                      [21, 10, 30, 8, 65, 166, 47, 58],
                                                      [15, 14, 100, 5, 34, 30, 82, 51],
                                                      [100, 82, 73, 4, 3, 4, 5, 2]]},
                                        z: {Category: ['A', 'B', 'C', 'B', 'C', 'A']}},
                                       {graphType: 'Bar'});
              cx.segregateSamples('Tissue');
              cx.segregateVariables('Category');
              cx.subGraphType1 = 'Dotplot';
              cx.subGraphType3 = 'Line';
              cx.subGraphType5 = 'Stacked';
              cx.draw();