AnalyticCardCollection¶

AnalyticCard Collection is a container that manages and displays a set of ChartCards. ChartCards display a thumbnail view of a chart, with key information shown.

AnalyticCardCollection Properties¶

Property	Type	Required	Default
AnalyticCard	ChartCard	Optional
AnalyticCards	ChartCard	Optional
DataSubscriptions	DataSubscriptions	Optional
EmptySection	EmptySection	Optional
Footer	Footer	Optional
Header	Header	Optional
MaxItemCount	`integer`	Optional
Separators	Separator	Optional
Target	LinkQueryFunctionTarget	Optional
Visible	`boolean`	Optional	`true`
_Name	`string`	Optional
_Type	`const`	Required

AnalyticCard¶

Use for Dynamic Card Collection. This is the template for the analytic card for each entries in result defined from the Target property

type: ChartCard

AnalyticCards¶

Use this for Static Card Collection. Each entries in this array represent an analytic card.

type: ChartCard[]

All array items must be of the type: ChartCard

DataSubscriptions¶

Array of data change events to subscribe to.

type: DataSubscriptions

EmptySection¶

A section that will be displayed when the list is empty, this only applies if you are using Target binding. Allows you to show custom label when the list is empty.

type: EmptySection

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

type: Footer

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

type: Header

MaxItemCount¶

If MaxItemCount is not specified, then all cards are displayed in the section.

type: integer

Separators¶

To provide more flexibility with rendering of controls and sections, set the visibility of the separator lines.

type: Separator

Target¶

Use only accompanied with AnalyticCard property.

For Dynamic Card Collection, use Target at the section level. More details: Refer to the examples below.
For Static Card Collection, use Target at the card level. More details: Refer to the examples below.
type: LinkQueryFunctionTarget

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.AnalyticCardCollection"

Examples¶

Static Analytic Card collection containing ChartCard¶

{
  "_Type": "Page",
  "_Name": "AnalyticCardCollectionPage",
  "Caption": "Collection of analytic cards",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.AnalyticCardCollection",
          "AnalyticCards": [
            {
                "_Type": "Card.Type.Chart",
                "ChartType": "Line",
                "Title": "Temperature",
                "Subtitle": "Displaying temp",
                "TrendImage": "/MDKApp/Images/down.png",
                "TrendTitle": "11.5%",
                "StatusText": "8h ago",
                "LeadingUnit": "",
                "Metric": "104",
                "TrailingUnit": "°F",
                "SeriesTitle": [
                  "2016"
                ],
                "SeriesColor": [
                  "#fcba03"
                ],
                "DataSeries": {
                  "Data": "/MDKApp/Rules/DefineDataSeries.js"
                }
            }
          ]
        }
      ]
    }
  ]
}

Dynamic AnalyticCard Collection - Using EntitySet as Target¶

{
  "_Type": "Page",
  "_Name": "Dynamic AnalyticCardCollectionPage",
  "Caption": "Collection of dynamically generated analytic cards",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.AnalyticCardCollection",
          "_Name": "SectionedTable",
          "Sections": [
            {
              "_Type": "Section.Type.AnalyticCardCollection",
              "AnalyticCard": {
                "_Type": "Card.Type.Chart",
                "ChartType": "Line",
                "Title": "Yearly Sales",
                "SeriesTitle": "{YearOfProduction}",
                "SeriesColor": "/MdkApp/Rules/GetColor.js",
                "DataSeries": {
                  "Data": "{DataSeries1}",
                  "CategoryTitles": "{CategorySeries}",
                  "CategoryLabelVisible": true,
                  "NumericLabelVisible": false
                }
              },
              "Target": {
                "EntitySet": "MySalesOrders",
                "Service": "/MDKApp/Services/Amw.service"
              }
            }
          ]
        }
      ]
    }
  ]
}

Dynamic AnalyticCard Collection - Using Rule as Target¶

{
  "_Type": "Page",
  "_Name": "Dynamic AnalyticCardCollectionPage",
  "Caption": "Collection of dynamically generated analytic cards",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.AnalyticCardCollection",
          "_Name": "SectionedTable",
          "Sections": [
            {
              "_Type": "Section.Type.AnalyticCardCollection",
              "AnalyticCard": {
                "_Type": "Card.Type.Chart",
                "ChartType": "Line",
                "Title": "Yearly Sales",
                "SeriesTitle": "{YearOfProduction}",
                "SeriesColor": "/MdkApp/Rules/GetColor.js",
                "DataSeries": {
                  "Data": "{DataSeries1}",
                  "CategoryTitles": "{CategorySeries}",
                  "CategoryLabelVisible": true,
                  "NumericLabelVisible": false
                }
              },
              "Target": "/MDKDevApp/Rules/ReadServiceForChartCard.js"
            }
          ]
        }
      ]
    }
  ]
}

