FlexChart 101

This page shows how to get started with Wijmo's FlexChart control.

Getting Started

Steps for getting started with the FlexChart in JavaScript applications:

  1. Add references to Wijmo.
  2. Add markup to serve as the FlexChart's host.
  3. Initialize the FlexChart via JavaScript and its itemSource property.
  4. Create one or more data series, and add each to the FlexChart's series collection.
  5. (Optional) Add some CSS to customize the chart's appearance.
HTML
<div id="gettingStartedChart"></div>
JS
var gsChart = new wijmo.chart.FlexChart('#gettingStartedChart', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] });
CSS
/* set default chart style */ .wj-flexchart { height: 400px; background-color: white; box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75); padding: 8px; margin-bottom: 12px; display:block; } .wj-flexchart .wj-title { font-weight: bold; } .wj-flexchart .wj-header .wj-title { font-size: 18pt; fill: #80044d; } .wj-flexchart .wj-footer .wj-title { fill: #80044d; } .wj-flexchart .wj-axis-x .wj-title, .wj-flexchart .wj-axis-y .wj-title { font-style: italic; }

Result (live):

Chart Types

The FlexChart control has three properties that allow you to customize the chart type:

  1. chartType: Selects the default chart type to be used for all the series. Individual series may override this setting.
  2. stacking: Determines whether series are plotted independently, stacked, or stacked so their sum is 100%.
  3. rotated: Flips the X and Y axes so X becomes vertical and Y horizontal.

The example below allows you to see what happens when you change these properties:

HTML
<div id="chartTypes"></div> <select id="typeMenu"> <option value="0" selected="selected">Column</option> <option value="1">Bar</option> <option value="2">Scatter</option> <option value="3">Line</option> <option value="4">LineSymbols</option> <option value="5">Area</option> <option value="9">Spline</option> <option value="10">SplineSymbols</option> <option value="11">SplineArea</option> </select> <select id="stackingMenu"> <option value="0" selected="selected">None</option> <option value="1">Stacked</option> <option value="2">Stacked 100%</option> </select> <select id="rotatedMenu"> <option value="false" selected="selected">False</option> <option value="true">True</option> </select>
JS
var ctChart = new wijmo.chart.FlexChart('#chartTypes', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] }); var typeMenu = new wijmo.input.Menu('#typeMenu', { itemClicked: function (s, e) { ctChart.chartType = parseInt(s.selectedValue); updateMenuHeader(s, 'Chart Type'); } }); updateMenuHeader(typeMenu, 'Chart Type'); var stackingMenu = new wijmo.input.Menu('#stackingMenu', { itemClicked: function (s, e) { ctChart.stacking = parseInt(s.selectedValue); updateMenuHeader(s, 'Stacking'); } }); updateMenuHeader(stackingMenu, 'Stacking'); var rotatedMenu = new wijmo.input.Menu('#rotatedMenu', { itemClicked: function (s, e) { ctChart.rotated = s.selectedValue == 'true'; updateMenuHeader(s, 'Rotated'); } }); updateMenuHeader(rotatedMenu, 'Rotated');

Result (live):

Range Bar/Column

By default, Bar and Column charts show values extending from zero to a given value. Range Bar and Column charts use two bindings so you can specify where each bar or column starts and ends.

The example below shows how to create range bar/column charts:

