ChartContent¶
ChartContent is a container that provides a visual representation of one or more datasets. Should be used when displaying the Chart Floorplan in a non-full-screen context.
ChartContent Properties¶
| Property | Type | Required | Default |
|---|---|---|---|
| ChartContent | object |
Optional | |
| DataSubscriptions | DataSubscriptions | Optional | |
| Footer | Footer | Optional | |
| Header | Header | Optional | |
| Separators | Separators | Optional | |
| Visible | boolean |
Optional | true |
| _Name | string |
Optional | |
| _Type | const |
Required |
ChartContent¶
Chart Content is interactive. In iOS, we can make it non-interactive by setting the isReadOnly flag.
- type:
objectwith following properties.
| Property | Type | Required | Default |
|---|---|---|---|
Title |
string | Optional | |
Subtitle |
string | Optional | |
StatusText |
string | Optional | |
IsReadOnly |
boolean | Optional | |
ChartView |
ChartView | Optional | |
SummaryView |
object | Optional | |
Target |
LinkQueryFunctionTarget | Optional | |
Styles |
object | Optional |
Title¶
Subtitle¶
Subtitle is not supported in Android and supported only for iOS.
StatusText¶
IsReadOnly¶
If enabled, ChartContent section becomes read-only. This is only for iOS.
ChartView¶
SummaryView¶
- type:
objectwith following properties.
| Property | Type | Required | Default |
|---|---|---|---|
SeriesTitles |
array | Optional | |
AggregateItem |
AggregateItem | Optional | |
SelectedItem |
SelectedItem | Optional |
SeriesTitles¶
If this is absent, data will be picked from the SeriesTitles of ChartView. SeriesTitle is not supported in Android.
- type:
string[]
AggregateItem¶
SelectedItem¶
This property is only valid for read-only ChartContent section in iOS.
Target¶
Definition of the target binding to dynamically populate the collection. You can also set this to binding/rule to return an array of data items.
Note: If this is set to binding/rule, you must return an array of data items, you can't return Target definition.
Styles¶
- type:
objectwith following properties.
| Property | Type | Required | Default |
|---|---|---|---|
| Title | string | Optional | |
| Subtitle | string | Optional | |
| StatusText | string | Optional | |
| CategoryTitles | string | Optional | |
| NoDataText | string | Optional |
Title¶
The string value is a style class name for Title. iOS only.
- Text style class
Subtitle¶
The string value is a style class name for Subtitle. iOS only.
- Text style class
StatusText¶
The string value is a style class name for StatusText. iOS only.
- Text style class
CategoryTitles¶
The string value is a style class name for CategoryTitles. iOS only.
- Text style class
NoDataText¶
The string value is a style class name for NoDataText. Android only. font-typeface attribute not supported.
- Text style class
DataSubscriptions¶
Array of data change events to subscribe to.
- type: DataSubscriptions
Footer¶
Footer bar to be displayed below this control's content section.
- type: Footer
Header¶
Header bar to be displayed above this control's content section.
- type: Header
Separators¶
To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.
- type: Separators
Visible¶
Set the visibility of this control.
- type:
boolean - default:
true
_Name¶
- type:
string
_Type¶
- type:
const
The value of this property must be equal to:
"Section.Type.ChartContent"
Examples¶
Chart Content Page - Static - Interactive¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"_Name": "SalesChart",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"ChartView": {
"ChartType": "Column",
"SeriesTitles": [
"2017",
"2018"
],
"SeriesColor": [
"#0f0f0f",
"#ffffff"
],
"Data": [
[
100,
200,
300
],
[
100,
150,
500
]
],
"CategoryTitles": ["Jan", "Feb", "Mar"],
"TrendItems":[
{
"TrendTitle": "5%",
"TrendImage": ""
},
{
"TrendTitle": "30%",
"TrendImage": ""
},
{
"TrendTitle": "20%",
"TrendImage": ""
}
],
"CategoryAxisTitle": "Months",
"ValueAxisTitle": "Sales"
},
"SummaryView": {
"SeriesTitles": [
"Sales for 2017",
"Sales for 2018"
],
"AggregateItem": {
"Title": "Total Sales",
"Value": {
"LeadingUnit": "$",
"Metrics": [
"200",
"300"
],
"TrailingUnit": "k"
},
"TrendTitle": "20%",
"TrendImage": ""
}
}
}
}
]
}
]
}
Chart Content page - Static - ReadOnly¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"IsReadOnly": true,
"ChartView": {
"ChartType": "Column",
"SeriesTitles": [
"2017",
"2018"
],
"SeriesColor": [
"#0f0f0f",
"#ffffff"
],
"Data": [
[
100,
200,
300
],
[
100,
150,
500
]
],
"CategoryTitles": ["Jan", "Feb", "Mar"],
"CategoryAxisTitle": "Months",
"ValueAxisTitle": "Sales"
},
"SummaryView": {
"SeriesTitles": [
"Sales for 2017",
"Sales for 2018"
],
"AggregateItem": {
"Title": "Total Sales",
"Value": {
"LeadingUnit": "$",
"Metrics": [
"200",
"300"
],
"TrailingUnit": "k"
},
"TrendTitle": "20%",
"TrendImage": ""
},
"SelectedItem": {
"SelectedIndex": 2,
"Title": "Sales for Feb",
"Value": {
"LeadingUnit": "$",
"Metrics": [
"20",
"30"
],
"TrailingUnit": "k"
},
"TrendTitle": "10%",
"TrendImage": ""
}
}
}
}
]
}
]
}
Chart Content page - Static - Inferred Metrics - Interactive¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"ChartView": {
"ChartType": "Column",
"SeriesTitles": [
"2017",
"2018"
],
"SeriesColor": [
"#0f0f0f",
"#ffffff"
],
"Data": [
[
100,
200,
300
],
[
100,
150,
500
]
],
"CategoryTitles": ["Jan", "Feb", "Mar"],
"TrendItems":[
{
"TrendTitle": "5%",
"TrendImage": ""
},
{
"TrendTitle": "30%",
"TrendImage": ""
}
],
},
"SummaryView": {
"AggregateItem": {
"Title": "Total Sales",
"Value": {
"LeadingUnit": "$",
"TrailingUnit": "k",
"Function": "SUM"
},
"TrendTitle": "20%",
"TrendImage": ""
}
}
}
}
]
}
]
}
Chart Content page - Static - Inferred Metrics - ReadOnly¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"IsReadOnly": true,
"ChartView": {
"ChartType": "Column",
"SeriesTitles": [
"2017",
"2018"
],
"SeriesColor": [
"#0f0f0f",
"#ffffff"
],
"Data": [
[
100,
200,
300
],
[
100,
150,
500
]
],
"CategoryTitles": ["Jan", "Feb", "Mar"]
},
"SummaryView": {
"AggregateItem": {
"Title": "Total Sales",
"Value": {
"LeadingUnit": "$",
"TrailingUnit": "k",
"Function": "SUM"
},
"TrendTitle": "20%",
"TrendImage": ""
},
"SelectedItem": {
"Title": "Sales for Feb",
"Value": {
"LeadingUnit": "$",
"TrailingUnit": "k"
},
"TrendTitle": "10%",
"TrendImage": "",
"SelectedIndex": 2
}
}
}
}
]
}
]
}
Chart Content page - Static - Minimal - Interactive¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"ChartView": {
"ChartType": "Column",
"SeriesTitles": [
"2017",
"2018"
],
"SeriesColor": [
"#0f0f0f",
"#ffffff"
],
"Data": [
[
100,
200,
300
],
[
100,
150,
500
]
],
"CategoryTitles": ["Jan", "Feb", "Mar"],
"TrendItems":[
{
"TrendTitle": "5%",
"TrendImage": ""
},
{
"TrendTitle": "30%",
"TrendImage": ""
},
{
"TrendTitle": "20%",
"TrendImage": ""
}
]
},
"SummaryView": {
"AggregateItem": {
"Title": "Total Sales",
"TrendTitle": "20%",
"TrendImage": ""
}
}
}
}
]
}
]
}
Chart Content page - Static - Minimal - ReadOnly¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"IsReadOnly": true,
"ChartView": {
"ChartType": "Column",
"SeriesTitles": [
"2017",
"2018"
],
"SeriesColor": [
"#0f0f0f",
"#ffffff"
],
"Data": [
[
100,
200,
300
],
[
100,
150,
500
]
],
"CategoryTitles": ["Jan", "Feb", "Mar"],
},
"SummaryView": {
"AggregateItem": {
"Title": "Total Sales",
"TrendTitle": "20%",
"TrendImage": ""
},
"SelectedItem": {
"Title": "Sales for Feb",
"TrendTitle": "10%",
"TrendImage": "",
"SelectedIndex": 2
}
}
}
}
]
}
]
}
Chart Content page - Dynamic - Interactive¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"ChartView": {
"ChartType": "Column",
"SeriesTitles": "{SeriesTitles}",
"SeriesColor": "{SeriesColor}",
"Data": "{DataPoints}",
"CategoryTitles": "{CategoryTitles}"
},
"SummaryView": {
"AggregateItem": {
"Title": "Total Sales",
"TrendTitle": "20%",
"TrendImage": ""
}
},
"Target": {
"EntitySet": "MySalesOrders",
"Service": "/MDKDevApp/Services/Amw.service"
}
}
}
]
}
]
}
Chart Content page - Dynamic - ReadOnly¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"IsReadOnly": true,
"ChartView": {
"ChartType": "Column",
"SeriesTitles": "{SeriesTitles}",
"SeriesColor": "{SeriesColor}",
"Data": "{DataPoints}",
"CategoryTitles": "{CategoryTitles}",
},
"SummaryView": {
"AggregateItem": {
"Title": "Total Sales",
"TrendTitle": "20%",
"TrendImage": ""
},
"SelectedItem": {
"Title": "Sales for Feb",
"TrendTitle": "10%",
"TrendImage": "",
"SelectedIndex": 2
}
},
"Target": {
"EntitySet": "MySalesOrders",
"Service": "/MDKDevApp/Services/Amw.service"
}
}
}
]
}
]
}
Chart Content Page - Static - Interactive - with a PlaceholderText and no Chart Data¶
{
"_Type": "Page",
"_Name": "ChartContentSectionPage",
"Controls": [
{
"_Type": "Control.Type.SectionedTable",
"_Name": "SectionedTable",
"Sections": [
{
"_Type": "Section.Type.ChartContent",
"ChartContent": {
"Title": "Sales categorized by Months",
"Subtitle": "Displaying sales in $",
"StatusText": "8h ago",
"ChartView": {
"ChartType": "Column",
"SeriesTitles": [
"2017",
"2018"
],
"SeriesColor": [
"#0f0f0f",
"#ffffff"
],
"CategoryTitles": ["Jan", "Feb", "Mar"],
"TrendItems":[
{
"TrendTitle": "5%",
"TrendImage": ""
},
{
"TrendTitle": "30%",
"TrendImage": ""
},
{
"TrendTitle": "20%",
"TrendImage": ""
}
],
"NoDataText":"No chart data available",
"CategoryAxisTitle": "Months",
"ValueAxisTitle": "Sales"
},
"SummaryView": {
"SeriesTitles": [
"Sales for 2017",
"Sales for 2018"
],
"AggregateItem": {
"Title": "Total Sales",
"Value": {
"LeadingUnit": "$",
"Metrics": [
"200",
"300"
],
"TrailingUnit": "k"
},
"TrendTitle": "20%",
"TrendImage": ""
}
},
"Styles": {
"NoDataText": "ChartNoDataText"
}
}
}
]
}
]
}
Style Classes Definition¶
/* Chart Content- Chart NoDataText */
.ChartNoDataText {
color: red;
font-size: 10;
}