Static Analytic Card collection having Charts with Dynamic DataSeries¶

{
  "_Type": "Page",
  "_Name": "AnalyticCardCollectionPage",
  "Caption": "Collection of analytic cards",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.AnalyticCardCollection",
          "AnalyticCards": [
            {
                "_Type": "Card.Type.Chart",
                "ChartType": "Line",
                "Title": "Temperature",
                "Subtitle": "Displaying temp",
                "TrendTitle": "11.5%",
                "StatusText": "8h ago",
                "LeadingUnit": "",
                "Visible": true,
                "OnPress": "/MDKApp/Actions/ExecuteAction.js",
                "Metric": "104",
                "TrailingUnit": "°F",
                "SeriesTitle": [
                  "2016"
                ],
                "SeriesColor": ["Red"],
                "DataSeries": {
                  "Data": "{DataSeries1}",
                  "CategoryTitles":  "{CategorySeries}",
                  "CategoryLabelVisible": true,
                  "NumericLabelVisible": false
                },
                "Styles": {
                  "Title": "ChartCardTitle",
                  "Subtitle": "ChartCardSubtitle",
                  "StatusText": "ChartCardStatusText",
                  "SeriesTitle": "ChartCardSeriesTitle",
                  "TrendTitle": "ChartCardTrendTitle"
                },
                "Target": {
                  "EntitySet": "MyWorkOrderHeaders",
                  "Service": "/MDKApp/Services/Amw.service"
                },
                "DataSubscriptions": "/MDKApp/Rules/OData/DataSubscriptions.js"
            }
          ]
        }
      ]
    }
  ]
}

Static Analytic Card collection having Charts with DataSeries set by Rules¶

{
  "_Type": "Page",
  "_Name": "AnalyticCardCollectionPage",
  "Caption": "Collection of analytic cards",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.AnalyticCardCollection",
          "AnalyticCards": [
            {
                "_Type": "Card.Type.Chart",
                "ChartType": "Line",
                "Title": "Temperature",
                "Subtitle": "Displaying temp",
                "TrendImage": "/MDKApp/Images/down.png",
                "TrendTitle": "11.5%",
                "StatusText": "8h ago",
                "LeadingUnit": "",
                "Metric": "104",
                "TrailingUnit": "°F",
                "SeriesTitle": [
                  "2016"
                ],
                "SeriesColor": ["#fcba03"],
                "DataSeries": {
                  "Data": "/MDKApp/Rules/DefineDataSeries.js"
                }
            }
          ]
        }
      ]
    }
  ]
}

Static Analytic Card collection having Charts with Static DataSeries¶

{
  "_Type": "Page",
  "_Name": "AnalyticCardCollectionPage",
  "Caption": "Collection of analytic cards",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.AnalyticCardCollection",
          "AnalyticCards": [
            {
                "_Type": "Card.Type.Chart",
                "ChartType": "Line",
                "Title": "Temperature",
                "Subtitle": "Displaying temp",
                "TrendImage": "/MDKApp/Images/down.png",
                "TrendTitle": "11.5%",
                "StatusText": "8h ago",
                "LeadingUnit": "",
                "Metric": "104",
                "TrailingUnit": "°F",
                "SeriesTitle": [
                  "2016",
                  "2017"
                ],
                "DataSeries": {
                  "Data": [
                    [
                      200,
                      170,
                      165,
                      143,
                      166,
                      112,
                      110
                    ],
                    [
                      150,
                      120,
                      130,
                      135,
                      120,
                      138,
                      137
                    ],
                  ],
                  "CategoryTitles": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
                }
            }
          ]
        }
      ]
    }
  ]
}

Static Analytic Card collection having Charts with a PlaceholderText and no Data¶

{
  "_Type": "Page",
  "_Name": "AnalyticCardCollectionPage",
  "Caption": "Collection of analytic cards",
  "Controls": [
    {
      "_Type": "Control.Type.SectionedTable",
      "_Name": "SectionedTable",
      "Sections": [
        {
          "_Type": "Section.Type.AnalyticCardCollection",
          "AnalyticCards": [
            {
                "_Type": "Card.Type.Chart",
                "ChartType": "Line",
                "Title": "Temperature",
                "Subtitle": "Displaying temp",
                "TrendImage": "/MDKApp/Images/down.png",
                "TrendTitle": "11.5%",
                "StatusText": "8h ago",
                "LeadingUnit": "",
                "Metric": "104",
                "TrailingUnit": "°F",
                "NoDataText":"No chart data available",
                "SeriesTitle": [
                  "2016",
                  "2017"
                ],
                "DataSeries": {
                  "CategoryTitles": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"]
                },
                "Styles": {
                  "NoDataText": "ChartCardNoDataText"
                }
            }
          ]
        }
      ]
    }
  ]
}