The same xTrace marker on multiple time series charts

Hi

Can someone give me a solution so that if I move the mouse over the Time Series Chart above, it will appear at the same point on the Chart below? I would like to see the results on independent charts at the same time and if I put everything on the same chart the lines are not clearly visible.

Thanks for any help!

The Time Series chart component doesn't expose the position of the xTrace so there is no way to read it and there would be no way to force another chart to use it. (There probably is some obscure way by injecting Javascript into a page but it's not supported and would be a bit of a mess.)

The feature you're really looking for is to have one chart component with multiple subplots. The component supports that!

  • In Property Editor select plots.0, right-click and duplicate. You should see a subplot repeat of your original plot.
  • Edit plots.0 to include only the data you want on the first subplot.
    • Set plots.0.trends.0.series to select your data source.
    • Hit the + button on plots.0.trends.0.columns.
    • Expand plots.0.trends.0.columns.0 and set key : to the variable you want to trend.
  • Do the same with plots.1 and this time you will add a second column because you have two lines on the second subplot.

There's a little more in Perspective - Time Series Chart | Ignition User Manual. Search for 'subplots'.

Figure 1. The Time Series default chart split into two subplots. Note the common xTrace readouts.

The `plots` JSON for inspection.
[
  {
    "relativeWeight": 1,
    "trends": [
      {
        "visible": true,
        "type": "line",
        "series": "Boiler",
        "interpolation": "curveBasis",
        "breakLine": true,
        "stack": true,
        "radius": 2,
        "axis": "temperature",
        "columns": [
          {
            "key": "Temperature",
            "color": "#BE0E0E",
            "styles": {
              "normal": {
                "stroke": {
                  "color": "",
                  "width": 3,
                  "dashArray": null,
                  "opacity": null
                },
                "fill": {
                  "color": "",
                  "opacity": null
                }
              },
              "highlighted": {
                "stroke": {
                  "color": "",
                  "width": null,
                  "dashArray": null,
                  "opacity": null
                },
                "fill": {
                  "color": "",
                  "opacity": null
                }
              },
              "selected": {
                "stroke": {
                  "color": "",
                  "width": null,
                  "dashArray": null,
                  "opacity": null
                },
                "fill": {
                  "color": "",
                  "opacity": null
                }
              },
              "muted": {
                "stroke": {
                  "color": "",
                  "width": null,
                  "dashArray": null,
                  "opacity": null
                },
                "fill": {
                  "color": "",
                  "opacity": null
                }
              }
            }
          }
        ],
        "baselines": []
      }
    ],
    "axes": [
      {
        "name": "temperature",
        "min": "",
        "max": "",
        "alignment": "left",
        "width": 60,
        "label": {
          "visible": true,
          "text": "Temperature (°C)",
          "offset": 0,
          "font": {
            "color": "",
            "size": 10
          },
          "style": {
            "classes": ""
          }
        },
        "tick": {
          "color": "",
          "count": "Auto",
          "label": {
            "format": "Auto",
            "font": {
              "color": "",
              "size": 10
            },
            "style": {
              "classes": ""
            }
          },
          "style": {
            "classes": ""
          }
        },
        "grid": {
          "visible": true,
          "color": "",
          "opacity": 0.9,
          "dashArray": 0,
          "style": {
            "classes": ""
          }
        },
        "style": {
          "classes": ""
        }
      }
    ],
    "markers": []
  },
  {
    "relativeWeight": 1,
    "trends": [
      {
        "visible": true,
        "type": "line",
        "series": "Boiler",
        "interpolation": "curveBasis",
        "breakLine": true,
        "stack": true,
        "radius": 2,
        "axis": "pressure",
        "columns": [
          {
            "key": "Pressure",
            "color": "#0BAB03",
            "styles": {
              "normal": {
                "stroke": {
                  "color": "",
                  "width": 3,
                  "dashArray": null,
                  "opacity": null
                },
                "fill": {
                  "color": "",
                  "opacity": null
                }
              },
              "highlighted": {
                "stroke": {
                  "color": "",
                  "width": null,
                  "dashArray": null,
                  "opacity": null
                },
                "fill": {
                  "color": "",
                  "opacity": null
                }
              },
              "selected": {
                "stroke": {
                  "color": "",
                  "width": null,
                  "dashArray": null,
                  "opacity": null
                },
                "fill": {
                  "color": "",
                  "opacity": null
                }
              },
              "muted": {
                "stroke": {
                  "color": "",
                  "width": null,
                  "dashArray": null,
                  "opacity": null
                },
                "fill": {
                  "color": "",
                  "opacity": null
                }
              }
            }
          }
        ],
        "baselines": []
      }
    ],
    "axes": [
      {
        "name": "pressure",
        "min": "",
        "max": "",
        "alignment": "left",
        "width": 60,
        "label": {
          "visible": true,
          "text": "Pressure (bar)",
          "offset": 0,
          "font": {
            "color": "",
            "size": 10
          },
          "style": {
            "classes": ""
          }
        },
        "tick": {
          "color": "",
          "count": "Auto",
          "label": {
            "format": "Auto",
            "font": {
              "color": "",
              "size": 10
            },
            "style": {
              "classes": ""
            }
          },
          "style": {
            "classes": ""
          }
        },
        "grid": {
          "visible": true,
          "color": "",
          "opacity": 0.9,
          "dashArray": 0,
          "style": {
            "classes": ""
          }
        },
        "style": {
          "classes": ""
        }
      }
    ],
    "markers": []
  }
]

You can paste the JSON above onto your plots property of a new Time Series chart for inspection.

2 Likes