Chart Overview

Getting Started with Chart Web Component

Smart UI for Web Components is distributed as smart-webcomponents NPM package. You can also get the full download from our website with all demos from the Download page.

Setup the Chart

Smart UI for Web Components is distributed as smart-webcomponents NPM package

1. Download and install the package.
   
   

   npm install smart-webcomponents

   
   
2. Once installed, import the Chart module in your application.
   
   

   <script type="module" src="node_modules/smart-webcomponents/source/modules/smart.chart.js"></script>

   
   
3. Adding CSS reference
   
   The smart.default.css CSS file should be referenced using following code.
   
   

   <link rel="stylesheet" type="text/css" href="node_modules/smart-webcomponents/source/styles/smart.default.css" />

   
   
4. Add the Chart tag to your Web Page
   
   

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

   
   
5. Create the Chart Component
   
   

   	<script type="module">
   		Smart('#chart', class {
   			get properties() {
   				return {
   				caption: "Fitness & exercise weekly scorecard",
   				description: "Time spent in vigorous exercise by activity",
   				enableAnimations: true,
   				showLegend: true,
   				padding: { left: 10, top: 10, right: 15, bottom: 10 },
   				titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
   				dataSource: [
   						{ Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25, Goal: 40 },
   						{ Day: 'Tuesday', Running: 25, Swimming: 15, Cycling: 10, Goal: 50 },
   						{ Day: 'Wednesday', Running: 30, Swimming: 10, Cycling: 25, Goal: 60 },
   						{ Day: 'Thursday', Running: 40, Swimming: 20, Cycling: 25, Goal: 40 },
   						{ Day: 'Friday', Running: 45, Swimming: 20, Cycling: 25, Goal: 50 },
   						{ Day: 'Saturday', Running: 30, Swimming: 20, Cycling: 30, Goal: 60 },
   						{ Day: 'Sunday', Running: 20, Swimming: 30, Cycling: 10, Goal: 90 }
   				],
   				colorScheme: 'scheme13',
   				xAxis: {
   					dataField: 'Day',
   					unitInterval: 2,
   					tickMarks: { visible: true, interval: 1 },
   					gridLinesInterval: { visible: true, interval: 1 },
   					valuesOnTicks: false,
   					padding: { bottom: 10 }
   				},
   				valueAxis: {
   					unitInterval: 10,
   					minValue: 0,
   					maxValue: 50,
   					title: { text: 'Time in minutes' },
   					labels: { horizontalAlignment: 'right' }
   				},
   				seriesGroups:
   					[
   						{
   							type: 'spline',
   							series:
   							[
   								{
   									dataField: 'Swimming',
   									symbolType: 'square',
   									labels:
   									{
   										visible: true,
   										backgroundColor: '#FEFEFE',
   										backgroundOpacity: 0.2,
   										borderColor: '#7FC4EF',
   										borderOpacity: 0.7,
   										padding: { left: 5, right: 5, top: 0, bottom: 0 }
   									}
   								},
   								{
   									dataField: 'Running',
   									symbolType: 'square',
   									labels:
   									{
   										visible: true,
   										backgroundColor: '#FEFEFE',
   										backgroundOpacity: 0.2,
   										borderColor: '#7FC4EF',
   										borderOpacity: 0.7,
   										padding: { left: 5, right: 5, top: 0, bottom: 0 }
   									}
   								}
   							]
   						}
   					]
   			}
   			}
   		});
   	</script>	   
   		

   
   Another option is to create the Chart is by using the traditional Javascript way:
   

   	const chart = document.createElement('smart-chart');
   
   	chart.disabled = true;
   	document.body.appendChild(chart);
   		

   
   Smart framework provides a way to dynamically create a web component on demand from a DIV tag which is used as a host. The following imports the web component's module and creates it on demand, when the document is ready. The #chart is the ID of a DIV tag.
   
   

   	import "../../source/modules/smart.chart.js";
   
   	document.readyState === 'complete' ? init() : window.onload = init;
   
   	function init() { 
   		const chart = new Smart.Chart('#chart', {
   				caption: "Fitness & exercise weekly scorecard",
   				description: "Time spent in vigorous exercise by activity",
   				enableAnimations: true,
   				showLegend: true,
   				padding: { left: 10, top: 10, right: 15, bottom: 10 },
   				titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
   				dataSource: [
   						{ Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25, Goal: 40 },
   						{ Day: 'Tuesday', Running: 25, Swimming: 15, Cycling: 10, Goal: 50 },
   						{ Day: 'Wednesday', Running: 30, Swimming: 10, Cycling: 25, Goal: 60 },
   						{ Day: 'Thursday', Running: 40, Swimming: 20, Cycling: 25, Goal: 40 },
   						{ Day: 'Friday', Running: 45, Swimming: 20, Cycling: 25, Goal: 50 },
   						{ Day: 'Saturday', Running: 30, Swimming: 20, Cycling: 30, Goal: 60 },
   						{ Day: 'Sunday', Running: 20, Swimming: 30, Cycling: 10, Goal: 90 }
   				],
   				colorScheme: 'scheme13',
   				xAxis: {
   					dataField: 'Day',
   					unitInterval: 2,
   					tickMarks: { visible: true, interval: 1 },
   					gridLinesInterval: { visible: true, interval: 1 },
   					valuesOnTicks: false,
   					padding: { bottom: 10 }
   				},
   				valueAxis: {
   					unitInterval: 10,
   					minValue: 0,
   					maxValue: 50,
   					title: { text: 'Time in minutes' },
   					labels: { horizontalAlignment: 'right' }
   				},
   				seriesGroups:
   					[
   						{
   							type: 'spline',
   							series:
   							[
   								{
   									dataField: 'Swimming',
   									symbolType: 'square',
   									labels:
   									{
   										visible: true,
   										backgroundColor: '#FEFEFE',
   										backgroundOpacity: 0.2,
   										borderColor: '#7FC4EF',
   										borderOpacity: 0.7,
   										padding: { left: 5, right: 5, top: 0, bottom: 0 }
   									}
   								},
   								{
   									dataField: 'Running',
   									symbolType: 'square',
   									labels:
   									{
   										visible: true,
   										backgroundColor: '#FEFEFE',
   										backgroundOpacity: 0.2,
   										borderColor: '#7FC4EF',
   										borderOpacity: 0.7,
   										padding: { left: 5, right: 5, top: 0, bottom: 0 }
   									}
   								}
   							]
   						}
   					]
   			});
   	}
   	

   
   
