Wijmo UI for the Web

Wijmo 2.0.8 Released

Wijmo 2.0.8 has officially released. We have been doing plenty of bug fixes and feature enhancements since 2.0.0.

Chart Data-binding Lands in Wijmo!

The biggest new feature in this release is data-binding support in our charts. We have added options that provide binding support for anything form a simple bar chart to a complex grouped bar chart.

We have added the following options to the Charts

dataSource

Option added to all defined widgets that will support binding to dataView
Type: array

data.x.bind

Defines field name used from dataSource instead of explicitly defining data as an array in the x option. This will be shared for all series in the seriesList unless overridden.
Type: string

seriesList.data.x.bind

Defines field name used from dataSource instead of explicitly defining data as an array in the x option.
Type: string

seriesList.data.y.bind

Defines field name used from dataSource instead of explicitly defining data as an array in the y option.
Type: string

Single-series Charts Bound to Array

For single series charts the dataSource should be set on the chart widget option. See this sample online

//Create Data
var data = [{
    Device: 'Desktops',
    Count: 5
},{
    Device: 'Notebooks',
    Count: 3
},{
    Device: 'Tablets',
    Count: 7
}];

$("#wijbarchart").wijbarchart({
    dataSource: data,
    seriesList: [{
        legendEntry: true,
        data: { x: { bind: "Devices" }, y: { bind: "Count" }}
    }]
});

Multi-series Charts with Shared Data Source

For multiple series charts that have a common dataset the dataSource should be set on the chart widget option. See this sample online

//Create Data
var data = [{
    Device: 'Desktops',
    Count: 5,
    Price: 900
},{
    Device: 'Notebooks',
    Count: 3,
    Price: 700
},{
    Device: 'Tablets',
    Count: 7,
    Price: 500
}];

$("#wijbarchart").wijbarchart({
    dataSource: data,
    data: { x: { bind: "Devices" }},
    seriesList: [{
        legendEntry: true,
        data: { y: { bind: "Count" }}
    },{
        legendEntry: true,
        data: { y: { bind: "Price" }}
    }]
});

Multi-series Charts with Different Data Sources

For charts with multiple series, a dataSource should be set on the chart widget option, unless different x or y fields are being used. In that case, the dataSource option can be defined for each series in the seriesList. See this sample online

var dataWest = [{
    Device: 'Desktops',
    Count: 5
}, {
    Device: 'Notebooks',
    Count: 3
}, {
    Device: 'Tablets',
    Count: 7
}],

dataEast = [{
	Device: 'Desktops',
	Count: 1
}, {
	Device: 'Notebooks',
	Count: 6
}, {
	Device: 'Tablets',
	Count: 8
}],

dataCentral = [{
	Device: 'Desktops',
	Count: 2
}, {
	Device: 'Notebooks',
	Count: 4.5
}, {
	Device: 'Tablets',
	Count: 2.5
}];

$("#wijbarchart").wijbarchart({
    seriesList: [{
    	dataSource: dataWest,
    	label: "West",
    	legendEntry: true,
    	data: { x: { bind: "Device" }, y: { bind: "Count"} }
    }, {
    	dataSource: dataEast,
    	label: "East",
    	legendEntry: true,
    	data: { x: { bind: "Device" }, y: { bind: "Count"} }
    }, {
    	dataSource: dataCentral,
    	label: "Central",
    	legendEntry: true,
    	data: { x: { bind: "Device" }, y: { bind: "Count"} }
    }]
});

Go get it!

Make sure to download the latest version of Wijmo and read the change log!