Blog

Infragistics jQuery Chart with Bubble Series – Tips & Tricks

[Infragistics] Mihail Mateev / Sunday, May 13, 2012

Introduction

Infragistics jQuery Chart offers exciting new features. An overview of the igDataChart features is available in the blog Infragistics jQuery Chart New Features in 12.1 Release. One of these new features – bubble series has too many features to be possible to describe it the overview blog about new Infragistics jQuery Chart. This feature is not just an inheritor of the scatter series, that let you create quick and easy jQuery charts in specific cases.

Bubble series makes possible to visualize up to 5 dimensional data in your charts that makes it perfect for data visualization. You could use position on the X axis, Y axis, color, bubble size and to change all these options when change the time.

Motivation

It is a pretty easy to work with Bubble Series for igDataChart. Currently there are not available online examples to show in detail how to use most of Bubble Series features . There was a need for an example where the user can see what the effect on all Infragistics Data Chart, when you change a setting of a bubble series. This blog is not a walkthrough – it is an overview of the bubble series features with samples how to use it.

 

Before to start

Before to start must satisfy the prerequisites for working with NetAdvantage for jQuery and in particular with Infragistics jQuery Chart:

Requirements:

You need to add in the project Infragistics 12.1 release scripts(under Scripts folder) and styles (under Content folder).

Additionally you can also load the URLs directly from Microsoft and Google’s CDNs:

Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js

Google CDN: https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

Infragistics provides CDN support via a third party CDN web service provider. The following table lists the URLs that are used in the Infragistics CDN-enabled applications. (The URLs and providers subject to change.)

In HTML:

 1:



 2:



 3:

 

In JavaScript:

 1: $.ig.loader({
 2:             scriptPath: "http://cdn-na.infragistics.com/jquery/20121/1000/js/",
 3:             cssPath: 
 4: http://cdn-na.infragistics.com/jquery/20121/1000/css/
 5:         });

 

Create igDataChart with Bubble Series

To create bubble series you need to set type: “bubble” for the specified series. Using bubble series you can set:

  • xAxis -the effective x-axis for the series object;
  • yAxis - the effective y-axis for the series object;
  • xMemberPath – the x-axis  value mapping property for the series object;
  • yMemberPath – the y-axis  value mapping property for the series object;
  • radiusMemberPath - the radius mapping property for the series object;
  • fillMemberPath - the fill mapping property for the series object;
  • labelMemberPath - the Label mapping property for the series object;
  • fillScale - the brush scale for the marker brush;
  • markerType – the type (of the shape) of the series marker;
  • radiusScale - the radius size scale for the bubbles;

 

 1: <div class="chartWrapper">
 2:     <div id="chart1">div>
 3:     <div id="legend1">div>
 4: div>

 

 1: $("#chart1").igDataChart({
 2:                 width: "750px",
 3:                 height: "500px",
 4:                 dataSource: currData,
 5:                 axes: [{
 6:                     name: "xAxis",
 7:                     type: "numericX"
 8:                 },
 9:                 {
 10:                     name: "yAxis",
 11:                     type: "numericY",
 12:                     strip: 'rgba(0,0,0,0.1)'
 13:                 }],
 14:                 series: [{
 15:                     name: "series1",
 16:  
 17:                     type: "bubble",
 18:                     xAxis: "xAxis",
 19:                     yAxis: "yAxis",
 20:                     xMemberPath: "Value1",
 21:                     yMemberPath: "Value2",
 22:                     radiusMemberPath: "Value3",
 23:                     fillMemberPath: "Value3",
 24:                     labelMemberPath: "Label",
 25:                     fillScale: currentFillScale,
 26:                     markerType: 'automatic',
 27:                     radiusScale: radiusScale
 28:                 }],
 29:                 legend: { element: 'legend1', type: 'item' },
 30:                 windowResponse: "immediate"
 31:             });

 

Marker Type

If you want to have “bubbles” with different shape, you can set the markerType option in this way:

markerType: ‘[your marker type]’ 

or in a real case:

markerType: ‘pyramid’

Bubble series offer marker types as Enumeration.

The code below show how can use html select control to select the marker type and to set it to the Infragistics jQuery Chart.

 1: <div class='option'>
 2:     <select id="markerTypes">
 3:         <option value="automatic" selected="selected">Automaticoption>
 4:         <option value="none">Noneoption>
 5:         <option value="circle">Circleoption>
 6:         <option value="triangle">Triangleoption>
 7:         <option value="pyramid">Pyramidoption>
 8:         <option value="square">Squareoption>
 9:         <option value="diamond">Diamondoption>
 10:         <option value="pentagon">Pentagonoption>
 11:         <option value="hexagon">Hexagonoption>
 12:         <option value="tetragram">Tetragramoption>
 13:         <option value="pentagram">Pentagramoption>
 14:         <option value="hexagram">Hexagramoption>
 15:     select>
 16: div>

 

