xyChart Stacked Bar Chart not displaying total

Ignition
1

I'm experiencing what I believe is a basic configuration issue, but I haven't made much progress in resolving it.

I'm trying to create a chart that displays the daily count of calls related to a specific area.

I'm using an XYChart to present the data in a bar chart format.

The core setup involves using a named query to retrieve the count of issues by area, including a date field.

Summary 
SELECT 
    CONVERT(VARCHAR, i.StartDate, 23) AS Day,
    p.Prod_Area AS label,
    COUNT(i.AreaID) AS val
FROM Issue i
JOIN Prod_Area p ON i.AreaID = p.ID
WHERE i.StartDate > '2025-02-08'
GROUP BY CONVERT(VARCHAR, i.StartDate, 23), p.Prod_Area
ORDER BY Day, p.Prod_Area;

I than bind this to the to dataSource of xy chart

Summary 

def transform(self, value, quality, timestamp):


    data = system.dataset.toPyDataSet(value)
    Build = []


    # Iterate over each row in the dataset
    for row in data:
        time = row['Day']  # Extract day
        label = row['label']  # Extract label
        val = int(row['val'])  # Extract and convert value
        Construct = { 'T_stamp':time,label: val}
        Build.append(Construct)
        # Initialize the list for the day if not already pr

    return Build

Which gives me data sets with a number of records per area per day

image
image631×478 57.4 KB

Following on from this I have scripted the creation of the series data

