Skip to content

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 complex Optional
AnalyticCards array Optional
DataSubscriptions DataSubscriptions Optional
EmptySection EmptySection Optional
Footer Footer Optional
Header Header Optional
MaxItemCount integer 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: complex

AnalyticCard Value

One of the following conditions need to be fulfilled.

Condition 1


AnalyticCards

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

  • type: array

All items must be of the type:

One of the following conditions need to be fulfilled.

Condition 1


DataSubscriptions

Array of data change events to subscribe to.


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.


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


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


MaxItemCount

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

  • type: integer

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",
                "TrendImage": "/MDKApp/Images/down.png",
                "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",
                  "TrendImage": "ChartCardTrendImage"
                },
                "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"]
                }
            }
          ]
        }
      ]
    }
  ]
}

Style Classes Definition Examples

/* Chart Card - Title */
.ChartCardTitle {
  font-color: white;
  font-style: UIFontTextStyleBody;
  font-size: 16px;
}

/* Chart Card - Subtitle */
.ChartCardSubtitle {
  font-color: white;
  font-style: UIFontTextStyleBody;
  font-size: 16px;
}

/* Chart Card - StatusText */
.ChartCardStatusText {
  font-color: white;
  font-style: UIFontTextStyleBody;
  font-size: 16px;
}

/* Chart Card - Series Title */
.ChartCardSeriesTitle {
  font-color: white;
  font-style: UIFontTextStyleBody;
  font-size: 16px;
}

/* Chart Card - Trend Title */
.ChartCardTrendTitle {
  font-color: white;
  font-style: UIFontTextStyleBody;
  font-size: 16px;
}

/* Chart Card - Trend Image */
.ChartCardTrendImage {
  tint-color: white;
}