XY Chart Question - Production vs Target

Ignition
1

Hello there!

I want to create a view using the XY Chart component. The goal is to have a selectable time frame (weekly, monthly, yearly, etc.) and retrieve the production and target values for the machines within that time frame. I would like to display the information as shown below, with the filled columns representing production and the orange line representing the target for comparison.

image
image948×503 4.46 KB

I dynamically create the series for the chart based on the selected time frame and the data returned. The series reference production values on the Y-axis and the time frame on the X-axis. However, I haven't been able to properly add the target values for each machine. I can add the target value and change its representation showing it as a line instead of a filled column, but I lose consistency because the target for a specific machine does not align correctly with that machine’s production data.

If anyone has experience with the XY Chart , could you please help me? Thank you!

2

Little update: this is as far as I got:

image
image829×238 5.44 KB

But I can't get the step lines to center over their corresponding machine's column...

3

You've tagged the question as perspective but the post says the chart is in a report and that would be related to reporting instead. Can you clarify? (The Perspective and Reporting modules are not related.)

4

Oh sorry, I'm working with Ignition Perspective, I think maybe I should use "view" instead of report. I didn't know there is another module regarding Reports...

5

That's fine. Just edit your original post and change 'report' to 'view' to avoid confusion.

I think you might get a more meaningful infographic if you just add a dot or bar above each bar to represent the target. A line represents a trend but you're not trying to show a trend.

If you're still in bother then copy and paste the chart (from the Project Browser) in here and format it as shown in Wiki - how to post code on this forum. If your data comes from a binding then we'll need you to post the data too in the same manner (but from the Perspective Property Editor).

2 Likes
6

I wasn't able to paste the chart from the project browser because it's too large and causes an error when trying to post it.:disappointed_face: But here is my dataSources entry:

{
  "example": [
    {
      "timePeriod": "2025-01",
      "Machine 1 Production": 120,
      "Machine 1 Target": 160,
      "Machine 2 Production": 80,
      "Machine 2 Target": 100
    }
  ]
}

What I do is create a serie for each value (production and target) and each machine:

[
  {
    "name": "Machine Production 1",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "example",
      "x": "timePeriod",
      "y": "Machine 1 Production"
    },
    "xAxis": "x",
    "yAxis": "y",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "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": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "#DCDEE0",
          "opacity": 1
        },
        "stroke": {
          "color": "",
          "opacity": 1,
          "width": 0
        },
        "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": ""
            }
          }
        ]
      }
    }
  },
  {
    "name": "Machine 2 Production",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "example",
      "x": "timePeriod",
      "y": "Machine 2 Production"
    },
    "xAxis": "x",
    "yAxis": "y",
    "zIndex": 0,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "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": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "",
          "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": ""
            }
          }
        ]
      }
    }
  },
  {
    "name": "Machine 1 Target",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "example",
      "x": "timePeriod",
      "y": "Machine 1 Target"
    },
    "xAxis": "x",
    "yAxis": "y",
    "zIndex": 5,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "step line",
    "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": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "",
          "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": ""
            }
          }
        ]
      }
    }
  },
  {
    "name": "Machine 2 Target",
    "label": {
      "text": ""
    },
    "visible": true,
    "hiddenInLegend": false,
    "defaultState": {
      "visible": true
    },
    "data": {
      "source": "example",
      "x": "timePeriod",
      "y": "Machine 2 Target"
    },
    "xAxis": "x",
    "yAxis": "y",
    "zIndex": 5,
    "tooltip": {
      "enabled": true,
      "text": "{name}: [bold]{valueY}[/]",
      "cornerRadius": 3,
      "pointerLength": 4,
      "background": {
        "color": "",
        "opacity": 1
      }
    },
    "render": "step line",
    "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": "",
        "y": ""
      },
      "appearance": {
        "fill": {
          "color": "",
          "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": ""
            }
          }
        ]
      }
    }
  }
]

But this way I can't "group" the target by timeframe and machine on the X-axis. As a result, it becomes visually unclear which target (the step lines) corresponds to which machine (the filled columns)

image
image1020×184 12.3 KB

I hope I attached everything correctly. Any help would be appreciated. Thanks!

7

I'll have a look.
You still haven't fixed your first post as requested.

8

My bad — I only edited the title of the post. Now everything is updated. :+1:
And thank you again for your help.

9

Would this do the trick? (It's simple.)

XY Chart with targets
XY Chart with targets636×425 14.8 KB

To create that you would have to

  • modify your data source to give the shortfall value rather than the target.
  • Set every second series as stacked.
  • I added an additional copy of one of the series with opacity : 0 to open up a gap between categories.

It doesn't work nicely for negative shortfalls (if production exceeds target).

10

appreciate your help! Your idea is going to work for my case. Thank you!