Summary 
||import random|
|---|---|
|||
||# List of distinct colors (can be expanded or randomized)|
||color_palette = [#FFA056, #56A0FF, #A056FF, #56FFA0, #FF56A0, #A0FF56, #FFD700, #00CED1]|
|||
||# Convert dataset to Python dataset|
||data = system.dataset.toPyDataSet(value)|
|||
||# Initialize lists|
||Build = []|
||SeriesOut = []|
|||
||# Extract unique labels from dataset|
||for row in data:|
||    label = row['label']  # Extract label|
||    if label not in Build:|
||        Build.append(label)|
|||
||# Create a full series instance for each label|
||for index, area in enumerate(Build):|
||    # Assign a unique color, cycling through the predefined list|
||    fill_color = color_palette[index % len(color_palette)]|
||    stroke_color = #E72955  # Fixed stroke color, but can be randomized|
|||
||    series = {|
||        name: area,   # The name of the series|
||        label: { text: area },  # Label text for display|
||        visible: True,|
||        hiddenInLegend: False,|
||        defaultState: { visible: True },|
||        data: { source: DB, x: T_stamp, y: area },|
||        xAxis: T_stamp,|
||        yAxis: val,|
||        zIndex: 0,|
||        tooltip: {|
||            enabled: True,|
||            text: Count: [bold]{valueY}[/] Faults,|
||            cornerRadius: 3,|
||            pointerLength: 4,|
||            background: { color: #fafafa, opacity: 1 }|
||        },|
||        render: column,|
||        column: {|
||            open: { x: , y:  },|
||            appearance: {|
||                fill: { color: fill_color, opacity: 1 },  # Unique fill color|
||                stroke: { color: stroke_color, opacity: 1, width: 1 },|
||                width: None,|
||                height: None,|
||                stacked: True,|
||                deriveFieldsFromData: {|
||                    fill: { color: , opacity:  },|
||                    stroke: { color: , opacity: , width:  }|
||                },|
||                heatRules: {|
||                    enabled: False, max: #FE1810, min: #0CA3FB, dataField: time|
||                }|
||            }|
||        }|
||    }|
|||
||    SeriesOut.append(series)|
|||
||# Return the list of fully defined series instances|
||return SeriesOut|

image
image334×494 67.9 KB

I end up with a chart as below

image
image1069×896 94.5 KB

The issue is that the total value for each day is not stacked correctly.

For example, on 2025-02-08, there were two calls—one in each of two separate areas—resulting in a total of two calls. However, the chart only displays one.

Similarly, on 2025-02-09, there were a total of eight calls—six in one area and two in another—but the chart does not reflect the correct total.

My goal is to display the total number of calls per day while also visualizing which areas had the most issues.

I'm certain there's something basic I've overlooked, but I would appreciate any help in identifying the issue.

2

Are you saying the data is correct but it's not displaying as you intended?

I think you're going to need to post the chart JSON (right-click on the component in the Project Browser and copy) and the data (as the binding won't work on our systems). Please see Wiki - how to post code on this forum. If you need to redact sensitive information then use a text editor to find and replace but test that the chart and data works before posting!

3

Hi @Transistor

Thanks for the quick reply!

Yes, the data is correct. For example, on a given day, there might be one record for Area 1 and another for Area 2, with both records summing to a total of two calls for that day. However, the chart only shows a height of one instead of two.

If I hide the data for Area 1, I can see that Area 2 is present in the chart. This suggests that the values are not being stacked correctly. Instead of stacking one on top of the other, both values are starting from zero, whereas I would expect the second value to start at the end of the first.

DataSource Json 
{
  "DB": [
    {
      "Area 3": 1,
      "T_stamp": "2025-02-08"
    },
    {
      "T_stamp": "2025-02-08",
      "Area 1": 1
    },
    {
      "Area 3": 1,
      "T_stamp": "2025-02-09"
    },
    {
      "T_stamp": "2025-02-09",
      "CIP 32": 1
    },
    {
      "T_stamp": "2025-02-09",
      "Area 1": 6
    },
    {
      "FM 26": 1,
      "T_stamp": "2025-02-09"
    },
    {
      "Area 4": 2,
      "T_stamp": "2025-02-09"
    },
    {
      "Area 3": 2,
      "T_stamp": "2025-02-10"
    },
    {
      "T_stamp": "2025-02-10",
      "CIP 31": 1
    },
    {
      "CIP 33": 1,
      "T_stamp": "2025-02-10"
    },
    {
      "Area 5": 1,
      "T_stamp": "2025-02-10"
    },
    {
      "T_stamp": "2025-02-10",
      "Area 1": 5
    },
    {
      "T_stamp": "2025-02-10",
      "Area 2": 2
    },
    {
      "Area 4": 1,
      "T_stamp": "2025-02-10"
    },
    {
      "All": 1,
      "T_stamp": "2025-02-11"
    },
    {
      "T_stamp": "2025-02-11",
      "Area 1": 5
    },
    {
      "T_stamp": "2025-02-11",
      "Area 2": 1
    },
    {
      "T_stamp": "2025-02-11",
      "Area 6": 1
    },
    {
      "Area 3": 4,
      "T_stamp": "2025-02-12"
    },
    {
      "T_stamp": "2025-02-12",
      "Area 1": 3
    },
    {
      "FM 26": 2,
      "T_stamp": "2025-02-12"
    },
    {
      "T_stamp": "2025-02-12",
      "Area 2": 1
    },
    {
      "Area 4": 4,
      "T_stamp": "2025-02-12"
    },
    {
      "Area 3": 4,
      "T_stamp": "2025-02-13"
    },
    {
      "T_stamp": "2025-02-13",
      "CIP 31": 1
    },
    {
      "Area 5": 1,
      "T_stamp": "2025-02-13"
    },
    {
      "T_stamp": "2025-02-13",
      "Area 1": 4
    },
    {
      "FM 26": 3,
      "T_stamp": "2025-02-13"
    },
    {
      "T_stamp": "2025-02-13",
      "Area 2": 2
    },
    {
      "Area 4": 1,
      "T_stamp": "2025-02-13"
    },
    {
      "T_stamp": "2025-02-13",
      "Systems": 1
    },
    {
      "Area 4": 1,
      "T_stamp": "2025-02-14"
    }
  ]
}
Output from copy of component 
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "title": {
        "text": " Number Calls By Area",
        "appearance": {
          "font": {
            "size": 20
          },
          "padding": {
            "bottom": 10
          }
        }
      },
      "subtitle": {
        "appearance": {}
      },
      "legend": {
        "markers": {
          "stroke": {},
          "icon": {}
        },
        "labels": {
          "font": {}
        }
      },
      "cursor": {
        "lineX": {
          "stroke": {}
        },
        "lineY": {
          "stroke": {}
        }
      },
      "enableTransitions": true,
      "background": {
        "render": "color",
        "opacity": 0
      },
      "xAxes": [
        {
          "name": "T_stamp",
          "label": {
            "enabled": true,
            "text": "Hours"
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 5
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "day",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d/yyyy HH:mm:ss"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "opacity": 1,
              "rotation": 90,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "opacity": 0,
              "dashArray": "",
              "minDistance": 10,
              "position": 5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "val",
          "label": {
            "enabled": true,
            "text": "Number of Calls"
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "value",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "hour",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "yyyy-MM-dd kk:mm:ss",
            "format": "M/d"
          },
          "value": {
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "#,###.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "opacity": 1,
              "dashArray": "",
              "minDistance": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "style": {
        "classes": "Loading/SoftStart",
        "overflow": "hidden"
      },
      "dataSources": {}
    },
    "meta": {
      "name": "XYChartDatabases_1"
    },
    "position": {
      "grow": 1
    },
    "custom": {},
    "propConfig": {
      "props.background.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.cursor.lineX.stroke.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.cursor.lineY.stroke.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.dataSources.DB": {
        "binding": {
          "type": "query",
          "config": {
            "returnFormat": "dataset",
            "queryPath": "IssueTracker/QueryAreaByDay"
          },
          "transforms": [
            {
              "code": "\n    \"\"\"\n    This function processes a dataset containing a \"Day\" column and groups data based on unique days.\n    It creates a structured dictionary where each day is a key, and its corresponding values are stored \n    as a list of dictionaries containing label-value pairs.\n\n    Author: Do'Hara\n    Department: BACC Operations\n    Created: 2025-02-14\n    \"\"\"\n\n    # Convert dataset to Python dataset\n    data = system.dataset.toPyDataSet(value)\n    Build = []\n\n\n    # Iterate over each row in the dataset\n    for row in data:\n        time = row['Day']  # Extract day\n        label = row['label']  # Extract label\n        val = int(row['val'])  # Extract and convert value\n        Construct = { 'T_stamp':time,label: val}\n        Build.append(Construct)\n        # Initialize the list for the day if not already pr\n\n    return Build",
              "type": "script"
            }
          ]
        }
      },
      "props.legend.labels.font.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.legend.markers.icon.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.legend.markers.stroke.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.series": {
        "binding": {
          "type": "query",
          "config": {
            "returnFormat": "dataset",
            "queryPath": "IssueTracker/QueryAreaByDay"
          },
          "transforms": [
            {
              "code": "\timport random\n\t\n\t# List of distinct colors (can be expanded or randomized)\n\tcolor_palette = [\"#FFA056\", \"#56A0FF\", \"#AC00AC\", \"#56FFA0\", \"#FFFF00\", \"#A0FF56\", \"#FFD700\", \"#0000FF\"]\n\t\n\t# Convert dataset to Python dataset\n\tdata = system.dataset.toPyDataSet(value)\n\t\n\t# Initialize lists\n\tBuild = []\n\tSeriesOut = []\n\t\n\t# Extract unique labels from dataset\n\tfor row in data:\n\t    label = row['label']  # Extract label\n\t    if label not in Build:\n\t        Build.append(label)\n\t\n\t# Create a full series instance for each label\n\tfor index, area in enumerate(Build):\n\t    # Assign a unique color, cycling through the predefined list\n\t    fill_color = color_palette[index % len(color_palette)]\n\t    stroke_color = \"#E72955\"  # Fixed stroke color, but can be randomized\n\t\n\t    series = {\n\t        \"name\": area,   # The name of the series\n\t        \"label\": { \"text\": area },  # Label text for display\n\t        \"visible\": True,\n\t        \"hiddenInLegend\": False,\n\t        \"defaultState\": { \"visible\": True },\n\t        \"data\": { \"source\": \"DB\", \"x\": \"T_stamp\", \"y\": area },\n\t        \"xAxis\": \"T_stamp\",\n\t        \"yAxis\": \"val\",\n\t        \"zIndex\": 0,\n\t        \"tooltip\": {\n\t            \"enabled\": True,\n\t            \"text\": \"Count: [bold]{valueY}[/] Faults\",\n\t            \"cornerRadius\": 3,\n\t            \"pointerLength\": 4,\n\t            \"background\": { \"color\": \"#fafafa\", \"opacity\": 1 }\n\t        },\n\t        \"render\": \"column\",\n\t        \"column\": {\n\t            \"open\": { \"x\": \"\", \"y\": \"\" },\n\t            \"appearance\": {\n\t                \"fill\": { \"color\": fill_color, \"opacity\": 1 },  # Unique fill color\n\t                \"stroke\": { \"color\": stroke_color, \"opacity\": 1, \"width\": 1 },\n\t                \"width\": None,\n\t                \"height\": None,\n\t                \"stacked\": True,\n\t                \"deriveFieldsFromData\": {\n\t                    \"fill\": { \"color\": \"\", \"opacity\": \"\" },\n\t                    \"stroke\": { \"color\": \"\", \"opacity\": \"\", \"width\": \"\" }\n\t                },\n\t                \"heatRules\": {\n\t                    \"enabled\": False, \"max\": \"#FE1810\", \"min\": \"#0CA3FB\", \"dataField\": \"time\"\n\t                }\n\t            }\n\t        }\n\t    }\n\t\n\t    SeriesOut.append(series)\n\t\n\t# Return the list of fully defined series instances\n\treturn SeriesOut",
              "type": "script"
            }
          ]
        }
      },
      "props.subtitle.appearance.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.title.appearance.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.xAxes[0].appearance.grid.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.xAxes[0].appearance.labels.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.xAxes[0].label.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.xAxes[0].tooltip.background.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.yAxes[0].appearance.grid.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.yAxes[0].appearance.labels.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.yAxes[0].label.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      },
      "props.yAxes[0].tooltip.background.color": {
        "binding": {
          "type": "property",
          "config": {
            "path": "session.custom.config.chartThemeColors.chosenTheme.neutral-100"
          }
        }
      }
    },
    "events": {
      "dom": {
        "onDoubleClick": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "\tself.view.params.currentParameters = []\n\tself.view.params.currentParameters.append(self.view.params.previousParameters)\n\tself.view.params.currentParameters.append(self.view.params.previousView)\n\tself.view.params.currentParameters.append(self.view.params.Machine)\n\tsystem.perspective.navigate(view = 'Alarms/Puncher/FaultDetails', params = {'Machine':self.view.params.Machine, 'TableName' : self.parent.parent.parent.getChild(\"FlexContainer\").custom.MachineTable, 'Warning' :  self.parent.parent.parent.getChild(\"FlexContainer\").custom.Warnings, 'previousParameters':self.view.params.currentParameters,'previousView':'Alarms/Puncher/FaultsFullView'})"
          }
        }
      }
    }
  }
]

