CanvasXpress Broadcast Events

Automatic broadcast mechanism to share events across visualizations for highlighting or filtering.

Introduction

The CanvasXpress platform possesses a gold standard automated broadcast mechanism that offers intuitive communications of events to all webpage visualizations. The data decision-making processes is automated without needing any extra coding.

Broadcasting

The CanvasXpress platform offers an automatic broadcast mechanism that intuitively communicates events across all visualizations on a webpage. This automated data decision-making process requires no extra coding, simplifying the creation of interactive dashboards.

Consider the following dataset, which will be used to create a series of CanvasXpress visualizations, forming a simple dashboard on this page:

Name	Weight	Height	Waist	Hip	Age	Gender	Excercise
Keith	65.6	174	71.5	93.5	21	Male	Low
Nina	51.6	161	66.5	92.0	22	Female	Moderate
Freddy	80.7	194	83.2	95.0	28	Male	Moderate
Tracey	49.2	160	61.2	91.0	19	Female	Moderate
Isabelle	55.2	173	66.5	90.3	32	Female	Low
Penny	48.7	151	61.6	90.0	35	Female	Intense

To observe the corresponding data points, simply click on any data point within a graph. You will notice the selected data point highlighted across all other visualizations. This seamless integration is a core feature of CanvasXpress, requiring no additional coding or programming. To reset all graphs, press the 'ESC' key.

Height vs Weight

Hip vs Waist

Age

Excercise Frequency

Gender

Age Histogram

Selection Modes

By default, CanvasXpress visualizations highlight selected data points. However, each visualization can be configured to 'ghost' (dim) the non-selected data points instead, providing a different visual emphasis.

Use the buttons below to see this feature in action. For additional information about the selectionMode parameter, please refer to the broadcast API documentation.

Broadcast Groups

You can also limit the broadcasting mechanism to specific visualizations on the webpage by assigning a common group ID using the broadcastGroup parameter in the CanvasXpress configuration. This allows for more granular control over event propagation.

By default, broadcasting is active across all CanvasXpress visualizations on the webpage. An example of this limited scope capability, specifically with legend click events, is demonstrated at the end of this page.

# DOE

An alternative way of broadcasting events on the CanvasXpress platform is by putting all data into a single visualization. Consider this DOE graph display with the same dataset as above, which is effectively a dashboard.

To filter the data, click on any of the pie charts or histograms in the dashboard. To reset the DOE graph, press ESC. This feature is available on CanvasXpress visualization without the need for any coding or programming.

You can toggle this visualization in datasets that contain metadata with the help of the context menus (Explore Meta-Data under the Explore menu) or create it programmatically as shown in this page calling the function createDOE.

Data and Configuration

The JavaScript used to create the CanvasXpress visualizations can be seen below. Take note that no additional configuration was needed to implement the event broadcast. This shows how the CanvasXpress platform can be used to create dashboards.

var doe = {
  "x" : {
    "Height" : [174, 161, 194, 160, 173, 151],
    "Weight" : [65.6, 51.6, 80.7, 49.2, 55.2, 48.7],
    "Hip": [93.5, 92, 95, 91, 90.3, 89.9],
    "Waist": [71.5, 66.5, 83.2, 61.2, 66.5, 61.6],
    "Gender" : ["Male", "Female", "Male", "Female", "Female", "Female"],
    "Excercise" : ["Low", "Moderate", "Moderate", "Moderate", "Low", "Intense"]
  },
  "y" : {
    "vars" : ["Age"],
    "smps" : ["Keith", "Nina", "Freddy", "Tracey", "Isabelle", "Penny"],
    "data" : [
      [ 21, 22, 28, 19, 32, 35 ]
    ]
  }
}
var cXDOE = new CanvasXpress("canvasDOE", doe, {
  graphType : "Bar",
  histogramBins: 5
});
cXDOE.createDOE();

# Legend

Another flavor of broadcasting events on the CanvasXpress platform is by putting events on legend hide/show. Click on the legends of any of the following graphs. Click Ctrl + Esc to reset all graphs.

cyl

gear

carb

Data and Configuration

Here is the configuration for one of the graphs above. Notice the parameter broadcastGroup which is used to identify the canvasXpress objects that the broadcast functionality will be scoped to.