6. Open the page in your web server.

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:

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="../../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="../../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:

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);

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event

Create a new element:

	const chart = document.createElement('smart-chart');
	

Append it to the DOM:

	document.body.appendChild(chart);
	

Remove it from the DOM:

	chart.parentNode.removeChild(chart);
	

Set a property:

	chart.propertyName = propertyValue;
	

Get a property value:

	const propertyValue = chart.propertyName;
	

Invoke a method:

	chart.methodName(argument1, argument2);
	

Add Event Listener:

	const eventHandler = (event) => {
	   // your code here.
	};

	chart.addEventListener(eventName, eventHandler);
	

Remove Event Listener:

	chart.removeEventListener(eventName, eventHandler, true);
	

Using with Typescript

Smart Web Components package includes TypeScript definitions which enables strongly-typed access to the Smart UI Components and their configuration.

Inside the download package, the typescript directory contains .d.ts file for each web component and a smart.elements.d.ts typescript definitions file for all web components. Copy the typescript definitions file to your project and in your TypeScript file add a reference to smart.elements.d.ts

Read more about using Smart UI with Typescript.

npm install -g @angular/cli

ng new smart-angular-chart

cd smart-angular-chart

ng serve

npx create-react-app my-app
cd my-app
npm start	
	

npm start

npm install -g @vue/cli

vue create my-project

npm install smart-webcomponents

npm run dev