JavaScript Charting Made Easy With JSCharting

JSCharting is a capable JavaScript charting library with some advanced features and great rendering output. It utilizes SVG, though as an end user developer, you don’t need to be familiar with or code SVG. There is also some fallback in VML for backward compatibility with older versions of IE browsers. A free trial is available from their site if you wish to run the samples or follow along locally. Online samples using codepen will also be embedded below.

Here is an example demonstrating a number of interactive features. Hover over the values to see tooltips and the legend adjust in real-time.

See the Pen Weather Patterns (@jsblog) on CodePen.

Setting Up

JSCharting is easy to setup and work with. The following steps were used to get a chart up and running from scratch. There are also a huge set of samples included you can use as a base for customization for a given visualization requirement.

First include jQuery and the JSCharting library files in your page:

<script type="text/javascript" src="/JSC/jquery-latest.min.js"></script>
<script type="text/javascript" src="/JSC/JSCharting.js"></script>

Next create an HTML div element to hold the chart:

<div id="chartDiv" style="width: 540px; height: 325px">

And use jQuery to select the DOM element and populate it with a chart through the jQuery plugin API:

$('#chartDiv').JSC(chartOptions);

The chart options define a series with four points using the following code:

var chartOptions = {
  series: [{
    name: 'Saw',
    type:'column',
    points: [
        { name: 'Q1', y: 230  },
        { name: 'Q2', y: 240  },
        { name: 'Q3', y: 267  },
        { name: 'Q4', y: 238  }
    ]
  }]
});

You can get a reference to the chart object itself by calling the JSC() function on the jQuery element bound to the chart without any parameters.

var chart = $('#chartDiv').JSC();

Chart Types

To specify a chart type, a simple setting such as {type:'column'}can be used. This can be set at the chart options level or at the series level. There are many chart types available in the library and some cases can be complex to set, however, JSCharting uses an interesting approach to simplify this configuration. All of the different chart types and options are defined within a hierarchy of chart types allowing settings such as {type:'funnelSquareInverted'} which traditionally would require separate settings such as { type:'funnel', funnelShape:'square', funnelOrientation:'inverted'}.

JSCharting offers a large number of chart types which can be explored through their gallery.

Label Tokens

A nice feature that makes the charts more dynamic are label tokens. These are predefined tokens at various levels which apply to the entire chart, to a series, or to individual points. For example, the chart title allows chart level tokens to be used as such:

{ titleLabelText: 'Acme Tool Sales Total: %sum Best Seller: %maxSeriesName' }

At the series level, we can specify tokens for the legend entries as follows:

{ defaultSeriesLegendEntryText: ' %name  %sum' }

These tokens work automatically in most labels, tooltips, urls, and other text associated with the chart, series, or point. The following example demonstrates these two property settings.

See the Pen vNmEqj (@jsblog) on CodePen.

Code

The chart options are coded using a well organized declarative API which separates the internal functionality and programming concepts from charting concepts and settings. The end result is a solution that enables developers to do what they need, with less time, less code and less confusion.

The library has the ability to identify a misspelled option setting and warn the developer before a chart goes live. This internal API database has been leveraged in another interesting way. There is a setting used in the example above: { defaultSeriesLegendEntryText: ' %name %sum' }. However, this is not an actual property name within the API. This is defined as defaultSeries:{ legendEntry:{ text:'%name %sum'}}. Yet, the chart can recognize that defaultSeries is a property, and that legendEntry is a property of it, and that legendEntry contains a text property. Therefore, it allows this setting to be used. Developers are free to use this shortcut syntax or utilize the fully expanded syntax based on their preferences.

Smart Tooltips

The automatic tooltips are well suited to annotate data without any specific settings in most cases. The chart examines the axis labels and formatting to create a descriptive tooltip for each point by default. For example, when we define a y axis label and formatting with this code:

yAxis: {
  labelText: 'Sales (USD)',
  formatString: 'c' /*Currency Formatting*/
}

The tooltip automatically describes the y value of the point with text such as “Sales (USD): $434.22”

JSCharting often surprises you with little details that save developers time and extra code to get a polished result.

Mapping

The new mapping chart type offers an integrated set of world countries and their states / provinces. These maps can be viewed through the following sample JS Maps of all world countries.

It’s nice that you don’t have to find shapefiles or geoJSON source files to make a map as the various geographic areas are pre-optimized and ready to use. You also don’t need to learn a new mapping based configuration API and can continue to leverage the standard series and points you are already familiar with.

Drawing a simple map of the US is possible with only these few chart options:

{
  type: 'map',
  series: [
    {map: 'US'}
  ]
}

Modifying this chart to show Illinois in red is accomplished by adding a point the the US series bound to IL and a color setting as follows:

{
  type: 'map',
  series: [{
    map: 'US',
    points:[
      {map: 'US.IL', color: 'red'}
    ]
  }]
}

See the Pen Weather Patterns (@jsblog) on CodePen.

JSCharting provides a context feature for its geographic mapping charts that automatically offers context for the primary map through an optional list of areas to draw in the background. For example, if my series only showed a point for US.IL, using this setting would draw the rest of the US around it, but without having any other effect on the chart like adjusting the zoom or view portal to the full extent of the US map boundary. Context mapping areas are also drawn in neutral tones to not draw attention away from the primary area of interest.

{ mappingBaseLayers: 'US' }

Maps can also be loaded dynamically (in real-time) and zoomed interactively.
After a chart is initialized, adding a country map is as easy as:

chart.addSeries({ map:'US' });

This codepen illustrates the flexibility of the mapping component of JSCharting quite well along with the aforementioned dynamic loading features:

See the Pen Click to load maps. (@jsblog) on CodePen.

For more examples of mapping ease of use and functionality, check out their map feature gallery.

Conclusion

JSCharting gets you up and running quickly with a full set of vector and resolution independent chart types to meet your visualization needs. With such a crowded field of charting tools that all claim to do the same job, JSCharting aims to do the same with a more intuitive API and less code while generating a result that gets more things right by default (which in turn, saves more code). For developers, more code equals more time and the reason we choose to use a charting library in the first place is to save time (vs hacking away with D3 or building something from the ground up)! JSCharting has a level of polish and the more you work with it, the more niceties you discover.