Chart widgets

This page is related to data-driven widgets and was updated for Elementi 2018 - the information below might not apply for older versions.

Introduction

These widgets have been designed to represent spreadsheet data as chart graphics. They can be found within the "Charts" collection of Elementi widget library, starting with Elementi 3.1.0. They are grouped below depending on the type of chart they are generating.

The following spreadsheet data source types (further called "channels") are supported:

• CSV spreadsheet file

  This is a delimited text file that uses a comma (other separators can be used as well) to separate values. Almost all spreadsheets and database management systems can export data as CSV file - some examples include: Microsoft Excel, Google Sheets, OpenOffice.org Calc, LibreOffice Calc, Numbers (spreadsheet), etc. The CSV file can either be imported into the Elementi project (total autonomy) or be located on a web server and retrieved from there by the HMP via Ethernet; it cannot be located on your PC or on a network shared folder.

• Google Sheets (added in Elementi 2016)

  This is part of a free, web-based software office suite offered by Google within its Google Drive service. The suite allows users to create and edit documents online while collaborating with other users in real-time. The Google Sheet data is retrieved from Google servers by the HMP via Ethernet.

• Microsoft Excel file (added in Elementi 2016)

  This is part of the Microsoft Office suite of applications, servers, and services developed by Microsoft; a web-based version is also available. Both newer and older Excel file formats are supported as data source. The data is retrieved by Elementi from the Excel source file and included (in CSV format) with the content at the time of publish on the HMP; to synchronize further changes within the Excel file, you need to re-publish the project on the HMP. The Excel file itself cannot be used by the HMP, thus it cannot be imported into the Elementi project, nor be referenced from a web server.

• Excel Online (added in Elementi 2017)

  This is part of the Microsoft Office Online suite of applications, servers, and services developed by Microsoft; This allows users to create and edit documents online while collaborating with other users in real-time. The Excel Online data is retrieved from Microsoft servers by the HMP via Ethernet; only xlsx online documents are supported.

• SharePoint Online Lists (added in Elementi 2018)

  This is part of the Microsoft SharePoint Online platform that integrates with Microsoft Office 365. A list in SharePoint Online is a collection of data that gives you and your co-workers a flexible way to organize items, create calendars, to-do lists, and time lines. The SharePoint Online List data is retrieved from Microsoft servers by the HMP via Ethernet.

Getting started

Getting started is easy - download Elementi software, launch it and create away! Just follow the 4 quick steps below:

1. Open your Elementi project.
2. Click on the "Widgets" tab within the browse panel.
3. Open the Charts folder and pick a widget.
4. Include that widget into your project and configure it.

Chart widgets

Chart widgets in Elementi 2018

Bar and column charts

Bar and column charts represent data as horizontal bars / vertical columns where the size of each bar / column is determined by the data associated to it.

• Bar

  Displays a bar chart from the values of a series.

• Bar Gradient

  Displays a bar chart from the values of a series, with a two-color gradient applied from bottom to top.

• Bar Series

  Displays a bar chart from the values specified on the "Data" tab. The values can be extracted from the data source or entered manually.

• Column

  Displays a column chart from the values of a series.

• Column Gradient

  Displays a column chart from the values of a series, with a two-color gradient applied from left to right.

• Column Series

  Displays a column chart from the values specified on the "Data" tab. The values can be extracted from the data source or entered manually.

• Column Clustered

  Displays a column chart from the values of one or multiple series (defined on the "Series" tab), automatically grouped together. The values can be extracted from the data source or entered manually.

• Column Stacked

  Displays a column chart from the values of one or multiple series (defined on the "Series" tab), automatically stacked together. The values can be extracted from the data source or entered manually.

Line and area charts

Line charts display a series of data points connected by straight line segments, with or without markers. There may be multiple series of data, materialized as multiple overlapped lines in the chart.

• Line

  Displays a line chart from the values of a series.

• Line Series

  Displays a line chart from the values of one or multiple series (defined on the "Series" tab). The values can be extracted from the data source or entered manually.

Area charts are an extension of line charts, having the area(s) between the values line(s) and the baseline filled with color(s). Furthermore, it is possible to stack the series instead of overlapping them.

• Area

  Displays an area chart from the values of a series.

• Area Series

  Displays an area chart from the values of one or multiple series (defined on the "Series" tab), automatically stacked together. The values can be extracted from the data source or entered manually.

• Area Stacked

  Displays an area chart from the values of one or multiple series (defined on the "Series" tab), automatically stacked together. The values can be extracted from the data source or entered manually.

• Area Full-Stacked

  Displays a percentage area chart from the values of one or multiple series (defined on the "Series" tab), automatically stacked together to reach 100%. The values can be extracted from the data source or entered manually.

Scatter and bubble charts

Scatter plot and bubble charts display a set of data values for two variables, X and Y, having the value of one variable (X) determining the position on the horizontal axis and the value of the other variable (Y) determining the position on the vertical axis. Additionally, the bubble charts, use the values of a third variable to determine the size of each point marker.

• Scatter

  Displays a bubble chart from the values of two series, one used for X values and the other one for Y values.

• Bubble

  Displays a bubble chart from the values of two series, one used for X values and the other one for Y values, with an additional series determining the size of the bubble marker.

Pie and doughnut charts

Pie and doughnut charts represent data as slices, where the size of each slice is determined by the slice value relative to the sum of the values of all slices. The doughnut charts are in fact pie charts with a hole in the center.

• Pie

  Displays a pie chart from the values of a series.

• Pie Series, Pie Series Exploded

  Displays a pie chart from the values specified on the "Data" tab. The values can be extracted from the data source or entered manually.

• Doughnut

  Displays a doughnut chart from the values of a series.

• Doughnut Series, Doughnut Series Exploded

  Displays a doughnut chart from the values specified on the "Data" tab. The values can be extracted from the data source or entered manually.

• Semi-Doughnut

  Displays a semi-doughnut chart from the values of a series.

• Semi-Doughnut Series, Semi-Doughnut Series Exploded

  Displays a semi-doughnut chart from the values specified on the "Data" tab. The values can be extracted from the data source or entered manually.

Configuration

Each of the widgets above can be customized using the options provided under "Properties" tab.

To edit the properties related to the data source, click on the button. This opens the "Data Properties" dialog, which offers different parameters depending on the selected channel:

• CSV File (default)
• Excel File
• Google Sheets
• Excel Online
• SharePoint Online

Note:

At any point, the data source configuration can be tested by clicking on the "Test..." button.

See also

• Gauge widgets
• Excel Chart widget
• Spreadsheet widgets
• Data feeds
• Data-driven widgets
• jSignage Graph plugin documentation for more advanced details about how these widgets were built.