Chart
Chart is a type of special renderings provided by Genio with full customization capability. The Highcharts library has several demos of charts and functionalities that could be implemented and further enhance Genio in the future.
The main features provided by this special rendering are:
- Simple graphs using only 2 columns to map the x-axis and y-axis;
- Customizable graphs using unique columns (at the moment it is restricted to allowing different series (sets of data) and, for each serie, the type to be mapped and its color. Can be further added several other customization options (stacking in different categories for columns and bar charts, for example, as at the moment it is global));
- Several types of charts available: line, spline (curved line), column, bar, pie, among others;
- Chart sizes and positioning are customizable;
- Text of the graph (such as title, x and y-axis names and description) need to be imputed manually. Doesn't support multiple languages;
- Legend positioning fully customizable.
Highcharts Subtypes
Genio currently offers the following chart subtypes:
genericgraph
Generic subtype. Most customizable and can be used to plot several types of graphs such as lines, columns, areas, pie, among others. At the moment it's best used to plot the types mentioned earlier as others have not been tested and/or need further development.
It has 2 modes of plotting data in a chart:
- Using an aggregated column with all the different y-axis data that needs to be plotted (mapped to yaxis) and a secondary column to differentiate and give each serie its own name (mapped to serie-title);
- Using a single column for the x-axis (mapped to xaxis) and several columns for the y-axis (mapped to yaxis).
comparegraph
Subtype that compares adjacent 2 series.
heatmapgraph
Creates a heatmap using a x, y and z(value) axis. Implemented with one color, for several, the manual code should be changed.
Customization variables
chart-type
xaxis-type yaxis-type
* axis type supersedes the chart type.
graph-title xaxis-name yaxis-name description align-description serie-name
Style variables to map specific strings that are not possible to directly map from Genio (doesn't support multiple languages). In a later iteration, should be able to map the description of a field to this variables. Serie-name should only be used when making a graph with only a serie and no distinct types column.
group-type
* functionality not the same as in Genio, join or break is applied on the individual and not on the next one.
show-point-marker
show-break
enable-hover
values-decimals
zoom-type
Graphs can be zoomed on the x and/or y-axis.
stacking-type
legend-layout legend-align legend-vertical-align
legend-floating legend-x-position legend-y-position
Style variables to control the layout, position and alignment of the graphs legend. To make a legend be inside the plot, floating needs to be true and the position of the legend needs to be manually inputted.
To make the legend be in the center of the plot, align should be set to 'center' and vertical align should be set to 'middle'.
width-percentage height-px
The width percentage of a graph is in relation to the width of the page. The height of a graph is calculated in pixels.
pie-inner-size-percentage show-pie-label show-legend
inverted
Summary
| Name | Type | Description | Mandatory | Allows Multiple Mappings | Admitted Values | Default |
|---|---|---|---|---|---|---|
| serie-title | Mapping | The title of the graph. Best when mapped to a short text field. | No | No | Table column | - |
| serie-type | Mapping | The type of the graph. Best when mapped to a short text field. | No | No | Table column | - |
| serie-color | Mapping | The color of the graph. Best when mapped to a short text field. | No | No | Table column | - |
| xaxis | Mapping | The x data of the graph. Can be mapped to DateTime, Numeric or a short text field. | Yes | No | Table column | - |
| yaxis | Mapping | The y data of the graph. Can be mapped to DateTime, Numeric or a short text field. | Yes | Yes | Table column | - |
| chart-type | Style | Defines the graphs global type. | No | - | line, spline, area, areaspline, column, bar, pie, scatter, gauge, arearange, areasplinerange, columnrange |
line |
| first-color | Style | Defines the color of the first serie. | No | - | Red (#FF000D), Orange (#FF7034), Yellow (#FFFD01), Green (#66FF00), Blue (#058DC7), Indigo (#6F00FE), Violet (#AD0AFD), Pink (#FFC0CB), Brown (#964B00), Black (#000000) |
Blue (#058DC7) |
| chart-color-array | Style | Defines a color array for up to 10 series. More can be added. Highcharts Default: [Blue, Black, L.Green, Orange, Purple, S.Red,, Yellow, D.Green, Red, Cyan]; Highcharts Default 2 (Dark):[Blue, Red, Green, Violet, Cyan, Orange, Dst.Blue, Dst.Red, Dst.Green]; Highcharts Default 3: [Blue, D.Blue, Green, D.Red, Cyan, D.Violet, Orange, L.Blue, Red, Dst.Green]; Monochrome Red (7 shades): [Light Red to Dark Red]; Monochrome Green (7 shades): [Light Green to Dark Green]; Monochrome Blue (7 shades): [Light Blue to Dark Blue]; Monochrome Grey (7 shades): [Light Grey to Dark Grey]; Opposites: [Blue, Green, Orange, Yellow, Cyan, Lime, L.Orange, L.Yellow, L.Cyan]; Rainbow (7 colors): [Red to Violet]. | No | - | Highcharts Default, Highcharts Default 2, Highcharts Default 3, Monochrome Red, Monochrome Green, Monochrome Blue, Monochrome Gray, Opposites, Rainbow |
Highcharts Default |
| xaxis-type | Style | Defines the graphs x-axis type. Only use if want x-axis to shown its values in a diferent type than the global type. | No | - | linear, datetime, logarithmic, category |
linear |
| yaxis-type | Style | Defines the graphs y-axis type. Only use if want y-axis to shown its values in a diferent type than the global type. | No | - | linear, datetime, logarithmic, category |
linear |
| graph-title | Style | Defines the graphs title. | No | - | - | Graph |
| xaxis-name | Style | Defines the graphs x-axis name. | Yes | - | - | XAxis |
| yaxis-name | Style | Defines the graphs y-axis name. | Yes | - | - | YAxis |
| description | Style | Defines the graphs description. | No | - | - | Graph description. |
| align-description | Style | Defines the graphs description alignment. | No | - | left, right, center |
left |
| serie-name | Style | Defines the graphs serie name. Only use if there is no distinct series column and mapping only 1 x-axis and y-axis. | No | - | - | - |
| group-type | Style | Defines if the graph is grouped with the one before it. | No | - | join, break |
join |
| show-point-marker | Style | Defines if graph shows each point with a marker. | Yes | - | true, false |
true |
| show-breaks | Style | Defines if the graph shows breaks in its data. | Yes | - | true, false |
false |
| enable-hover | Style | Defines if on hover action shows label of the graph. | Yes | - | true, false |
true |
| values-decimals | Style | Defines the number of decimals of the points label of the graph. | Yes | - | - | 0 |
| zoom-type | Style | Defines the graphs zoom type. | No | - | x, y, xy |
x |
| stacking-type | Style | Defines the stacking style of the graph. | No | - | undefined, normal, percent |
undefined |
| legend-layout | Style | Defines the graphs legend layout. | Yes | - | horizontal, vertical, proximal |
horizontal |
| legend-align | Style | Defines the graphs legend alignment. | Yes | - | left, right, center |
center |
| legend-vertical-align | Style | Defines the graphs legends vertical alignment. | Yes | - | bottom, middle, top |
bottom |
| legend-floating | Style | Defines the legends floating style on the graph. | Yes | - | true, false |
false |
| legend-x-position | Style | Defines the legends x-axis position on the graph. | Yes | - | - | 0 |
| legend-y-position | Style | Defines the legends y-axis position on the graph. | Yes | - | - | 0 |
| width-percentage | Style | Defines the graphs percentage of width occupied in a line. | Yes | - | - | 100 |
| height-px | Style | Defines the graphs height in pixels. | No | - | - | 400 |
| show-pie-label | Style | Defines where the pie-charts label is shown. | No | - | inside, outside |
outside |
| show-legend | Style | Defines if graph shows in legend or in label. | Yes | - | true, false |
true |
| pie-inner-size-percentage | Style | Defines a pie-charts inner hole size. | Yes | - | - | 0 |
| inverted | Style | Defines if graphs axis are inverted. | Yes | - | true, false |
false |
Changelog
The complete changelog of all notable changes made to Special Renderings - Highcharts. Descriptions are written as New: or Fixed: for changes that are not considered a maintenance release.
Genio 312.23
- (VUE) New: Initial Vue.js implementation
Genio 310.07
- (MVC) New: Support dynamic series (using a new
serie-selectormapping variable) - (MVC) New: Readd "serie-color" mapping variable
Genio 307.07
- (GEN) Deprecate
serie-title,serie-type, andserie-colormapping variables
Genio 306.99
- (MVC) Improve the way the Highcharts wrapper component handles the input data
Genio 306.80
- (MVC) Updated algorithm
- (MVC) New: Added color arrays to better visualize the graph's series
- (MVC) New: Automatic resize inside collapsible and accordion zones
- (MVC) New: Can be used in offline mode
Genio 306.44
- (MVC) Fixed: Fixed data transformation function that didn't consider some cases
Genio 306.42
- (MVC) New: Added comparegraph and heatmapgraph subtypes
- (MVC) New: Improved algorithm, now also permits strings in the yAxis
Genio 305.86
- Initial Build