Blog

Infragistics jQuery Chart New Features in 12.1 Release

[Infragistics] Mihail Mateev / Saturday, April 14, 2012

NetAdvantage for jQuery Vol. 12.1 includes many new features. One of the most  important features is the outstanding Infragistics jQuery Chart.  This control is based on the successful NetAdvantage for Silverlight Data Visualization xamDataChart. In NetAdvantage for jQuery 2011 Vol.2 there was available most of the charting features as CTP. All igDataChart features available in 11.2 release now are improved and available as RTM. Overview of the Infragistics jQuery Chart features you could find in the articles "NetAdvantage for jQuery 2012 Volume 1: Sneak Peek" and  “What's New in NetAdvantage for jQuery 2012 Vol.1”.

Now igDataChart provides several completely new features:

  • Bubble Series
  • Scatter Line Series
  • Composite Charts: charts with many Y-axes with different range and many different data series types.
  • Crosshair Cursor
  • Motion Framework Implementation

This blog is focused on these  new igDataChart  features in 12.1 Release.

You will learn how to use it via simple ASP.Net MVC3 application. MVC3 application that provides information about the population of countries around the world based on one of the last census. Data is stored in Microsoft SQL Server. Business objects are created via Entity Framework

Data is serialized as JASON in the controller.

 1: #region Countries
 2: public JsonResult Countries()
 3: {
 4:     return Json(censusEntities.Countries, JsonRequestBehavior.AllowGet);
 5: }
 6: #endregion //Countries
 7:  
 8:  
 9: #region AgesByCountries
 10: [OutputCache(VaryByParam = "countryID", Duration = 120)]
 11: public JsonResult AgesByCountries(int countryID)
 12: {
 13:     var agesByCountries = censusEntities.AgesByCountries.Where(p => p.CountryId == countryID);
 14:     return Json(agesByCountries, JsonRequestBehavior.AllowGet);
 15: }
 16: #endregion //AgesByCountries

 

Prerequisites

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

Infragistics jQuery Chart new features implementation

  • Bubble series

Bubble series propose a way to visualize multi-dimensional data. You could have up to four dimensions using X coordinate,  Y coordinate, bubble radius and markers color.

Implementation of the bubble series is a very similar to scatter series usage (you can think of bubble series as a special case of scatter series). There are specific options like: radiusMemberPath, fillMemberPath, radiusScale, fillScale etc.

Here is JavaScript implementation of the bubble series.

 1: series: [
 2:         { name: "series",
 3:             title: "Country Population",
 4:             type: "bubble",
 5:             xAxis: "xAxis",
 6:             yAxis: "yAxis",
 7:             xMemberPath: "AgesData",
 8:             yMemberPath: "LabelId",
 9:             radiusMemberPath: "AgesData",
 10:             fillMemberPath: "AgesData",
 11:             radiusScale: { minimumValue: 15, maximumValue: 80 },
 12:             markerType: "circle",
 13:             fillScale: {
 14:                 type: "value",
 15:                 brushes: ["yellow", "green", "blue"],
 16:                 minimumValue: 0,
 17:                 maximumValue: 100
 18:             },
 19:             transitionDuration: 2500
 20:         }]

 

Here is the implementation with ASP.Net MVC3 helper using Razor

 1: .Series(series =>
 2:                 {
 3:                     series
 4:                         .Bubble("series").Title("Country Population")
 5:                         .XAxis("xAxis").YAxis("yAxis")
 6:                         .XMemberPath("AgesData").YMemberPath("LabelId")
 7:                         .RadiusMemberPath("AgesData").FillMemberPath("AgesData").RadiusScale(x => x.MinimumValue(15.0).MaximumValue(80.0))
 8:                         .MarkerType(MarkerType.Circle)
 9:                         .FillScale(x => x.Value().Brushes(new List<string>() { "yellow", "green", "blue" })).TransitionDuration(2500);
 10:                 })

 

Here is the code to add igDataChart with bubble series in JavaScript

 1: $("#chart").igDataChart({
 2:     width: "600px",
 3:     height: "300px",
 4:     dataSource: "Home/AgesByCountries?countryID=2",
 5:  
 6:     axes: [{ name: "xAxis", type: "numericX", minimumValue: -10, maximumValue: 110, isLogarithmic: true },
 7:                 { name: "yAxis", type: "numericY", minimumValue: 0, maximumValue: 5 },
 8:                 ],
 9:  
 10:     series: [
 11:             { name: "series",
 12:                 title: "Country Population",
 13:                 type: "bubble",
 14:                 xAxis: "xAxis",
 15:                 yAxis: "yAxis",
 16:                 xMemberPath: "AgesData",
 17:                 yMemberPath: "LabelId",
 18:                 radiusMemberPath: "AgesData",
 19:                 fillMemberPath: "AgesData",
 20:                 radiusScale: { minimumValue: 15, maximumValue: 80 },
 21:                 markerType: "circle",
 22:                 fillScale: {
 23:                     type: "value",
 24:                     brushes: ["yellow", "green", "blue"],
 25:                     minimumValue: 0,
 26:                     maximumValue: 100
 27:                 },
 28:                 transitionDuration: 2500
 29:             }],
 30:     horizontalZoomable: true,
 31:  
 32:     verticalZoomable: true
 33: }
 34:  
 35: );
 36: $("#chart").igDataChart("option", "crosshairVisibility", "visible");

