Overview

Smart.Chart is a lightweight and powerful chart custom element written 100% in JavaScript. It offers many advanced features and supports two different rendering technologies - SVG and HTML5 Canvas - and over 30 chart types. You can use Smart.Chart to add interactive charts to your website, build custom dashboards, or use it in your mobile applications. Smart.Chart offers excellent cross-browser compatibility and works well with both desktop and mobile browsers.

To initialize a Chart element the user has to include the following files to the head of the page:

  • smart.default.css - the CSS file containing the styles for element.
  • smart.element.js - the base class.
  • smart.elements.js - file containing all Smart custom elements.

Alternatively, separate Chart files can be included instead of smart.elements.js. These are listed here: Chart script dependencies.

Basic Concepts

Before you start using Smart.Chart, you need to learn how it works and some basic concepts. Depending on which features you use, your chart may contain the following elements:

  • horizontal axis (xAxis)
  • vertical axis (valueAxis)
  • caption & description
  • one or more series groups and series
  • grid lines & tick marks
  • legend
  • border line
  • background
  • tooltips
  • annotations
  • range selector

Some simple charts may not have all of these elements, while complicated charts could be highly customized and even include additional elements added through custom drawing.

The following image illustrates the different elements in Smart.Chart:

Charting Custom Element

Getting Started

Include All Required JavaScript & CSS files

Create an HTML page and include the following references in the head section:

<link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.7/webcomponents-bundle.js"></script>
<script type="text/javascript" src="../../../source/smart.elements.js"></script>

Create the Custom Element

In the body section of the page, create the smart-chart custom element:

<smart-chart id="chart"></smart-chart>

Prepare Sample Data

In a script on the page, create an array of objects to use as sample data:

const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

Apply the Chart Settings

The final step is to prepare the chart display settings. The code below specifies the caption and description that the chart will display and sets the dataSource property. In this example, we bind the (horizontal) xAxis to the Day property of our data source. The chart will display the data in three series of type 'column'. Each of the series is bound to another property in our data source.

Here is the complete code of the example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chart Column Series Example</title>
    <link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.7/webcomponents-bundle.js"></script>
    <script type="text/javascript" src="../../../source/smart.elements.js"></script>
    <script type="text/javascript">
        const sampleData = [
            { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
            { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
            { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
            { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
            { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
            { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
            { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
        ];

        Smart('#chart', class {
            get properties() {
                return {
                    caption: 'Fitness & exercise weekly scorecard',
                    description: 'Time spent in vigorous exercise',
                    dataSource: sampleData,
                    colorScheme: 'scheme29',
                    padding: {
                        left: 10,
                        right: 25
                    },
                    xAxis:
                    {
                        dataField: 'Day',
                        gridLines: {
                            visible: true
                        }
                    },
                    valueAxis:
                    {
                        description: 'Time in minutes',
                        axisSize: 'auto',
                        minValue: 0,
                        maxValue: 100,
                        unitInterval: 10
                    },
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                orientation: 'vertical',
                                columnsGapPercent: 50,
                                seriesGapPercent: 0,
                                series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                            }
                        ]
                };
            }
        });
    </script>
</head>
<body>
    <smart-chart id="chart"></smart-chart>
</body>
</html>

The resulting Chart is shown in the following image:

Charting Web Component

Getting and Setting Properties Dynamically

Before accessing the Chart's API in JavaScript, the custom element's instance has to be retrieved:

let chart = document.querySelector('smart-chart');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let caption = chart.caption;

Inner Chart properties, such as an axis setting, can also be retireved:

let xAxisDataField = chart.xAxis.dataField;

Here is an example showing how to set a property dynamically:

chart.caption = 'Detailed exercise scoreboard';

Inner Chart properties, such as an axis setting, can be set the same way:

chart.xAxis.gridLines.visible = false;

Binding to Events

Before accessing the Chart's API in JavaScript, the custom element's instance has to be retrieved:

let chart = document.querySelector('smart-chart');

Here is an example of how to bind to a Chart-specific event:

chart.addEventListener('toggle', function (event) {
    // event handling code goes here.
}

Calling Methods

Before accessing the Chart's API in JavaScript, the custom element's instance has to be retrieved:

let chart = document.querySelector('smart-chart');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

chart.showToolTip(0, 1, 1);