Configuring Chart

How to configure charts in InnowayIT application?

A chart is a:

a graphical representation of data, in which "the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart" -- Wikipedia

InnowayIT application provides following type of charts:

• Pie chart

• Vertical bar chart

• Horizontal bar chart

• Advanced pie chart

• Cards

• Tree Map

• Bubble Chart

To configure charts select the Visualization object in the Configuration Tool sidebar (figure 1). Select the chart from the list to be modified and click the Update button or click on Create New button to create a new chart

Chart configuration metadata + data is retrieved by front end via API

/admin/data/chart/:chartname

To only retrieved chart data call this API

/chartdata/:objectname/:aggregationtype/:field/:sortorder/:numberofrecords

Following table contains a list of chart attributes:

Attribute	Type	Purpose
Identifier	text	Unique name of the chart
Visualization Type	text	Chart
Type	text	Type of chart e.g. pie-chart
Description	text	Description of the chart
Object	text	Chart is generated from the data from this object e.g. application
Chart attributes	JSON	JSON file containing chart attribute
API	URI	API end point for chart data

Following table contains a list of chart API parameters:

#	Parameter	Description
1	Object Name	Name of primary object from which chart data to be retrieved
2	Aggregation Method	Sum, Count, Avg, Min, Max
3	Aggregation Field	Name of the field to be aggregated
4	Sort Order	ASC or DESC
5	Number of records	all - to get all records, or number of records e.g. 10

Example of chart data API to group all applications by category group

chartdata/application/count/categorygroup/DESC/all

Example of chart data API to translate binary values (0 and 1) to Yes and No

chartdata/application/count/drenabled/DESC/all?flag=true

JSON for the chart:

[
    {
        "configuration": {
            "legend": true,
            "showLabels": true,
            "animations": true,
            "xAxis": true,
            "yAxis": true,
            "showYAxisLabel": true,
            "showXAxisLabel": true,
            "xAxisLabel": "Score",
            "yAxisLabel": "Application",
            "timeline": true,
            "gradient": true,
            "showLegend": true,
            "isDoughnut": false,
            "showXAxis": true,
            "showYAxis": true,
            "legendTitle": "Legend",
            "legendPosition": "right",
            "tooltipDisabled": false,
            "showText": true,
            "showGridLines": true,
            "innerPadding": "10%",
            "barPadding": 8,
            "groupPadding": 16,
            "roundDomains": false,
            "maxRadius": 10,
            "minRadius": 3,
            "showSeriesOnHover": true,
            "roundEdges": true,
            "xScaleMin": 0,
            "xScaleMax": 0,
            "yScaleMin": 0,
            "yScaleMax": 0,
            "showDataLabel": false,
            "noBarWhenZero": true,
            "trimXAxisTicks": true,
            "trimYAxisTicks": true,
            "rotateXAxisTicks": true,
            "maxXAxisTickLength": 16,
            "maxYAxisTickLength": 16,
            "explodeSlices": true,
            "doughnut": false,
            "arcWidth": 0.25,
            "autoScale": true,
            "timeline1": false,
            "showRightYAxisLabel": true,
            "yAxisLabelRight": "Utilization"
        },
        "data": [],
        "api": "api/v1/chartdata/application/count/categorygroup/DESC/all",
        "info": {
            "chartname": "Application by Category Group - Pie Chart",
            "chartType": "pie-chart"
        },
        "size": {
            "x": 700,
            "y": 300
        }
    }
]