# Broadcast

The CanvasXpress platform possesses a gold standard automated broadcast mechanism that offers intuitive communications of events to all webpage visualizations. The information provided allows you to automate data decision-making processes 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.

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 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.

Height vs Weight
Hip vs Waist
Age

Excercise Frequency
Gender
Age Histogram

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 selectDataMode in the broadcast page


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",
  "histogramData": 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();