HTML
<div id="rangebarChart"></div> <select id="rangebarTypeMenu"> <option value="0" selected="selected">Column</option> <option value="1">Bar</option> </select> <select id="rangebarDataTypeMenu"> <option value="num1,num2" selected="selected">Number</option> <option value="date1,date2">Date</option> </select>
JS
var rngChart = new wijmo.chart.FlexChart('#rangebarChart', { itemsSource: rangeData, bindingX: 'country', series: [{ binding: 'num1,num2' }], tooltip: { content: function (ht) { var str = ht.x + ':
'; var dataTypes = rangebarDataTypeMenu.selectedValue.split(','); var min = Math.min(ht.item[dataTypes[0]], ht.item[dataTypes[1]]); var max = Math.max(ht.item[dataTypes[0]], ht.item[dataTypes[1]]); if (wijmo.isDate(ht.item[dataTypes[0]])) { str += (new Date(min)).toLocaleDateString() + ' - ' + (new Date(max)).toLocaleDateString(); } else { str += Math.round(min) + ' - ' + Math.round(max); } return str; } } }); var rangebarTypeMenu = new wijmo.input.Menu('#rangebarTypeMenu', { itemClicked: function (s, e) { rngChart.chartType = parseInt(s.selectedValue); updateMenuHeader(s, 'Chart Type'); } }); updateMenuHeader(rangebarTypeMenu, 'Chart Type'); var rangebarDataTypeMenu = new wijmo.input.Menu('#rangebarDataTypeMenu', { itemClicked: function (s, e) { rngChart.series[0].binding = s.selectedValue; updateMenuHeader(s, 'Data Type'); } }); updateMenuHeader(rangebarDataTypeMenu, 'Data Type');

Result (live):

Funnel Charts

Funnel charts are often used to represent stages in a sales process and show the amount of potential revenue for each stage. They can also be useful in identifying potential problem areas in an organization's sales processes.

The example below shows how to create and customize a Funnel Chart:

HTML
<div id="funnelChart"></div> <dl class="dl-horizontal"> <dt>Neck Width</dt> <dd> <div id="funnelNeckWidth"></div> </dd> </dl> <dl class="dl-horizontal"> <dt>Neck Height</dt> <dd> <div id="funnelNeckHeight"></div> </dd> </dl> <dl class="dl-horizontal"> <dt></dt> <dd> <select id="funnelType"> <option value="default" selected="selected">Default</option> <option value="rectangle">Rectangle</option> </select> </dd> </dl>
JS
var fnlChart = new wijmo.chart.FlexChart('#funnelChart', { itemsSource: funnelData, chartType: wijmo.chart.ChartType.Funnel, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' } ], dataLabel: { content: '{y}' }, options: { funnel: { neckWidth: 0.2, neckHeight: 0.2, type: 'default' } } }); var neckWidth = new wijmo.input.InputNumber('#funnelNeckWidth', { min: 0, max: 1, step: .1, valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { fnlChart.options.funnel.neckWidth = s.value; fnlChart.refresh(true); } }, value: 0.2 }); var neckHeight = new wijmo.input.InputNumber('#funnelNeckHeight', { min: 0, max: 1, step: .1, valueChanged: function (s, e) { if (s.value >= s.min && s.value <= s.max) { fnlChart.options.funnel.neckHeight = s.value; fnlChart.refresh(true); } }, value: 0.2 }); var funnelType = new wijmo.input.Menu('#funnelType', { itemClicked: function (s, e) { fnlChart.options.funnel.type = s.selectedValue; fnlChart.refresh(true); updateMenuHeader(s, 'Funnel Type'); } }); updateMenuHeader(funnelType, 'Funnel Type');

Result (live):

Neck Width
Neck Height

Mixed Chart Types

You can use different chart types for each chart series by setting the chartType property on individual series. 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:

HTML
<div id="mixedTypesChart"></div>
JS
var mixChart = new wijmo.chart.FlexChart('#mixedTypesChart', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads', chartType: wijmo.chart.ChartType.LineSymbols } ] });

Result (live):

Legend and Titles

Use the 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."

HTML
<div id="chartLegendAndTitles"></div> <dl class="dl-horizontal"> <dt>Header</dt><dd><input id="headerInput" class="form-control"/></dd> <dt>Footer</dt><dd><input id="footerInput" class="form-control"/></dd> <dt>X-Axis Title</dt><dd><input id="xTitleInput" class="form-control"/></dd> <dt>Y-Axis Title</dt><dd><input id="yTitleInput" class="form-control"/></dd> <dt></dt> <dd> <select id="positionMenu"> <option value="0">None</option> <option value="1">Left</option> <option value="2">Top</option> <option value="3" selected="selected">Right</option> <option value="4">Bottom</option> </select> </dd> </dl>
JS
var ltChart = new wijmo.chart.FlexChart('#chartLegendAndTitles', { itemsSource: appData, bindingX: 'country', header: 'Sample Chart', footer: 'copyright (c) ComponentOne', axisX: { title: 'country' }, axisY: { title: 'amount' }, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] }); var positionMenu = new wijmo.input.Menu('#positionMenu', { itemClicked: function (s, e) { ltChart.legend.position = parseInt(s.selectedValue); updateMenuHeader(s, 'Legend'); } }); updateMenuHeader(positionMenu, 'Legend'); // sync the input's value with FlexChart's header var headerInput = document.getElementById('headerInput'); headerInput.value = ltChart.header; headerInput.addEventListener('input', function (e) { ltChart.header = e.target.value; }); // sync the input's value with FlexChart's footer var footerInput = document.getElementById('footerInput'); footerInput.value = ltChart.footer; footerInput.addEventListener('input', function (e) { ltChart.footer = e.target.value; }); // sync the input's value with FlexChart's X-Axis title var xTitleInput = document.getElementById('xTitleInput'); xTitleInput.value = ltChart.axisX.title; xTitleInput.addEventListener('input', function (e) { ltChart.axisX.title = e.target.value; }); // sync the input's value with FlexChart's Y-Axis title var yTitleInput = document.getElementById('yTitleInput'); yTitleInput.value = ltChart.axisY.title; yTitleInput.addEventListener('input', function (e) { ltChart.axisY.title = e.target.value; });
CSS
.wj-flexchart .wj-title { font-weight: bold; } .wj-flexchart .wj-header .wj-title { font-size: 18pt; fill: #80044d; } .wj-flexchart .wj-footer .wj-title { fill: #80044d; } .wj-flexchart .wj-axis-x .wj-title, .wj-flexchart .wj-axis-y .wj-title { font-style: italic; }

Result (live):

Header
Footer
X-Axis Title
Y-Axis Title

Tooltips

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:

By default, the tooltip template is set to <b>{seriesName}</b><br/>{x} {y}. You can see how that works in the previous examples.

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.

HTML
<div id="chartTooltip"></div>
JS
var ttChart = new wijmo.chart.FlexChart('#chartTooltip', { itemsSource: appData, bindingX: 'country', tooltip: { content: "<img src='resources/{x}.png'/> <b>{seriesName}</b><br/>{y}" }, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] });

Result (live):

Styling Series

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:

HTML
<div id="chartSeriesStyle"></div>
JS
var ssChart = new wijmo.chart.FlexChart('#chartSeriesStyle', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales', style: { fill: 'green', stroke: 'darkgreen', strokeWidth: 1 } }, { name: 'Expenses', binding: 'expenses', style: { fill: 'red', stroke: 'darkred', strokeWidth: 1 } }, { name: 'Downloads', binding: 'downloads', chartType: 'LineSymbols', style: { stroke: 'orange', strokeWidth: 5 }, symbolStyle: { fill: 'gold', stroke: 'gold' } } ] });

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.

HTML
<div id="chartCustomizeAxes"></div>
JS
var axChart = new wijmo.chart.FlexChart('#chartCustomizeAxes', { itemsSource: appData, bindingX: 'country', axisX: { axisLine: true, majorGrid: true }, axisY: { format: 'c0', max: 10000, majorUnit: 2000, axisLine: true, majorGrid: true }, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' } ] });

Result (live):

Theming

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.

HTML
<div id="chartTheme" class="custom-flex-chart"></div>
JS
var thmChart = new wijmo.chart.FlexChart('#chartTheme', { itemsSource: appData, bindingX: 'country', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ] });
CSS
/* custom chart theme */ .custom-flex-chart .wj-axis-x .wj-label { font-family: Courier New, Courier, monospace; font-weight: bold; } .custom-flex-chart .wj-legend .wj-label { font-family: Courier New, Courier, monospace; font-weight: bold; } .custom-flex-chart .wj-legend > rect { fill: #f8f8f8; stroke: #c0c0c0; } .custom-flex-chart .wj-plot-area > rect { fill: #f8f8f8; stroke: #c0c0c0; }

Result (live):

Selection Modes

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 disabled 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.

HTML
<div id="chartSelectionMode"></div> <select id="seletionModeMenu"> <option value="0">None</option> <option value="1" selected="selected">Series</option> <option value="2">Point</option> </select> <select id="chartTypeMenu"> <option value="0" selected="selected">Column</option> <option value="1">Bar</option> <option value="2">Scatter</option> <option value="3">Line</option> <option value="4">LineSymbols</option> <option value="5">Area</option> <option value="9">Spline</option> <option value="10">SplineSymbols</option> <option value="11">SplineArea</option> </select> <div id="seriesContainer" style="display:none"> <h4>Current Selection</h4> <p>Series: <b id="seriesName"></b></p> <dl id="detailContainer" class="dl-horizontal" style="display:none"> <dt>Country</dt><dd id="seriesCountry"></dd> <dt>Sales</dt><dd id="seriesSales"></dd> <dt>Expenses</dt><dd id="seriesExpenses"></dd> <dt>Downloads</dt><dd id="seriesDownloads"></dd> </dl> </div>
JS
var smChart = new wijmo.chart.FlexChart('#chartSelectionMode', { itemsSource: appData, bindingX: 'country', selectionMode: 'Series', series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ], selectionChanged: function (s, e) { showChartSelection(); } }); // chart type var typeMenu = new wijmo.input.Menu('#chartTypeMenu', { itemClicked: function (s, e) { smChart.chartType = parseInt(s.selectedValue); updateMenuHeader(s, 'Chart Type'); } }); updateMenuHeader(typeMenu, 'Chart Type'); // selection mode var selectionModeMenu = new wijmo.input.Menu('#seletionModeMenu', { itemClicked: function (s, e) { smChart.selectionMode = parseInt(s.selectedValue); showChartSelection(); updateMenuHeader(s, 'Selection Mode'); } }); updateMenuHeader(selectionModeMenu, 'Selection Mode'); // update selection pane when selection or selection mode change function showChartSelection() { var seriesContainer = document.getElementById('seriesContainer'), series = smChart.selectionMode ? smChart.selection : null if (series) { // show selected series seriesContainer.style.display = ''; setText('seriesName', series.name); var item = series.collectionView.currentItem, detailContainer = document.getElementById('detailContainer'); if (item && smChart.selectionMode == wijmo.chart.SelectionMode.Point) { // show selected point detailContainer.style.display = ''; setText('seriesCountry', item.country); setText('seriesSales', item.sales, 'c2'); setText('seriesExpenses', item.expenses, 'c2'); setText('seriesDownloads', item.downloads, 'n0'); } else { detailContainer.style.display = 'none'; } } else { seriesContainer.style.display = 'none'; } }

Result (live):

Toggle Series Visibility

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:

  1. 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.
  2. Using checkboxes:
    When the checked state changed, it will set the visibility property of each series by the checked state.
HTML
<div id="chartLegendToggle"></div> <label> Sales <input id="cbSales" type="checkbox" checked="checked"/> </label><br /> <label> Expenses <input id="cbExpenses" type="checkbox" checked="checked"/> </label><br /> <label> Downloads <input id="cbDownloads" type="checkbox" checked="checked"/> </label><br />
JS
var svChart = new wijmo.chart.FlexChart('#chartLegendToggle', { // initialize chart itemsSource: appData, bindingX: 'country', legendToggle: true, series: [ { name: 'Sales', binding: 'sales' }, { name: 'Expenses', binding: 'expenses' }, { name: 'Downloads', binding: 'downloads' } ], // update checkboxes when series visibility changes seriesVisibilityChanged: function (s, e) { s.series.forEach(function (series) { var seriesName = series.name, checked = series.visibility == wijmo.chart.SeriesVisibility.Visible; document.getElementById('cb' + seriesName).checked = checked; }); } }); // update series visibility when checkboxes are clicked svChart.series.forEach(function (series, index) { var el = document.getElementById('cb' + series.name); el.checked = series.visibility == wijmo.chart.SeriesVisibility.Visible; el.addEventListener('click', function (e) { series.visibility = e.target.checked ? wijmo.chart.SeriesVisibility.Visible : wijmo.chart.SeriesVisibility.Legend; }); });

Result (live):




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.

Linear gradient format example:

'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'

Radial gradient format example:

'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'

Basic

Select from the predefined gradient colors to see the different appearances.

HTML
<div id="predefinedChart"></div> <div> <select id="predefinedColorMenu"> <option value="l(0,0,1,0)#89f7fe-#66a6ff" selected="selected">Light Blue - l(0, 0, 1, 0)#89f7fe-#66a6ff</option> <option value="l(0,0,0,1)#13547a-#80d0c7">Aqua - l(0, 0, 0, 1)#13547a-#80d0c7</option> <option value="l(0,0,1,1)#ff0844-#ffb199">Red - l(0, 0, 1, 1)#ff0844-#ffb199</option> <option value="l(0,0,1,0)#b224ef-#7579ff-#b224ef">Purple - l(0, 0, 1, 0)#b224ef-#7579ff-#b224ef</option> <option value="r(0.5,0.5,0.7)#cc208e-#6713d2">Plum - r(0.5,0.5,0.7)#cc208e-#6713d2</option> <option value="l(0,0,1,0)#30cfd0-#330867">Deep Blue - l(0, 0, 1, 0)#30cfd0-#330867</option> <option value="l(0,0,0,1)#e27f00-#ae1a73">Orange - l(0, 0, 0, 1)#e27f00-#ae1a73</option> <option value="l(0,0,1,1)#abd800-#5c7e00">Green - l(0, 0, 1, 1)#abd800-#5c7e00</option> </select> </div>
JS
var pdgradChart = new wijmo.chart.FlexChart('#predefinedChart', { itemsSource: appData, bindingX: 'country', series: [ { binding: 'sales' } ] }); var predefinedColorMenu = new wijmo.input.Menu('#predefinedColorMenu', { itemClicked: function (s, e) { applyBasicGradientColor(); updateMenuHeader(s, 'Color'); } }); updateMenuHeader(predefinedColorMenu, 'Color'); applyBasicGradientColor(); function applyBasicGradientColor() { pdgradChart.series[0].style = { fill: predefinedColorMenu.selectedValue }; pdgradChart.refresh(true); }

Result (live):

Advanced

Set multiple options to customize gradient color.

HTML
<div id="chartGradientColors"></div> <dl class="dl-horizontal"> <dt>Generated fill string:</dt> <dd> <label id="gradientColorsLabel"></label> </dd> <dt></dt> <dd> <select id="gradientChartType"> <option value="0" selected="selected">Column</option> <option value="1">Bar</option> <option value="5">Area</option> <option value="11">SplineArea</option> </select> </dd> <dt></dt> <dd> <select id="gradientTypeMenu"> <option value="l" selected="selected">Linear</option> <option value="r">Radial</option> </select> </dd> <dt id="dtGradientDirection"></dt> <dd id="ddGradientDirection"> <select id="gradientDirectionMenu"> <option value="horizontal" selected="selected">Horizontal</option> <option value="vertical">Vertical</option> </select> </dd> <dt>Start Color:</dt> <dd><input id="gradientStartColor"/></dd> <dt>Start Offset:</dt> <dd><input id="gradientStartOffset"/></dd> <dt>Start Opacity:</dt> <dd><input id="gradientStartOpacity"/></dd> <dt>End Color:</dt> <dd><input id="gradientEndColor"/></dd> <dt>End Offset:</dt> <dd><input id="gradientEndOffset"/></dd> <dt>End Opacity:</dt> <dd><input id="gradientEndOpacity"/></dd> </dl>
JS
var gradChart = new wijmo.chart.FlexChart('#chartGradientColors', { itemsSource: appData, bindingX: 'country', series: [ { binding: 'sales' } ] }); // chart type var gradientChartType = new wijmo.input.Menu('#gradientChartType', { itemClicked: function (s, e) { gradChart.chartType = parseInt(gradientChartType.selectedValue); updateMenuHeader(s, 'Chart Type'); } }); updateMenuHeader(gradientChartType, 'Chart Type'); // custom gradient var startColor = new wijmo.input.InputColor('#gradientStartColor', { valueChanged: function(s, e) { applyGradientColor(); }, value: '#ff0000' }); var endColor = new wijmo.input.InputColor('#gradientEndColor', { valueChanged: function(s, e) { applyGradientColor(); }, value: '#0000ff' }); var startOffset = new wijmo.input.InputNumber('#gradientStartOffset', { min: 0, max: 1, step: .1, valueChanged: function(s, e) { if (s.value >= s.min && s.value <= s.max) { applyGradientColor(); } }, value: 0 }); var endOffset = new wijmo.input.InputNumber('#gradientEndOffset', { min: 0, max: 1, step: .1, valueChanged: function(s, e) { if (s.value >= s.min && s.value <= s.max) { applyGradientColor(); } }, value: 1 }); var startOpacity = new wijmo.input.InputNumber('#gradientStartOpacity', { min: 0, max: 1, step: .1, valueChanged: function(s, e) { if (s.value >= s.min && s.value <= s.max) { applyGradientColor(); } }, value: 1 }); var endOpacity = new wijmo.input.InputNumber('#gradientEndOpacity', { min: 0, max: 1, step: .1, valueChanged: function(s, e) { if (s.value >= s.min && s.value <= s.max) { applyGradientColor(); } }, value: 1 }); // gradient type and direction var type = new wijmo.input.Menu('#gradientTypeMenu', { itemClicked: function(s, e) { applyGradientColor(); updateMenuHeader(type, 'Gradient Type'); } }); updateMenuHeader(type, 'Gradient Type'); var direction = new wijmo.input.Menu('#gradientDirectionMenu', { itemClicked: function(s, e) { applyGradientColor(); updateMenuHeader(direction, 'Direction'); } }); updateMenuHeader(direction, 'Direction'); // apply the current gradient color function applyGradientColor() { if (type && direction) { var t = type.selectedValue, d = direction.selectedValue, color = t, dtDirection = document.getElementById('dtGradientDirection'), ddDirection = document.getElementById('ddGradientDirection'); if (t === 'l') { dtDirection.style.display = 'block'; ddDirection.style.display = 'block'; color += d == 'horizontal' ? '(0, 0, 1, 0)' : '(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; } setText('gradientColorsLabel', color); gradChart.series[0].style = { fill: color }; gradChart.refresh(true); } } applyGradientColor();

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.

HTML
<div id="dynamicChart"></div> <dl class="dl-horizontal"> <dt>Update Speed</dt> <dd> <div class="btn-group"> <button id="btnSlow" type="button" class="btn btn-default">Slow</button> <button id="btnMedium" type="button" class="btn btn-default">Medium</button> <button id="btnFast" type="button" class="btn btn-default">Fast</button> <button id="btnStop" type="button" class="btn btn-default">Stop</button> </div> </dd> </dl>
JS
var toAddData = null, interval = null, trafficData = new wijmo.collections.ObservableArray(), setInterval = function(interval) { if (toAddData) { clearTimeout(toAddData); toAddData = null; } if (interval) { toAddData = setTimeout(function() { addTrafficItem(trafficData, interval); }); } }; // create FlexChart var dynamicChart = new wijmo.chart.FlexChart('#dynamicChart', { chartType: 'Area', stacking: 'Stacked', itemsSource: trafficData, bindingX: 'time', axisX: { format: 'mm:ss' }, series: [ { name: 'Trucks', binding: 'trucks' }, { name: 'Ships', binding: 'ships' }, { name: 'Planes', binding: 'planes' } ] }); setInterval(500); // Bind the click event to the speed buttons var intervalHash = { // interval hash for the speed buttons Slow: 200, Medium: 100, Fast: 50, Stop: 0 }; for (var prop in intervalHash) { document.getElementById('btn' + prop).addEventListener('click', buttonClick(intervalHash[prop])); } function buttonClick(value) { return function() { setInterval(value); }; } function addTrafficItem(trafficData, interval) { var len = trafficData.length, last = len ? trafficData[len - 1] : null, trucks = last ? last.trucks : 0, ships = last ? last.ships : 0, planes = last ? last.planes : 0; trucks = Math.max(0, trucks + Math.round(Math.random() * 50 - 25)); ships = Math.max(0, ships + Math.round(Math.random() * 10 - 5)); planes = Math.max(0, planes + Math.round(Math.random() * 10 - 5)); // add random data, limit array length trafficData.push({ time: new Date(), trucks: trucks, ships: ships, planes: planes }); if (trafficData.length > 200) { trafficData.splice(0, 1); } // keep adding if (interval) { toAddData = setTimeout(function() { addTrafficItem(trafficData, interval); }, interval); } }

Result (live):

Update Speed