This is the MVC implementation

 1: @( Html.Infragistics().DataChart().DataSourceUrl("/Home/AgesByCountries?countryID=2").ResponseDataKey("")
 2:    .ID("chart")
 3:    .Width("600px")
 4:    .Height("300px")
 5:    .VerticalZoomable(true)
 6:    .HorizontalZoomable(true).CrosshairVisibility(Visibility.Visible)
 7:    .Axes(axes =>
 8:     {
 9:         axes.NumericX("xAxis").MinimumValue(-10).MaximumValue(110).IsLogarithmic(true);
 10:         axes.NumericY("yAxis").MinimumValue(0).MaximumValue(5);
 11:     })
 12:    .Series(series =>
 13:     {
 14:         series
 15:             .Bubble("series").Title("Country Population")
 16:             .XAxis("xAxis").YAxis("yAxis")
 17:             .XMemberPath("AgesData").YMemberPath("LabelId")
 18:             .RadiusMemberPath("AgesData").FillMemberPath("AgesData").RadiusScale(x => x.MinimumValue(15.0).MaximumValue(80.0))
 19:             .MarkerType(MarkerType.Circle)
 20:             .FillScale(x => x.Value().Brushes(new List<string>() { "yellow", "green", "blue" })).TransitionDuration(2500);
 21:     })
 22:    .DataBind()
 23:    .Render()
 24: )
  • Crosshair Cursor

Crosshair cursor makes it easier determination of the position under the cursor on the chart

Crosshair cursor could be se via “crosshairVisibility” option. Default value is “collapsed”.

 1: $("#chart").igDataChart("option", "crosshairVisibility", "visible");

or

 1: $("#chart").igDataChart({  crosshairVisibility: "collapsed" });

 

Infragistics jQuery Chart MVC Wrapper has a property “CrosshairVisibility”, that could be used to maintain a crosshair cursor visibility.

 1: .CrosshairVisibility(Visibility.Visible)

 

  • Motion Framework Implementation

The Motion Framework for charts allows developers using the NetAdvantage for jQuery chart controls to animate the contents of a chart to increase visual appeal and imply trends or other meaning behind the data. When data behind the chart is updated the corresponding API method of the igDataChart control is called to initiate chart animation.

To be possible to use animations in igDataChart you need to set transitionDuration option in JavaScript.

 1: transitionDuration: 2500

 

TransitionDuration property in MVC helper.

 1: .TransitionDuration(2500);

 

Motion Framework animates transitions when in series an item is added or removed

 1: rowSelectionChanged: function (ui, args) {
 2:                        var url = "Home/AgesByCountries?countryID=" + args.row.element[0].cells[0].textContent;
 3:                        $.ajax({ url: url, success: function (data) {
 4:                            $.each(data, function (index, value) { $('#chart').igDataChart('addItem', value); });
 5:                            var ds = $('#chart').igDataChart('option', 'dataSource');
 6:                            k++;
 7:                            if (k > 5) {
 8:                              
 9:                                $('#chart').igDataChart('removeItem', 0);
 10:                                $("#chart").igDataChart("notifyRemoveItem", chartData, 0, oldItem);
 11:                                k--;
 12:                            }
 13:  
 14:                            $('#chart').igDataChart('resetZoom');
 15:                        },
 16:                            type: 'POST', dataType: 'json'
 17:                        });
 18:                    }

 

  • Scatter Line Series

In the new NetAdvantage for jQuery 2012 Vol.1 as a result of many consumer requests are was added Scatter Line Series

Scatter Line Series implementation in jQuery.

 1: series: [          
 2:  {
 3:      name: "slSeries",
 4:      type: "scatterLine",
 5:      xAxis: "xAxis1",
 6:      yAxis: "yAxis1",
 7:      xMemberPath: "CountryID",
 8:      yMemberPath: "Area",
 9:      legend: { element: "legend" },
 10:      thickness: 4
 11:  }]

 

Scatter Line Series implementation with ASP.Net MVC helper.

 1: .Series(series =>
 2:    {
 3:        series
 4:            .ScatterLine("slSeries")
 5:            .XAxis("xAxis1").YAxis("yAxis1")
 6:            .XMemberPath("CountryID").YMemberPath("Area")
 7:            .Thickness(4.0);
 8:    })

 

  • Composite Charts

In 12.1 release is added support of the multiple Y-axes with different range and many different data series types is important when you want to create composite charts.

In the sample is added igDataChart instance with numeric and category X and two numeric Y axes. Chart has two series – one Scatter Line Series and another Column Series.

