JavaScript Scatter Chart

The Shield UI Scatter Chart is the next of the extensive HTML5 JavaScript library of charts. There are two convenient ways for users to supply data for visualization. The first one is to supply both X and Y values for each point, which is the primary advantage of the Scatter Chart. In this case the code will look similar to the following one:

data: [[6.4, 13.4], [1.7, 11], [5.4, 8], [9, 17], [1.9, 4], [3.6, 12.2], [1.9, 14.4], [1.9, 9], [1.9, 13.2]]

Of course at user’s discretion one dimensional lists of can be used too, in which case points will be placed in consecutive order on the X axis as shown in the following code sample:

data: [2,5,16,22,34]

On the next image is a sample view of the The Shield UI Scatter Chart:

If we need, using the dataPointText property we may display the Y values of each scatter point as shown in the code below:

seriesSettings: {
scatter:{
      dataPointText: {
        enabled: true
  }
 }
}, 

Having done so, the chart will look similar to the image below:

For more enhanced interactivity, we may also take use of the axisMarkers – vertical and/or horizontal lines, displayed on the chart when user selects a point. On the next image we have a view of the scatter chart with one point selected and the axisMarkers being visible:

The axisMarkers is also quite convenient when user zooms in on data of the chart. Since by default zooming is turned off, we need to enable it by only setting the desired zoom mode- vertical, horizontal or both. The following code shows us how to enable both vertical and horizontal zoom:

zoomMode: "xy",

Depending on our needs, we may add additional axes to our Scatter Chart so that reading data from it is even easier for the users. As easy as usual, this Shield UI Scatter Chart can be easily bound to local or remote data. The next piece of code illustrates how to declare a variable containing the data necessary for one of our data series:

  var LocalData  = [
    { x: 1, y: 4.9 },
    { x: 33, y: 14.9 },
    { x: 11, y: 42.9 },
    { x: 41, y: 34.9 },
    { x:17, y: 78.2 }
]; 

A live editable example with remarks for the Shield UIScatter Chart can be found here: Live Example

More information and code samples for the Scatter chart type can be found here: Documentation and examples