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!


Chart Binding
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!