// Dataset 1
var dsL1 = {
  "y": {
    "vars": ["Mazda RX4", "Mazda RX4 Wag", "Datsun 710", "Hornet 4 Drive", "Hornet Sportabout", "Valiant", "Duster 360", "Merc 240D", "Merc 230", "Merc 280", "Merc 280C", "Merc 450SE", "Merc 450SL", "Merc 450SLC", "Cadillac Fleetwood", "Lincoln Continental", "Chrysler Imperial", "Fiat 128", "Honda Civic", "Toyota Corolla", "Toyota Corona", "Dodge Challenger", "AMC Javelin", "Camaro Z28", "Pontiac Firebird", "Fiat X1-9", "Porsche 914-2", "Lotus Europa", "Ford Pantera L", "Ferrari Dino", "Maserati Bora", "Volvo 142E"],
    "smps": ["wt", "mpg"],
    "data": [
      [2.62, 21], [2.875, 21], [2.32, 22.8], [3.215, 21.4], [3.44, 18.7], [3.46, 18.1], [3.57, 14.3], [3.19, 24.4], [3.15, 22.8], [3.44, 19.2], [3.44, 17.8], [4.07, 16.4], [3.73, 17.3], [3.78, 15.2], [5.25, 10.4], [5.424, 10.4], [5.345, 14.7], [2.2, 32.4], [1.615, 30.4], [1.835, 33.9], [2.465, 21.5], [3.52, 15.5], [3.435, 15.2], [3.84, 13.3], [3.845, 19.2], [1.935, 27.3], [2.14, 26], [1.513, 30.4], [3.17, 15.8], [2.77, 19.7], [3.57, 15], [2.78, 21.4]
    ]
  },
  "z": {
    "cyl": [6, 6, 4, 6, 8, 6, 8, 4, 4, 6, 6, 8, 8, 8, 8, 8, 8, 4, 4, 4, 4, 8, 8, 8, 8, 4, 4, 4, 8, 6, 8, 4],
    "gear": [4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3, 4, 5, 5, 5, 5, 5, 4],
    "carb": [4, 4, 1, 1, 2, 1, 4, 2, 2, 4, 4, 3, 3, 3, 4, 4, 4, 1, 2, 1, 1, 2, 2, 4, 2, 1, 2, 2, 4, 6, 8, 2]
  }
}
var cXL1 = new CanvasXpress("canvasIdL1", dsL1, {
  graphType: "Scatter2D",
  xAxisTitle: "wt",
  yAxisTitle: "mpg",
  stringVariableFactors: ["cyl"],
  asSampleFactors: ["cyl"],
  colorBy: "cyl",
  legendScaleFontFactor: 3,
  broadcastGroup: 'legends',
  theme: "CanvasXpress"
});
var dsL2 = {
  "y": {
    "vars": ["Mazda RX4", "Mazda RX4 Wag", "Datsun 710", "Hornet 4 Drive", "Hornet Sportabout", "Valiant", "Duster 360", "Merc 240D", "Merc 230", "Merc 280", "Merc 280C", "Merc 450SE", "Merc 450SL", "Merc 450SLC", "Cadillac Fleetwood", "Lincoln Continental", "Chrysler Imperial", "Fiat 128", "Honda Civic", "Toyota Corolla", "Toyota Corona", "Dodge Challenger", "AMC Javelin", "Camaro Z28", "Pontiac Firebird", "Fiat X1-9", "Porsche 914-2", "Lotus Europa", "Ford Pantera L", "Ferrari Dino", "Maserati Bora", "Volvo 142E"],
    "smps": ["wt", "mpg"],
    "data": [
      [2.62, 21], [2.875, 21], [2.32, 22.8], [3.215, 21.4], [3.44, 18.7], [3.46, 18.1], [3.57, 14.3], [3.19, 24.4], [3.15, 22.8], [3.44, 19.2], [3.44, 17.8], [4.07, 16.4], [3.73, 17.3], [3.78, 15.2], [5.25, 10.4], [5.424, 10.4], [5.345, 14.7], [2.2, 32.4], [1.615, 30.4], [1.835, 33.9], [2.465, 21.5], [3.52, 15.5], [3.435, 15.2], [3.84, 13.3], [3.845, 19.2], [1.935, 27.3], [2.14, 26], [1.513, 30.4], [3.17, 15.8], [2.77, 19.7], [3.57, 15], [2.78, 21.4]
    ]
  },
  "z": {
    "cyl": [6, 6, 4, 6, 8, 6, 8, 4, 4, 6, 6, 8, 8, 8, 8, 8, 8, 4, 4, 4, 4, 8, 8, 8, 8, 4, 4, 4, 8, 6, 8, 4],
    "gear": [4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3, 4, 5, 5, 5, 5, 5, 4],
    "carb": [4, 4, 1, 1, 2, 1, 4, 2, 2, 4, 4, 3, 3, 3, 4, 4, 4, 1, 2, 1, 1, 2, 2, 4, 2, 1, 2, 2, 4, 6, 8, 2]
  }
}
var cXL2 = new CanvasXpress("canvasIdL2", dsL2, {
  graphType: "Scatter2D",
  xAxisTitle: "wt",
  yAxisTitle: "mpg",
  stringVariableFactors: ["gear"],
  asSampleFactors: ["gear"],
  colorBy: "gear",
  legendScaleFontFactor: 3,
  broadcastGroup: 'legends',
  theme: "CanvasXpress"
});
var dsL3 = {
  "y": {
    "vars": ["Mazda RX4", "Mazda RX4 Wag", "Datsun 710", "Hornet 4 Drive", "Hornet Sportabout", "Valiant", "Duster 360", "Merc 240D", "Merc 230", "Merc 280", "Merc 280C", "Merc 450SE", "Merc 450SL", "Merc 450SLC", "Cadillac Fleetwood", "Lincoln Continental", "Chrysler Imperial", "Fiat 128", "Honda Civic", "Toyota Corolla", "Toyota Corona", "Dodge Challenger", "AMC Javelin", "Camaro Z28", "Pontiac Firebird", "Fiat X1-9", "Porsche 914-2", "Lotus Europa", "Ford Pantera L", "Ferrari Dino", "Maserati Bora", "Volvo 142E"],
    "smps": ["wt", "mpg"],
    "data": [
      [2.62, 21], [2.875, 21], [2.32, 22.8], [3.215, 21.4], [3.44, 18.7], [3.46, 18.1], [3.57, 14.3], [3.19, 24.4], [3.15, 22.8], [3.44, 19.2], [3.44, 17.8], [4.07, 16.4], [3.73, 17.3], [3.78, 15.2], [5.25, 10.4], [5.424, 10.4], [5.345, 14.7], [2.2, 32.4], [1.615, 30.4], [1.835, 33.9], [2.465, 21.5], [3.52, 15.5], [3.435, 15.2], [3.84, 13.3], [3.845, 19.2], [1.935, 27.3], [2.14, 26], [1.513, 30.4], [3.17, 15.8], [2.77, 19.7], [3.57, 15], [2.78, 21.4]
    ]
  },
  "z": {
    "cyl": [6, 6, 4, 6, 8, 6, 8, 4, 4, 6, 6, 8, 8, 8, 8, 8, 8, 4, 4, 4, 4, 8, 8, 8, 8, 4, 4, 4, 8, 6, 8, 4],
    "gear": [4, 4, 4, 3, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 3, 3, 3, 4, 4, 4, 3, 3, 3, 3, 3, 4, 5, 5, 5, 5, 5, 4],
    "carb": [4, 4, 1, 1, 2, 1, 4, 2, 2, 4, 4, 3, 3, 3, 4, 4, 4, 1, 2, 1, 1, 2, 2, 4, 2, 1, 2, 2, 4, 6, 8, 2]
  }
}
var cXL3 = new CanvasXpress("canvasIdL3", dsL3, {
  graphType: "Scatter2D",
  xAxisTitle: "wt",
  yAxisTitle: "mpg",
  stringVariableFactors: ["carb"],
  asSampleFactors: ["carb"],
  colorBy: "carb",
  legendScaleFontFactor: 3,
  broadcastGroup: 'legends',
  theme: "CanvasXpress"
});

The broadcast selection event as well as the click legend event can be further customized and their names are 'select' and 'clicklegend' respectively. See the events page for further information.