When you change the markerType option you need to raise the styleUpdated event to let igDataChart to know about the change of  style.

 1: //marker types
 2: $("#markerTypes").change(function (e) {
 3:     $("#chart1").igDataChart("option", "series", [{ name: "series1", markerType: $(this).val()}]);
 4:     $("#chart1").igDataChart('styleUpdated');
 5: });

 

The default markerType value is ‘automatic’ that sets the ‘circle’ as a marker type.

You can change the marker type selecting one of the available options.

Radius Scale

The radius scale is another one important option. It gives an opportunity to scale the size of  the bubbles  in accordance of specific needs. Radius Scale is a composite feature – it includes options:

  • minimumValue – specifies the minimum value, used for the radius
  • maximumValue – specifies the maximum value,  used for the radius
  • isLogarithmic - allows the radius of the bubble to be  in a logarithmic dependence of the values

The code below shows how to change the minimum value using a slider

 1:
class='option'>
 2:
class="optionText"> Minimum Value:
 3:
"minimumSizeSlider"class="slider">
 4:
class="optionText" id='minimumSizeText'>5
 5:

 

 1: $("#minimumSizeSlider").slider({
 2:     slide: function (event, ui) {
 3:         $("#minimumSizeText").text(ui.value.toString());
 4:         radiusScale.minimumValue = ui.value;
 5:         $("#chart1").igDataChart("option", "series", [{ name: "series1", radiusScale: radiusScale}]);
 6:         $("#chart1").igDataChart('styleUpdated');
 7:     },
 8:     min: 5,
 9:     max: 100,
 10:     value: 20
 11: });

You could change the maximum value in a similar way.

 1:
class='option'>
 2:
class="optionText"> Maximum Value:
 3:
"maximumSizeSlider"class="slider">
 4:
class="optionText" id='maximumSizeText'>120
 5:

 

 1: $("#maximumSizeSlider").slider({
 2:     slide: function (event, ui) {
 3:         $("#maximumSizeText").text(ui.value.toString());
 4:         radiusScale.maximumValue = ui.value;
 5:         $("#chart1").igDataChart("option", "series", [{ name: "series1", radiusScale: radiusScale}]);
 6:         $("#chart1").igDataChart('styleUpdated');
 7:     },
 8:     min: 100,
 9:     max: 200,
 10:     value: 120
 11: });

 

The snippets below show how to switch between linear and logarithmic scale for the bubble radius using a checkbox

 1:
class='option'>
 2:
class="optionText">Is Logarithmic:
 3:         "checkbox" id='chkSizeLogarithmic'/>
 4:     
 5:

 

 1: $('#chkSizeLogarithmic').change(function () {
 2:     radiusScale.isLogarithmic = $(this).attr("checked");
 3:     $("#chart1").igDataChart("option", "series", [{ name: "series1", radiusScale: radiusScale}]);
 4:     $("#chart1").igDataChart('styleUpdated');
 5: });

 

The sample application demonstrates all possible cases when you change the options of the radius scale. 

 Brush Scale

  • Brush Scale Type

Bubble series offer fillScale option to change the brush scale for the markers.

It is possible to use two types of the brush scale: Value Brush Scale and Custom Brush Scale.

Value brush scale uses a set of values from one of the numeric columns in the dataSource to determine an interpolated brush for bubbles. The column is specified with fillMemberPath property. This axis scale can be linear or logarithmic. Also, it can have user-specified minimumValue and maximumValue. When a range is set on this scale, bubbles with values that fall outside the range do not get a brush from the brushes collection and are not colored.

Custom Palette Brush Scale uses the index of a bubble marker to select a brush from the brushes collection. When the brushSelectionMode property is set to the ‘select’ enumerable value, the bubbles are colored sequentially. When brushSelectionMode is set to ‘interpolate’, the brush is interpolated based on the bubble’s index and the number of brushes in the collection.

The code below demonstrates how to change the brush scale type

 1: <div class='option'>
 2:     <select id="brushScaleType" style="width: 150px">
 3:         <option value="value" selected="selected">Value Brush Scaleoption>
 4:         <option value="customPalette">Custom Palette Brush Scaleoption>
 5:     select>
 6: div>

 

Brush palette definition

 1: var brushes = ["#1AA1E2", '#189AD9', '#1692CE', '#1385BC', '#0F79AB', 
 2: '#0C6B99', '#095E88', '#055277', '#024669', '#003F5E'];
 3: var radiusScale = { minimumValue: 20, maximumValue: 120, isLogarithmic: false };
 4: var currentFillScale;
 5: var valueBrushScale =
 6:     {
 7:         type: "value",
 8:         minimumValue: 0,
 9:         maximumValue: 200,
 10:         brushes: brushes
 11:     };
 12: var customPaletteBrushScale =
 13:     {
 14:         type: "customPalette",
 15:         brushes: brushes,
 16:         brushSelectionMode: 'select'
 17:     };

 

