Floating Bar Chart / Non-additive Stacking?

Ignition
,
1

Hello,

I’m trying to make a bar chart in perspective using the XY Chart, similar to the XY Chart Example - Gantt Chart | Ignition User Manual, but vertical and using values instead of time.

I have flipped the axis on the chart, and change the time to value, this mostly works. And with time it actually does work with absolute times

However I need the chart to be stacked and series[1].column.stacked adds the values up

Non stacked: the values are fine

image
image468×574 12.7 KB

stacked: True - The values are now added?

image
image462×571 13 KB

I could adjust the values myself, just subtracting the sum of each previous row to the values, but that doesn’t seem like the best option, and I can’t help but feel like I’m missing something about the component. Is there a better way to do this?

Edit: The candlestick render type did not work, as the colors on that chart were not adjustable, even with derivefieldsfromdata

2

For better configuration, many opt for a third-party module like embr-charts.

1 Like
3

Thanks and I’d love to, but considering this project has to go out to many gateways, another module to update and manage across all of them is a bit too much hassle for this application

4

“This project is too big to use time-saving/quality improving resources.”

No sympathy :man_shrugging:t2:

6 Likes
5

Rude

6

It may be rude, but us geeks tend to approach the autism spectrum, if not in it, and blunt truth sometimes escapes us.

Ignition is modular, and IA encourages module development to plug gaps in their native modules.

I'm with Ben. No sympathy.

3 Likes
7

dark

mode

:ghost:

