Skip to content

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
Visible boolean Optional true
_Type const Required

ChartContent

Chart Content is interactive. In iOS, we can make it non-interactive by setting the isReadOnly flag.

  • type: object with 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: object with 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

Supported only for iOS.

  • type: object with following properties.
Property Type Required Default
Title string Optional
Subtitle string Optional
StatusText string Optional
CategoryTitles string Optional

Title

Subtitle

StatusText

CategoryTitles


DataSubscriptions

Array of data change events to subscribe to.


Footer bar to be displayed below this control's content section.


Header bar to be displayed above this control's content section.


Visible

Set the visibility of this control.

  • type: boolean
  • default: true

_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",
          "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": ""
              }
            }
          }
        }
      ]
    }
  ]
}