I hope I am providing the correct data and format here.

4

See series data below (Character limit reached on last post)

Series Json 
[
  {
    "name": "Area 3",
    "label": {
      "text": "Area 3"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "Area 3"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#FFA056",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "Area 1",
    "label": {
      "text": "Area 1"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "Area 1"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#56A0FF",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "CIP 32",
    "label": {
      "text": "CIP 32"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "CIP 32"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#AC00AC",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "FM 26",
    "label": {
      "text": "FM 26"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "FM 26"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#56FFA0",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "Area 4",
    "label": {
      "text": "Area 4"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "Area 4"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#FFFF00",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "CIP 31",
    "label": {
      "text": "CIP 31"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "CIP 31"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#A0FF56",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "CIP 33",
    "label": {
      "text": "CIP 33"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "CIP 33"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#FFD700",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "Area 5",
    "label": {
      "text": "Area 5"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "Area 5"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#0000FF",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "Area 2",
    "label": {
      "text": "Area 2"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "Area 2"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#FFA056",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "All",
    "label": {
      "text": "All"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "All"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#56A0FF",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "Area 6",
    "label": {
      "text": "Area 6"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "Area 6"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#AC00AC",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  },
  {
    "name": "Systems",
    "label": {
      "text": "Systems"
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "DB",
      "x": "T_stamp",
      "y": "Systems"
    },
    "xAxis": "T_stamp",
    "yAxis": "val",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "Count: [bold]{valueY}[/] Faults",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "#fafafa",
        "opacity": 1
      }
    },
    "render": "column",
    "column": {
      "open": {
        "x": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#56FFA0",
          "opacity": 1
        },
        "stroke": {
          "color": "#E72955",
          "opacity": 1,
          "width": 1
        },
        "width": null,
        "height": null,
        "stacked": true,
        "deriveFieldsFromData": {
          "fill": {
            "color": "",
            "opacity": ""
          },
          "stroke": {
            "color": "",
            "opacity": "",
            "width": ""
          }
        },
        "heatRules": {
          "enabled": false,
          "max": "#FE1810",
          "min": "#0CA3FB",
          "dataField": "time"
        }
      }
    }
  }
]
5

Nice job posting the code, thanks. You seem to be doing everything correctly. I thought there might be a problem with the chart doing something smart with the date strings but even if I change them to regular words I still get the same effect. Thinking ...

6

Looking at the AM Charts Stacked Series1 documentation, it says,

IMPORTANT
Stacking requires that all stacked series have equal number of data items with the same timestamps / categories. Mismatched datasets will have visually odd results when series are plotted. For a workaround, please visit tutorial "Stacking series with mismatched categories/dates".

That made me think that you need to supply zero values for any missing points in each category. A quick test with the first two days of your data and adding in a CIP 32 value for 8th failed to get it to stack.

1 The XY Chart component is based on AM Charts libraries.

XY Chart stack problem with six data points.txt (34.1 KB)
(Open, copy and paste the JSON into a view's root.)

XY Chart stack problem
XY Chart stack problem700×477 13 KB

Figure 1. The results of the six data-point configuration.

The Fish stack should show 3 + 1 + 0.
The Chips stack should show 3 + 1 + 6.