Skip to main content
Version: 7.0.0

Data Charts

We use ApexCharts to create the chart for the data. It uses webviewbridge to create the chart.

It works by passing in the data and the options.

For more information on ApexCharts, please visit:

JavaScript Basic Line Chart Example – ApexCharts.js
View the example of a basic JavaScript Line Chart created in ApexCharts.js
JavaScript Basic Line Chart Example – ApexCharts.js favicon https://apexcharts.com/javascript-chart-demos/line-charts/basic/
Webviewbridge

Simple Example

import ChartExampleDesign from 'generated/pages/chartExample';
import { withDismissAndBackButton } from '@smartface/mixins';
import { Router, Route } from '@smartface/router';
import WebViewBridge from '@smartface/webviewbridge';
import Chart from '@smartface/extension-utils/lib/chart';

export default class ChartExample extends withDismissAndBackButton(ChartExampleDesign) {
chartOptions = {
series: [
{
name: 'Desktops',
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}
],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
}
};
constructor(private router?: Router, private route?: Route) {
super({});
}

/**
* @event onShow
* This event is called when the page appears on the screen (everytime).
*/
onShow() {
super.onShow();
this.initBackButton(this.router); //Addes a back button to the page headerbar.
const wvb = new WebViewBridge({
webView: this.myWebView
});
const chart = new Chart({
//@ts-ignore
webViewBridge: wvb,
apexOptions: {
series: [
{
name: 'Desktops',
data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
}
],
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false
}
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'straight'
},
title: {
text: 'Product Trends by Month',
align: 'left'
},
grid: {
row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
}
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
}
}
});
chart.render();
}

/**
* @event onLoad
* This event is called once when the page is created.
*/
onLoad() {
super.onLoad();
}
}