You can use different chart types for each chart series by setting the chartType
property on the series itself. This overrides the chart's default chart type.
In the example below, the chart's chartType property is set to Column,
but the Downloads series overrides it to use the LineAndSymbol chart type:
Use legend's properties to customize the appearance of the chart legend, and
header, footer, and axis title properties to add titles
to your charts.
You can style the legend and titles using CSS. The CSS tab below shows the rules
used to customize the appearance of the legend and titles. Notice that these are
SVG elements, so you have to use CSS attributes such as "fill" instead of "color."
The FlexChart has built-in support for tooltips. By default, the control displays
tooltips when the user touches or hovers the mouse on a data point.
The tooltip content is generated using a template, which may contain the following
parameters:
seriesName: The name of the series that contains the chart element.
pointIndex: The index of the chart element within the series.
x: The x value of the chart element.
y: The y value of the chart element.
By default, the tooltip template is set to
<b>{seriesName}</b><br/>{x} {y},
and you can see how that works in the charts above.
In this example, we set the tooltip template to
<b>{seriesName}</b> <img src='resources/{x}.png'/><br/>{y},
which replaces the country name with the country's flag.
You can disable the chart tooltips by setting the template to an empty string.
The FlexChart automatically picks colors for each series based on a default
palette, which you can override by setting the palette property.
But you can also override the default settings by setting the style
property of any series to an object that specifies SVG styling attributes,
including fill, stroke, strokeThickness, and so on.
The Series.style property is an exception to the general rule that
all styling in Wijmo is done through CSS. The exception reflects the fact
that many charts have dynamic series, which would be impossible to style
in advance. For example, a stock chart may show series selected by the
user while running the application.
The chart in this example uses the style and symbolStyle properties
to select style attributes for each series:
// create FlexChart and variables for its series
var chartSeriesStyle = new wijmo.chart.FlexChart('#chartSeriesStyle'),
salesSeries, expensesSeries, downloadsSeries;
chartSeriesStyle.itemsSource = appData;
chartSeriesStyle.bindingX = 'country';
// initialize "Sales" data series
salesSeries = new wijmo.chart.Series();
salesSeries.name = 'Sales';
salesSeries.binding = 'sales';
salesSeries.style = {};
salesSeries.style.fill = 'green';
salesSeries.style.stroke = 'darkgreen';
salesSeries.style.strokeWidth = 1;
// initialize "Expenses" data series
expensesSeries = new wijmo.chart.Series();
expensesSeries.name = 'Expenses';
expensesSeries.binding = 'expenses';
expensesSeries.style = {};
expensesSeries.style.fill = 'red';
expensesSeries.style.stroke = 'darkred';
expensesSeries.style.strokeWidth = 1;
// initialize "Downloads" data series
downloadsSeries = new wijmo.chart.Series();
downloadsSeries.name = 'Downloads';
downloadsSeries.binding = 'downloads';
downloadsSeries.chartType = wijmo.chart.ChartType.LineSymbols;
downloadsSeries.style = {};
downloadsSeries.symbolStyle = {};
downloadsSeries.style.stroke = 'orange';
downloadsSeries.style.strokeWidth = 5;
downloadsSeries.symbolStyle.fill = 'gold';
downloadsSeries.symbolStyle.stroke = 'gold';
// add data series to chart
chartSeriesStyle.series.push(salesSeries);
chartSeriesStyle.series.push(expensesSeries);
chartSeriesStyle.series.push(downloadsSeries);
Result (live):
Customizing Axes
Use axis properties to customize the chart's axes, including ranges (minimum and maximum),
label format, tickmark spacing, and gridlines.
The Axis class has boolean properties that allow you to turn features on
or off (axisLine, labels, majorTickMarks, and majorGrid).
You can style the appearance of the features that are turned on using CSS.
The appearance of the FlexChart is defined in CSS. In addition to the default theme, we
include about a dozen professionally designed themes that customize the appearance of
all Wijmo controls to achieve a consistent attractive look.
To customize the appearance of the chart, inspect the elements you want to style and then
create some CSS rules that apply to those elements.
For example, if you right-click one of the labels on the X axis in IE or Chrome, you
will see that it is an element with the "wj-label" class, that is contained in an
element with the "wj-axis-x" class, which is contained in the the top-level control
element that has the "wj-flexchart" class. The first CSS rule in this example uses
this information to customize the X labels. The rule selector adds the additional
requirement that the parent element must have, the "wj-flexchart" and the
"custom-flex-chart" classes. Without this, the rule would apply to all the charts on the
page.
The FlexChart allows you to select series or data points by clicking or touching them.
Use the selectionMode property to specify whether you want to allow selection
by series, by data point, or no selection at all (selection is off by default.)
Setting the selectionMode property to Series or Point causes
the FlexChart to update the Selection property when the user clicks the
mouse, and to apply "wj-state-selected" class to the selected chart elements.
The Selection property returns the currently selected series. To get the
currently selected data point, get the currently selected item within the
selected series using the Series.collectionView.currentItem property
as shown in the example.
var chartSelectionMode = new wijmo.chart.FlexChart('#chartSelectionMode'),
typeMenu = new wijmo.input.Menu('#chartTypeMenu'),
selectionModeMenu = new wijmo.input.Menu('#seletionModeMenu'),
seriesContainer = document.getElementById('seriesContainer'),
detailContainer = document.getElementById('detailContainer');
// initialize FlexChart's properties
chartSelectionMode.initialize({
itemsSource: appData,
bindingX: 'country',
selectionMode: wijmo.chart.SelectionMode.Series,
series: [
{ name: 'Sales', binding: 'sales' },
{ name: 'Expenses', binding: 'expenses' },
{ name: 'Downloads', binding: 'downloads' }
]
});
// update details when the FlexChart's selection changes
chartSelectionMode.selectionChanged.addHandler(function () {
var currentSelection = chartSelectionMode.selection,
currentSelectItem;
if (currentSelection) {
seriesContainer.style.display = 'block'; // show container
document.getElementById('seriesName').innerHTML = currentSelection.name;
currentSelectItem = currentSelection.collectionView.currentItem;
if (currentSelectItem && selectionModeMenu.selectedValue === '2') {
setSeriesDetail(currentSelectItem); // update details
}
}
});
// update Menu header
updateMenuHeader(typeMenu, 'Chart Type');
typeMenu.selectedIndexChanged.addHandler(function () {
if (typeMenu.selectedValue) {
// update FlexChart' chartType
chartSelectionMode.chartType = parseInt(typeMenu.selectedValue);
// update Menu header
updateMenuHeader(typeMenu, 'Chart Type');
}
});
// update Menu header
updateMenuHeader(selectionModeMenu, 'Selection Mode');
selectionModeMenu.selectedIndexChanged.addHandler(function () {
if (selectionModeMenu.selectedValue) {
// update FlexChart' selectionMode
chartSelectionMode.selectionMode = parseInt(selectionModeMenu.selectedValue);
// toggle the series panel's visiblity
if (selectionModeMenu.selectedValue === '0' || !chartSelectionMode.selection) {
seriesContainer.style.display = 'none';
}
else {
seriesContainer.style.display = 'block';
}
// toggle the series panel's visiblity
if (selectionModeMenu.selectedValue !== '2' || !chartSelectionMode.selection || !chartSelectionMode.selection.collectionView.currentItem) {
detailContainer.style.display = 'none';
}
else {
// update the details
setSeriesDetail(chartSelectionMode.selection.collectionView.currentItem);
}
// update Menu header
updateMenuHeader(selectionModeMenu, 'Selection Mode');
}
});
// helper method to show details of the FlexChart's current selection
function setSeriesDetail(currentSelectItem) {
detailContainer.style.display = 'block';
document.getElementById('seriesCountry').innerHTML = currentSelectItem.country;
document.getElementById('seriesSales').innerHTML = wijmo.Globalize.format(currentSelectItem.sales, 'c2');
document.getElementById('seriesExpenses').innerHTML = wijmo.Globalize.format(currentSelectItem.expenses, 'c2');
document.getElementById('seriesDownloads').innerHTML = wijmo.Globalize.format(currentSelectItem.downloads, 'n0');
};
// helper method for changing menu header
function updateMenuHeader(menu, prefix) {
menu.header = '<b>' + prefix + '</b>: ' + menu.text;
}
Result (live):
Current Selection
Series:
Country
Sales
Expenses
Downloads
Toggle Series
The Series class has a visibility property that allows you to
determine whether a series should be shown in the chart and in the legend,
only in the legend, or completely hidden.
This sample shows how you can use the visibility property to toggle
the visibility of a series using two methods:
Clicking on legend entries:
The chart sets the chart's option.legendToggle property to true,
which toggles the visibility property of a series when its legend entry is
clicked.
Using checkboxes:
When the checked state changed, it will set the visibility property of each series by the checked state.
// create FlexChart
var chartLegendToggle = new wijmo.chart.FlexChart('#chartLegendToggle');
// initialize FlexChart's properties
chartLegendToggle.initialize({
itemsSource: appData,
bindingX: 'country',
legendToggle: true,
series: [
{ name: 'Sales', binding: 'sales' },
{ name: 'Expenses', binding: 'expenses' },
{ name: 'Downloads', binding: 'downloads' }
]
});
chartLegendToggle.seriesVisibilityChanged.addHandler(function () {
// loop through chart series
chartLegendToggle.series.forEach(function (series) {
var seriesName = series.name,
checked = series.visibility === wijmo.chart.SeriesVisibility.Visible;
// update custom checkbox panel
document.getElementById('cb' + seriesName).checked = checked;
});
});
// loop through custom check boxes
['cbSales', 'cbExpenses', 'cbDownloads'].forEach(function (item, index) {
// update checkbox and toggle FlexChart's series visibility when clicked
var el = document.getElementById(item);
el.checked = chartLegendToggle.series[index].visibility === wijmo.chart.SeriesVisibility.Visible;
el.addEventListener('click', function () {
if (this.checked) {
chartLegendToggle.series[index].visibility = wijmo.chart.SeriesVisibility.Visible;
}
else {
chartLegendToggle.series[index].visibility = wijmo.chart.SeriesVisibility.Legend;
}
});
});
Result (live):
Sales
Expenses
Downloads
Gradient Colors
The FlexChart supports gradient colors.
The gradient descriptor is an expression formatted as
follows: <type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]].
The <type> can be either linear or radial.
The uppercase L or R letters indicate absolute coordinates offset from the SVG surface.
Lowercase l or r letters indicate coordinates calculated relative to the element to which the gradient is applied.
Coordinates specify a linear gradient vector as x1, y1, x2, y2,
or a radial gradient as cx, cy, r and optional fx, fy, fr
specifying a focal point away from the center of the circle.
Specify <colors> as a list of dash-separated CSS color values.
Each color may be followed by a custom offset and opacity value, separated with a colon character.
// create FlexChart and Menus
var chart = new wijmo.chart.FlexChart('#chartGradientColors'),
gredientLabel = document.getElementById('gradientColorsLabel'),
gradientChartType = new wijmo.input.Menu('#gradientChartType'),
type = new wijmo.input.Menu('#gradientTypeMenu'),
dtDirection = document.getElementById('dtGradientDirection'),
ddDirection = document.getElementById('ddGradientDirection'),
direction = new wijmo.input.Menu('#gradientDirectionMenu'),
startColor = new wijmo.input.InputColor('#gradientStartColor'),
startOffset = new wijmo.input.InputNumber('#gradientStartOffset'),
startOpacity = new wijmo.input.InputNumber('#gradientStartOpacity'),
endColor = new wijmo.input.InputColor('#gradientEndColor'),
endOffset = new wijmo.input.InputNumber('#gradientEndOffset'),
endOpacity = new wijmo.input.InputNumber('#gradientEndOpacity');
// initialize FlexChart's properties
chart.initialize({
itemsSource: appData,
bindingX: 'country',
series: [
{ binding: 'sales' }
]
});
applyGradientColor();
//chart type - initialize Menu's properties
updateMenuHeader(gradientChartType, 'Chart Type');
gradientChartType.selectedIndexChanged.addHandler(function () {
if (gradientChartType.selectedValue) {
chart.chartType = +gradientChartType.selectedValue;
updateMenuHeader(gradientChartType, 'Chart Type');
}
});
//startColor - initialize InputColor's properties
startColor.valueChanged.addHandler(function (sender) {
applyGradientColor();
});
startColor.value = '#ff0000';
// startOffset - initialize InputNumber's properties
startOffset.min = 0;
startOffset.max = 1;
startOffset.step = 0.1;
startOffset.valueChanged.addHandler(function (sender) {
if (sender.value < sender.min || sender.value > sender.max) {
return;
}
applyGradientColor();
});
startOffset.value = 0;
// startOpacity - initialize InputNumber's properties
startOpacity.min = 0;
startOpacity.max = 1;
startOpacity.step = 0.1;
startOpacity.valueChanged.addHandler(function (sender) {
if (sender.value < sender.min || sender.value > sender.max) {
return;
}
applyGradientColor();
});
startOpacity.value = 1;
//endColor - initialize InputColor's properties
endColor.valueChanged.addHandler(function (sender) {
applyGradientColor();
});
endColor.value = '#0000ff';
// endOffset - initialize InputNumber's properties
endOffset.min = 0;
endOffset.max = 1;
endOffset.step = 0.1;
endOffset.valueChanged.addHandler(function (sender) {
if (sender.value < sender.min || sender.value > sender.max) {
return;
}
applyGradientColor();
});
endOffset.value = 1;
// endOpacity - initialize InputNumber's properties
endOpacity.min = 0;
endOpacity.max = 1;
endOpacity.step = 0.1;
endOpacity.valueChanged.addHandler(function (sender) {
if (sender.value < sender.min || sender.value > sender.max) {
return;
}
applyGradientColor();
});
endOpacity.value = 1;
updateMenuHeader(type, 'Type');
type.selectedIndexChanged.addHandler(function () {
if (type.selectedValue) {
updateMenuHeader(type, 'Type');
applyGradientColor();
}
});
updateMenuHeader(direction, 'Direction');
direction.selectedIndexChanged.addHandler(function () {
if (direction.selectedValue) {
updateMenuHeader(direction, 'Direction');
applyGradientColor();
}
});
// helper function for Menu headers
function updateMenuHeader(menu, prefix) {
menu.header = '' + prefix + ': ' + menu.text;
}
function applyGradientColor() {
var color = '',
t = type.selectedValue,
d = direction.selectedValue;
color = t;
if (t === 'l') {
dtDirection.style.display = 'block';
ddDirection.style.display = 'block';
if (d === 'horizontal') {
color += '(0, 0, 1, 0)';
} else {
color += '(0, 0, 0, 1)';
}
} else {
dtDirection.style.display = 'none';
ddDirection.style.display = 'none';
color += '(0.5, 0.5, 0.5)'
}
color += startColor.value;
if (startOffset.value !== 0 || startOpacity.value !== 1) {
color += ':' + startOffset.value;
}
if (startOpacity.value !== 1) {
color += ':' + startOpacity.value;
}
color += '-' + endColor.value;
if (endOffset.value !== 1 || endOpacity.value !== 1) {
color += ':' + endOffset.value;
}
if (endOpacity.value !== 1) {
color += ':' + endOpacity.value;
}
gradientColorsLabel.innerHTML = color;
chart.series[0].style = {
fill: color
};
chart.refresh(true);
}
Result (live):
Generated fill string:
Start Color:
Start Offset:
Start Opacity:
End Color:
End Offset:
End Opacity:
Dynamic Charts
The FlexChart uses an ICollectionView internally, so any changes you make to the data source are automatically reflected in the chart.
In this sample, we use a timer to add items to the data source, discarding old items to keep the total count at 200. The result is a dynamic chart that scrolls as new data arrives.