Changing the brush scale using the fillScale option.

 1: $("#brushScaleType").change(function (e) {
 2:      $('#customScaleOptions').toggle();
 3:      $('#valueScaleOptions').toggle();
 4:      if ($(this).val() === 'value') {
 5:          currentFillScale = valueBrushScale;
 6:      } else {
 7:          currentFillScale = customPaletteBrushScale;
 8:      }
 9:      $("#chart1").igDataChart("option", "series", [{ name: "series1", fillScale: currentFillScale}]);
 10:      $("#chart1").igDataChart('styleUpdated');
 11:  
 12:  });

Sample demo demonstrates the result when you change the brush scale. 

  • Brush Selection Mode

Brush Selection Mode is responsible how map series values to the brushes.

When the brushSelectionMode property is set to the ‘select’ enumerable value, the bubbles are colored sequentially. When brushSelectionMode is set to ‘interpolate’, the brush is interpolated based on the bubble’s index and the number of brushes in the collection.

The sample below demonstrates how to change the brush selection mode.

 1: <select id="brushSelectionMode">
 2:     <option value="select" selected="selected">Selectoption>
 3:     <option value="interpolate">Interpolateoption>
 4: select>

 

 1: $('#brushSelectionMode').change(function () {
 2:     currentFillScale.brushSelectionMode = $(this).val();
 3:     $("#chart1").igDataChart("option", "series", [{ name: "series1", fillScale: currentFillScale}]);
 4:     $("#chart1").igDataChart('styleUpdated');
 5: });

 

Fill in the bubbles

When you are using Value Brush Scale it is possible to change several options:

One important option is ‘fillmemberPath’. This is the fill mapping property for the current series object. Possible options are to map bubble radius, x-location and y-location.

The code below shows how to change the fillMemberPath option.

 1: <select id="radiusPath">
 2:     <option value="Value3" selected="selected">Bubble Radiusoption>
 3:     <option value="Value2">Location Yoption>
 4:     <option value="Value1">Location Xoption>
 5: select>

 

 1: $("#radiusPath").change(function () {
 2:     $("#chart1").igDataChart("option", "series", [{ name: "series1", fillMemberPath: $(this).val()}]);
 3:     $("#chart1").igDataChart('styleUpdated');
 4: });

 

Value Brush Scale offers also minimumValue, maximumValue and isLogarithmic options, very similar to the same options for the Radius Scale

 1: <div class='option'>
 2:     <div class="optionText">    Minimum Value:    div> 
 3:     <div id="minimumValueSlider" class="slider">div>
 4:     <div class="optionText" id='minimumValueText'>5div> 
 5: div>
 6: <div  class='option'>
 7:     <div class="optionText">    Maximum Value:    div> 
 8:     <div id="maximumValueSlider" class="slider">div>
 9:     <div class="optionText" id='maximumValueText'>200div> 
 10: div>
 11: div>
 12: <div  class='option'>
 13:     <div class="optionText">   Is Logarithmic:    
 14:         <input type="checkbox" id='chkLogarithmic'/>
 15:     div> 
 16: div>

 

 1: $("#minimumValueSlider").slider({
 2:     slide: function (event, ui) {
 3:         $("#minimumValueText").text(ui.value.toString());
 4:         currentFillScale.minimumValue = ui.value;
 5:         $("#chart1").igDataChart("option", "series", [{ name: "series1", fillScale: currentFillScale}]);
 6:         $("#chart1").igDataChart('styleUpdated');
 7:     },
 8:     min: 5,
 9:     max: 100,
 10:     value: 5,
 11:     step: 5
 12: });
 13:  
 14: $("#maximumValueSlider").slider({
 15:     slide: function (event, ui) {
 16:         $("#maximumValueText").text(ui.value.toString());
 17:         currentFillScale.maximumValue = ui.value;
 18:         $("#chart1").igDataChart("option", "series", [{ name: "series1", fillScale: currentFillScale}]);
 19:         $("#chart1").igDataChart('styleUpdated');
 20:     },
 21:     min: 100,
 22:     max: 200,
 23:     value: 200
 24: });
 25:  
 26: $('#chkLogarithmic').change(function () {
 27:     currentFillScale.isLogarithmic = $(this).attr("checked");
 28:     $("#chart1").igDataChart("option", "series", [{ name: "series1", fillScale: currentFillScale}]);
 29:     $("#chart1").igDataChart('styleUpdated');
 30: });
 31:  
 32: 

 

The screens below show how to use Value Brush Scale options from the application UI 

Special thanks to Nikolai Dimitrov, R&D Engineer - Web Client at Infragistics, who helped to create many of the examples

Examples  source code can be found here