Multiple axis implementation in jQuery

 1: axes: [{
 2:                name: "xAxis1",
 3:                type: "numericX",
 4:                minimumValue: -5, maximumValue: 270, isLogarithmic: false 
 5:            }, {
 6:                name: "yAxis1",
 7:                type: "numericY",
 8:                minimumValue: -1000, maximumValue: 2000000, isLogarithmic: true
 9:            }, {
 10:                type: "categoryX",
 11:                name: "xAxis2",
 12:                label: "CountryID",
 13:                strokeThickness: 1
 14:            }, {
 15:                name: "yAxis2",
 16:                type: "numericY",
 17:                minimumValue: -1000, maximumValue: 1400000000, isLogarithmic: false
 18:            }]

 

Multiple axis implementation with MVC helper.

 1: .Axes(axes =>
 2:                {
 3:                    axes.NumericX("xAxis1").MinimumValue(-5).MaximumValue(270);
 4:                    axes.NumericY("yAxis1").MinimumValue(-1000).MaximumValue(1800000).IsLogarithmic(true);
 5:                    axes.CategoryX("xAxis2").StrokeThickness(1.0).Label("CountryID");
 6:                    axes.NumericY("yAxis2").MinimumValue(-1000).MaximumValue(1400000000);
 7:                })

 

Here is the composite chart implementation with JavaScript.

 1: $("#scatterChart").igDataChart({
 2:     width: "1270px",
 3:     height: "300px",
 4:     dataSource: "Home/Countries",
 5:     axes: [{
 6:         name: "xAxis1",
 7:         type: "numericX",
 8:         minimumValue: -5, maximumValue: 270, isLogarithmic: false 
 9:     }, {
 10:         name: "yAxis1",
 11:         type: "numericY",
 12:         minimumValue: -1000, maximumValue: 2000000, isLogarithmic: true
 13:     }, {
 14:         type: "categoryX",
 15:         name: "xAxis2",
 16:         label: "CountryID",
 17:         strokeThickness: 1
 18:     }, {
 19:         name: "yAxis2",
 20:         type: "numericY",
 21:         minimumValue: -1000, maximumValue: 1400000000, isLogarithmic: false
 22:     }],
 23:     series: [
 24:     {
 25:             type: "column",
 26:             name: "populationSeries",
 27:             title: "Population",
 28:             xAxis: "xAxis2",
 29:             yAxis: "yAxis2",
 30:             valueMemberPath: "population",
 31:             legend: { element: "legend"},
 32:             showTooltip: true
 33:     },
 34:     {
 35:         name: "slSeries",
 36:         type: "scatterLine",
 37:         xAxis: "xAxis1",
 38:         yAxis: "yAxis1",
 39:         xMemberPath: "CountryID",
 40:         yMemberPath: "Area",
 41:         legend: { element: "legend" },
 42:         thickness: 4
 43:     }],
 44:     horizontalZoomable: true,
 45:     verticalZoomable: true,
 46:     windowResponse: "immediate"
 47: });
 48: $("#scatterChart").igDataChart("option", "crosshairVisibility", "visible");

 

Composite chart implementation with ASP.Net MVC3 helper

 1: @(
 2:     Html.Infragistics().DataChart().DataSourceUrl("/Home/Countries").ResponseDataKey("")
 3:    .ID("scatterChart")
 4:    .Width("1270px")
 5:    .Height("300px")
 6:    .VerticalZoomable(true)
 7:    .HorizontalZoomable(true).CrosshairVisibility(Visibility.Visible)
 8:    .WindowResponse(WindowResponse.Immediate).Legend(legend => legend.ID("legend"))
 9:    .Axes(axes =>
 10:     {
 11:         axes.NumericX("xAxis1").MinimumValue(-5).MaximumValue(270);
 12:         axes.NumericY("yAxis1").MinimumValue(-1000).MaximumValue(1800000).IsLogarithmic(true);
 13:         axes.CategoryX("xAxis2").StrokeThickness(1.0).Label("CountryID");
 14:         axes.NumericY("yAxis2").MinimumValue(-1000).MaximumValue(1400000000);
 15:     })
 16:    .Series(series =>
 17:     {
 18:         series
 19:             .Column("populationSeries").Title("Population")
 20:             .XAxis("xAxis2").YAxis("yAxis2")
 21:             .ValueMemberPath("population")
 22:             .ShowTooltip(true);
 23:         series
 24:             .ScatterLine("slSeries")
 25:             .XAxis("xAxis1").YAxis("yAxis1")
 26:             .XMemberPath("CountryID").YMemberPath("Area")
 27:             .Thickness(4.0);
 28:     })
 29:    .DataBind()
 30:    .Render()
 31: )

 

Real-Life Applications

The new Infragistics jQuery Chart features help to create a nice dashboards in your web applications.

A dashboard with Infragistics jQuery Chart and Grid (JavaScript implementation)

The MVC implementation of the igGrid and igDataChart offers the sample functionalities.

  

Demo application will be available for download after NetAdvantage 2012 Vol.1 RTM release date.

You can try this product very soon. Follow news from Infragistics in http://infragistics.com/ and twitter: @infragistics for more information about new Infragistics products.