8 
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "cursor": {
        "series": "mySeries"
      },
      "scrollBars": {
        "horizontal": {
          "enabled": false,
          "series": "mySeries"
        },
        "vertical": {
          "enabled": false,
          "series": "mySeries"
        }
      },
      "xAxes": [
        {
          "name": "Operator",
          "label": {
            "enabled": false,
            "text": "Process Temp",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "date",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "minute",
              "count": 2,
              "skipEmptyPeriods": true
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "SSSSSSSSSS",
            "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": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": null,
              "position": 1
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "time",
          "label": {
            "enabled": true,
            "text": "Duration",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "value",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": "",
              "endCategory": "",
              "size": 0.05
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "minute",
              "count": 1,
              "skipEmptyPeriods": false
            },
            "range": {
              "max": "",
              "min": "",
              "useStrict": false
            },
            "break": {
              "enabled": false,
              "startDate": "",
              "endDate": "",
              "size": 0.05
            },
            "inputFormat": "ss",
            "format": "SSS"
          },
          "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": {
              "color": "",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "",
              "opacity": 1,
              "dashArray": "",
              "minDistance": 10,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "mySeries",
          "label": {
            "text": "RUNNING"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "name2",
            "y": "toDuration"
          },
          "xAxis": "Operator",
          "yAxis": "time",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{fromDuration} - {toDuration}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "column",
          "candlestick": {
            "open": {
              "x": "",
              "y": ""
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "fill": {
                "color": "",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "column": {
            "open": {
              "x": "name",
              "y": "fromDuration"
            },
            "appearance": {
              "fill": {
                "color": "#1ABD1D",
                "opacity": 1
              },
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "stacked": false,
              "width": null,
              "height": null,
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "heatRules": {
                "enabled": false,
                "max": "",
                "min": "",
                "dataField": ""
              }
            }
          },
          "line": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          },
          "stepLine": {
            "open": {
              "x": "",
              "y": ""
            },
            "appearance": {
              "connect": true,
              "tensionX": 1,
              "tensionY": 1,
              "minDistance": 0.5,
              "stroke": {
                "width": 3,
                "opacity": 1,
                "color": "",
                "dashArray": ""
              },
              "fill": {
                "opacity": 0,
                "color": ""
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "rotation": 0,
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        },
        {
          "candlestick": {
            "appearance": {
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "fill": {
                "color": "",
                "opacity": 1
              },
              "heatRules": {
                "dataField": "",
                "enabled": false,
                "max": "",
                "min": ""
              },
              "stacked": false,
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              }
            },
            "high": {
              "x": "",
              "y": ""
            },
            "low": {
              "x": "",
              "y": ""
            },
            "open": {
              "x": "",
              "y": ""
            }
          },
          "column": {
            "appearance": {
              "deriveFieldsFromData": {
                "fill": {
                  "color": "",
                  "opacity": ""
                },
                "stroke": {
                  "color": "",
                  "opacity": "",
                  "width": ""
                }
              },
              "fill": {
                "color": "",
                "opacity": 1
              },
              "heatRules": {
                "dataField": "",
                "enabled": false,
                "max": "",
                "min": ""
              },
              "height": null,
              "stacked": false,
              "stroke": {
                "color": "",
                "opacity": 1,
                "width": 1
              },
              "width": null
            },
            "open": {
              "x": "name",
              "y": "fromDuration"
            }
          },
          "data": {
            "source": "example2",
            "x": "name2",
            "y": "toDuration"
          },
          "defaultState": {
            "visible": true
          },
          "hiddenInLegend": false,
          "label": {
            "text": "Test"
          },
          "line": {
            "appearance": {
              "bullets": [
                {
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "rotation": "",
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    }
                  },
                  "enabled": false,
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "heatRules": {
                    "dataField": "",
                    "enabled": false,
                    "max": 100,
                    "min": 2
                  },
                  "height": 10,
                  "label": {
                    "position": {
                      "dx": 0,
                      "dy": 0
                    },
                    "text": "{value}"
                  },
                  "render": "circle",
                  "rotation": 0,
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "tooltip": {
                    "background": {
                      "color": "",
                      "opacity": 1
                    },
                    "cornerRadius": 3,
                    "enabled": true,
                    "pointerLength": 4,
                    "text": "{name}: [bold]{valueY}[/]"
                  },
                  "width": 10
                }
              ],
              "connect": true,
              "fill": {
                "color": "",
                "opacity": 0
              },
              "minDistance": 0.5,
              "stroke": {
                "color": "",
                "dashArray": "",
                "opacity": 1,
                "width": 3
              },
              "tensionX": 1,
              "tensionY": 1
            },
            "open": {
              "x": "",
              "y": ""
            }
          },
          "name": "mySeries2",
          "render": "column",
          "stepLine": {
            "appearance": {
              "bullets": [
                {
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "rotation": "",
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    }
                  },
                  "enabled": true,
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "heatRules": {
                    "dataField": "",
                    "enabled": false,
                    "max": 100,
                    "min": 2
                  },
                  "height": 10,
                  "label": {
                    "position": {
                      "dx": 0,
                      "dy": 0
                    },
                    "text": "{value}"
                  },
                  "render": "circle",
                  "rotation": 0,
                  "stroke": {
                    "color": "",
                    "opacity": 1,
                    "width": 1
                  },
                  "tooltip": {
                    "background": {
                      "color": "",
                      "opacity": 1
                    },
                    "cornerRadius": 3,
                    "enabled": true,
                    "pointerLength": 4,
                    "text": "{name}: [bold]{valueY}[/]"
                  },
                  "width": 10
                }
              ],
              "connect": true,
              "fill": {
                "color": "",
                "opacity": 0
              },
              "minDistance": 0.5,
              "stroke": {
                "color": "",
                "dashArray": "",
                "opacity": 1,
                "width": 3
              },
              "tensionX": 1,
              "tensionY": 1
            },
            "open": {
              "x": "",
              "y": ""
            }
          },
          "tooltip": {
            "background": {
              "color": "",
              "opacity": 1
            },
            "cornerRadius": 3,
            "enabled": true,
            "pointerLength": 4,
            "text": "{name}: [bold]{valueY}[/]"
          },
          "visible": true,
          "xAxis": "Operator",
          "yAxis": "time",
          "zIndex": 0
        }
      ],
      "dataSources": {
        "example": [
          {
            "color": "#0FFF30",
            "fromDuration": 12,
            "name": 1769444100,
            "name2": 1769444500,
            "toDuration": 13
          },
          {
            "color": "#00FF30",
            "fromDuration": 11,
            "name": 1769445100,
            "name2": 1769445600,
            "toDuration": 2
          },
          {
            "color": "#00FF30",
            "fromDuration": 4,
            "name": 1769446100,
            "name2": 1769446600,
            "toDuration": 5
          },
          {
            "color": "#00FF30",
            "fromDuration": 2,
            "name": 1769446100,
            "name2": 1769446600,
            "toDuration": 10
          }
        ],
        "example2": [
          {
            "fromDuration": 3,
            "name": 1769444100,
            "name2": 1769444500,
            "toDuration": 6
          },
          {
            "fromDuration": 3,
            "name": 1769445100,
            "name2": 1769445600,
            "toDuration": 5
          },
          {
            "fromDate": 0,
            "name": 1769446100,
            "name2": 1769446600,
            "toDuration": 7
          }
        ]
      }
    },
    "meta": {
      "name": "ChronoXYChart_4"
    },
    "position": {
      "x": 123.49100000000001,
      "y": 833,
      "height": 515,
      "width": 704
    },
    "custom": {}
  }
]

image
image486×350 9.32 KB

I meant to post this when I found this, but using series[*].column.open allows you to have more control over it and does what I want, and stacking is disabled. Using skip empty time also makes it more uniform. Just add a small delta to the time so it isn’t just a pixel slice. It can also be flipped so time is on the Y-Axis, and you use categories or values.

2 Likes