SIMPLY STUNNING

HTML5 JavaScript Chart and Gauge Widgets

Dynamic client side data visualization

Whether you are creating traditional websites, sites that target mobile devices, or native apps built with HTML5 JavaScript and compiled with Apache Cordova (PhoneGap), ChartJS provides high-performance and elegant data visualization options for all your business intelligence needs.

Address all your data visualization needs

The measure of success for any business intelligence solution is to ensure that the visual representation of data is meaningful and actionable. Does the way in which the data is presented further the conversation or impede it? Does it effectively speak to the state of the business or are important trends poorly communicated?

ChartJS provides a comprehensive set of visualization widgets that allow you to transform data to its most appropriate, concise, and readable visual representation. All chart widgets can be composed into beautiful informative dashboards that effectively convey information at a single glance. All charts and gauges that ship as part of the ChartJS library can easily be themed and styled to address any business requirement.

Traffic Distribution (Ad Campaign Summary)
Advertising Efficiency
Traffic by Hour (Yesterday)
Traffic by Day (Last Six Days)

Trouble-free configuration

All DevExpress chart and gauge widgets provide straightforward configuration options so you spend less time customizing your chart and more time addressing business requirements.

Chart

Works on all devices

Dashboards built using ChartJS widgets work across all popular desktop and mobile browsers. Charts adapt to any platform, form, and orientation, maintaining their flexibility, speed, and stunning appearance.

What's Inside?

Library contains five groups of JavaScript widgets

HTML JavaScript Chart Widgets
HTML JavaScript Gauge Widgets
HTML JavaScript RangeSelector Widget
HTML JavaScript Sparkline Widgets
HTML JavaScript Vector Map Widget

HTML JavaScript Chart Widgets

DevExpress HTML JavaScript Chart widgets provide numerous series types including:

ChartJS charts provide multiple features

  • You can combine different series types and display them across different panes in the same display.
  • Multiple secondary axes of different types are fully supported.
  • The appearance of charts can be changed by switching to a different theme. You are free to build custom themes as needed.
  • Apply the color palette that is most appropriate for your chart series. Choose either a predefined palette or define a custom palette.
  • It doesn't matter how big your data is. Thanks to the points aggregation, the dxChart widget will perform perfectly even with large data sources.
  • The dxChart and dxPieChart widgets ship with a straightforward client API so you can manage chart series and points using JavaScript.
  • End-user interactivity features include hovering and selection for series and points, zooming and scrolling.

            

HTML JavaScript Gauge Widgets


  • The dxCircularGauge widget allows you to display a value and several subvalues on an open-ended or closed circular gauge.
  • The dxLinearGauge widget displays a specified value and subvalues on a linear gauge that can be oriented in a horizontal or vertical direction.
  • Several types of the value and subvalue indicators are available in the dxCircularGauge and dxLinearGauge widgets.
  • The dxBarGauge widget indicates several values at a time as a set of bars. Each bar is accompanied by a label displaying the indicated value.
  • Gauge indicators can be managed and customized via a client API.

            

HTML JavaScript RangeSelector Widget

  • The dxRangeSelector widget allows the user to interactively specify a range visually. The range can either be a date/time scale or a numeric scale.
  • Scale type is generated automatically based on the specified data source.
  • Two levels of tick marks can be displayed, major and minor. By default, the range sliders are snapped to ticks. You can also disable this behavior to provide more precise range selection.
  • The dxRangeSelector's background can be customized using any color or it can contain an image or chart.
  • The widget supports extended end-user interactions. A range can be selected by moving the sliders, by moving the selected range, or by defining a range on an unselected area. Both mouse and touch manipulations are fully supported.
  • The dxRangeSelector widget can be bound to the dxChart widget to enable scrolling and zooming of the chart.
  • The widget also ships with a client API that allows you to handle changes made to a selected range.

            

HTML JavaScript Sparkline Widgets


  • The ChartJS sparkline widgets, including dxSparkline and dxBullet, are designed very small to fit in your table or even text.
  • In general, the dxSparkline widget is a minimized version of the dxChart widget with one series.
  • Different sparkline types, including bar, area and winloss, are ready to satisfy your demands.
  • With the dxBullet widget, the task of visualizing your progress becomes more straightforward.

            

            

HTML JavaScript VectorMap Widget


  • The dxVectorMap widget provides an interactive map.
  • You can easily change the areas displayed on your map by using different data sources, which are supplied with the dxVectorMap widget as well.
  • Indicate special places on your map using a set of markers.
  • Customize areas and markers to your own requirements.
  • This widget ships with a client API that allows you to handle hovering, clicking and selection for areas and markers.

            

Compatible with jQuery, KnockoutJS and AngularJS

jQuery Approach

ChartJS supplies jQuery plugins for each widget and you can create widgets using the standard jQuery approach.

<div id="chartContainer" style="max-width:800px;height: 400px;"></div>

<script>
    $(document).ready(function() {
        $("#chartContainer").dxChart({
            //chart options go here
        });
    });
</script>

Knockout Approach

ChartJS fully supports MVVM and provides custom knockout bindings to create each widget.

<div id="chartContainer" style="max-width:800px;height: 400px;" data-bind="dxChart: chartOptions"></div>

<script>
    var myViewModel= {
        chartOptions: {}
    }
    ko.applyBindings(myViewModel);
</script>

AngularJS Approach

ChartJS widgets can be used in applications built using the AngularJS framework.

<div dx-chart="{ 
    <!-- chart options go here -->
 }"></div>

<script>
    angular.module('myApp', [ 'dx' ]);
</script>

Shipping Versions and Supported Technologies

Version and Release Date:
13.2
04-Dec-2013
Mobile Platforms:
Android 4+
iOS 5+
Windows Phone 8
Tizen
Desktop Browsers:
Internet Explorer 8+
Safari 5+
Firefox Latest Version
Google Chrome Latest Version
Opera 12 and the Latest Version
Mobile OS Integrated Browsers:
Android 4+
iOS 5+
Windows Phone 8
Tizen
Download ChartJS