Broadcast

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.

Consider the following datasets and create a CanvasXpress visualization to display the datasets on this web page as a simple dashboard.

To see the corresponding data points, click any data point inside the graph, and notice the highlighted data point on the other visualization. This feature is available on CanvasXpress without the need for any coding or programming. Press 'ESC' to reset the graphs.

On the CanvasXpress visualization, data points are highlighted by default, but each visual can be configured to 'ghost' the non-selected data points instead.

Use the buttons below to see this feature in action. See additional information about the selectionMode in the broadcast page

Scope

You can also limit the broadcasting mechanish to certain visualizations in the web page by providing the group id in a parameter called broadcastGroup.

Broadcasting is active in all visualizations in the webpage by default. You can see an example of this limited scope capability at the end of this page with the legend click event.

Data and Configuration

The JavaScript used to create the CanvasXpress visualization can be seen below. Take note that no additional configuration was needed to implement broadcasting. This shows how the automated CanvasXpress event broadcast works across dashboards.

// Dataset 1
var ds1 = {
  "y" : {
    "vars" : ["Keith", "Nina", "Freddy", "Tracey", "Isabelle", "Penny"],
    "smps" : ["Height", "Weigth"],
    "data" : [
      [ 174, 65.6 ],
      [ 161, 51.6 ],
      [ 194, 80.7 ],
      [ 160, 49.2 ],
      [ 173, 55.2 ],
      [ 151, 48.7 ]
    ]
  }
}
var cX1 = new CanvasXpress("canvasId1", ds1, {
  "graphType": "Scatter2D",
  "xAxis": "Height",
  "yAxis": "Weigth"
});

// Dataset 2
var ds2 = {
  "y" : {
    "vars" : ["Keith", "Nina", "Freddy", "Tracey", "Isabelle", "Penny"],
    "smps" : ["Hip", "Waist"],
    "data" : [
      [ 93.5, 71.5 ],
      [ 92, 66.5 ],
      [ 95, 83.2 ],
      [ 91, 61.2 ],
      [ 90.3, 66.5 ],
      [ 89.9, 61.6 ]
    ]
  }
}
var cX2 = new CanvasXpress("canvasId2", ds2, {
  "graphType": "Scatter2D",
  "xAxis": "Hip",
  "yAxis": "Waist"
});

// Dataset 3
var ds3 = {
  "y" : {
    "vars" : ["Age"],
    "smps" : ["Keith", "Nina", "Freddy", "Tracey", "Isabelle", "Penny"],
    "data" : [
      [ 21, 22, 28, 19, 32, 35 ]
    ]
  }
}
var cX3 = new CanvasXpress("canvasId3", ds3, {
  "graphType": "Bar",
  "graphOrientation": "vertical"
});

// Dataset 4
var ds4 = {
  "x" : {
    "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 cX4 = new CanvasXpress("canvasId4", ds4, {
  "graphType": "Bar",
  "treemapBorderWidth": 0,
});
cX4.createTreemap("Excercise");

// Dataset 5
var ds5 = {
  "x" : {
    "Gender" : ["Male", "Female", "Male", "Female", "Female", "Female"]
  },
  "y" : {
    "vars" : ["Age"],
    "smps" : ["Keith", "Nina", "Freddy", "Tracey", "Isabelle", "Penny"],
    "data" : [
      [ 21, 22, 28, 19, 32, 35 ]
    ]
  }
}
var cX5 = new CanvasXpress("canvasId5", ds5, {
  "graphType": "Bar",
  "showLegend": false
});
cX5.createPie("Gender");

// Dataset 6
var ds6 = {
  "z" : {
    "Gender" : ["Male", "Female", "Male", "Female", "Female", "Female"],
    "Excercise" : ["Low", "Moderate", "Moderate", "Moderate", "Low", "Intense"]
  },
  "y" : {
    "vars" : ["Keith", "Nina", "Freddy", "Tracey", "Isabelle", "Penny"],
    "smps" : ["Age"],
    "data" : [
      [ 21 ],
      [ 22 ],
      [ 28 ],
      [ 19 ],
      [ 32 ],
      [ 35 ]
    ]
  }
}
var cX6 = new CanvasXpress("canvasId6", ds6, {
  "graphType": "Scatter2D",
  "showHistogram": true
});

# 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"
});
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.

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.

new CanvasXpress("canvasIdL3", data, {
  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.