XYChart Perspective - Interval X-Axis Date

Hello,

Production runs from 6am-6pm and 6pm-6am.

We are creating a xychart that shows production and a target line for the week.

Here is the data that is being pushed to the XYChart.

This looks good, but is there an easy way in ignition to sort the Date at the bottom to show 6/5/2023 06:00:00 then 6/5/2023 18:00:00 then 6/6/2023 06:00:00 using something in the xAxes?

So it looks something like

Or is there a way to manipulate the dataset to get the xAxis how we need it to be?

Thanks for any feedback.

Still have not figure out how to change the x-axes as a custom range.

Has anyone been able to solve this?

Need it to display from 6:00 -> 18:00, not 0:00->12:00.

Anyone use sql data to solve this since I am not sure this feature is built into ignition after messing around a bunch.

Thanks for any help.

I am also looking forward this issue like posting the values of x axis from 6am today to 6am next day which i couldn't able to figure it out. Let's know this solution.

You can control or restrict your dataSources data points to render it.

Here is the JSON of the example shown above. You can paste it into the view.

Example XY
[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "xAxes": [
        {
          "name": "time",
          "label": {
            "enabled": true,
            "text": "Time",
            "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": "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": "h a dd MMM"
          },
          "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": 60,
              "position": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          },
          "renderer": {
            "labels": {
              "template": {
                "wrap": true,
                "maxWidth": 80
              }
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "flow",
          "label": {
            "enabled": true,
            "text": "Flow",
            "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": "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/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": 0.5
            },
            "font": {
              "size": "",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "Flow",
          "label": {
            "text": "Flow"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "example",
            "x": "Timestamp",
            "y": "Flow"
          },
          "xAxis": "time",
          "yAxis": "flow",
          "zIndex": 0,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{valueY}[/]",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "render": "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": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {
        "example": [
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717547400000
            },
            "Flow": 1.399999976158142
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717551000000
            },
            "Flow": 1.25
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717554600000
            },
            "Flow": 1.100000023841858
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717558200000
            },
            "Flow": 1.5
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717561800000
            },
            "Flow": 2
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717565400000
            },
            "Flow": 1.7999999523162842
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717569000000
            },
            "Flow": 1.100000023841858
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717572600000
            },
            "Flow": 0.8999999761581421
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717576200000
            },
            "Flow": 0.8500000238418579
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717579800000
            },
            "Flow": 1
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717583400000
            },
            "Flow": 1
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717587000000
            },
            "Flow": 1
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717590600000
            },
            "Flow": 1
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717594200000
            },
            "Flow": 1
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717597800000
            },
            "Flow": 1
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717601400000
            },
            "Flow": 1
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717605000000
            },
            "Flow": 1.100000023841858
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717608600000
            },
            "Flow": 0.8999999761581421
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717612200000
            },
            "Flow": 0
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717615800000
            },
            "Flow": 0.20000000298023224
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717619400000
            },
            "Flow": 0.30000001192092896
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717623000000
            },
            "Flow": 0.5
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717626600000
            },
            "Flow": 0.800000011920929
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717630200000
            },
            "Flow": 1
          },
          {
            "Timestamp": {
              "$": [
                "ts",
                192,
                1718342995379
              ],
              "$ts": 1717633800000
            },
            "Flow": 1.399999976158142
          }
        ]
      }
    },
    "meta": {
      "name": "XYChart"
    },
    "position": {
      "x": -3,
      "y": 61,
      "height": 377,
      "width": 801
    },
    "custom": {}
  }
]

If you have different data, please post a few samples here so that other volunteers can help brainstorm solutions.

1 Like

Yeah this way we can do Ujwal thanks for your response. However i wish to show only the time in my x axis without date like starts with 06:00 Hrs. to 05:00 Hrs it ends. in that way. have a look at my json below

[
  {
    "upl_2": 25.7,
    "t_stamp": "06:00",
    "upl_1": 4.9,
    "target": 4.5
  },
  {
    "upl_2": 24.7,
    "t_stamp": "07:00",
    "upl_1": 5,
    "target": 4.5
  },
  {
    "upl_2": 26.6,
    "t_stamp": "08:00",
    "upl_1": 4.4,
    "target": 4.5
  },
  {
    "upl_2": 29.9,
    "t_stamp": "09:00",
    "upl_1": 5.5,
    "target": 4.5
  },
  {
    "upl_2": 34.3,
    "t_stamp": "10:00",
    "upl_1": 4.9,
    "target": 4.5
  },
  {
    "upl_2": 35.2,
    "t_stamp": "11:00",
    "upl_1": 13.5,
    "target": 4.5
  },
  {
    "upl_2": 36.1,
    "t_stamp": "12:00",
    "upl_1": 9.6,
    "target": 4.5
  },
  {
    "upl_2": 55.3,
    "t_stamp": "13:00",
    "upl_1": 4.3,
    "target": 4.5
  },
  {
    "upl_2": 45,
    "t_stamp": "14:00",
    "upl_1": 5,
    "target": 4.5
  },
  {
    "upl_2": 38.5,
    "t_stamp": "15:00",
    "upl_1": 5.4,
    "target": 4.5
  },
  {
    "upl_2": 38.2,
    "t_stamp": "16:00",
    "upl_1": 5.2,
    "target": 4.5
  },
  {
    "upl_2": 37,
    "t_stamp": "17:00",
    "upl_1": 5,
    "target": 4.5
  },
  {
    "upl_2": 35.2,
    "t_stamp": "18:00",
    "upl_1": 7.8,
    "target": 4.5
  },
  {
    "upl_2": 36.1,
    "t_stamp": "19:00",
    "upl_1": 5.3,
    "target": 4.5
  },
  {
    "upl_2": 104.8,
    "t_stamp": "20:00",
    "upl_1": 5.5,
    "target": 4.5
  },
  {
    "upl_2": 412.5,
    "t_stamp": "21:00",
    "upl_1": 4.4,
    "target": 4.5
  },
  {
    "upl_2": 145,
    "t_stamp": "22:00",
    "upl_1": 5.1,
    "target": 4.5
  },
  {
    "upl_2": 434,
    "t_stamp": "23:00",
    "upl_1": 5.1,
    "target": 4.5
  },
  {
    "upl_2": 198.6,
    "t_stamp": "00:00",
    "upl_1": 4.8,
    "target": 4.5
  },
  {
    "upl_2": 145.7,
    "t_stamp": "01:00",
    "upl_1": 5.4,
    "target": 4.5
  },
  {
    "upl_2": 130.9,
    "t_stamp": "02:00",
    "upl_1": 4.5,
    "target": 4.5
  },
  {
    "upl_2": 123.7,
    "t_stamp": "03:00",
    "upl_1": 4.7,
    "target": 4.5
  },
  {
    "upl_2": 117.8,
    "t_stamp": "04:00",
    "upl_1": 5.5,
    "target": 4.5
  },
  {
    "upl_2": 116.4,
    "t_stamp": "05:00",
    "upl_1": 4.8,
    "target": 4.5
  }
]

I see two possible solutions:

  1. Add Date reference in your t_stamp Key value:
    By including the date in the t_stamp key, the chart will correctly sort and integrate all the samples internally. Currently, your key only contains the hour, so times from the next day appear before the current day's times.
    Example:
{
  "t_stamp": "06:00 5/6/2024",
  "target": 4.5,
  "upl_1": 4.9,
  "upl_2": 25.7
}

  1. Select Render: Category
    Since the data is already sorted, another approach is to choose the render type as "category." This will utilize the existing order of your data.
1 Like

Superb. It worked. Earlier i use to have category where my aim is to show 12am to 12am but now the requirement got changed and i have made it as datetime which makes this issue. Now things were sorted out. Thanks

Can i get the solution for the following??
In my project there is an XY Chart holding 4 series of values. XY Chart has the inbuilt option of hiding the series when it is live. During that time when i want to hide some series, the maximum value of y chart is not getting updated to the visible series maximum y value instead it is holding the maximum value of all the series. How to resolve this issue?

I believe you have a common yAxes applied to all your series.
In that case, I suggest binding the yAxes[0].value.range.max to the maximum value of the visible series in your dataSources.

I have made the formula to calculate the max of max values however while designer is in run mode and if i turn off one of the visibility then none of the property turns false. everything remains true. Need to know the exact property of that graph series which controls visibility.

It seems I initially assumed you had external functions to control the series visibility. However, it appears that you are relying on the built-in legends of the chart. Unfortunately, this approach may not work since the chart doesn't provide feedback on the visibility state of the series.
To address this, you will need to implement external bindings to programmatically control the visibility of the series.

Okay will look for some external component to control the visibility of the chart. Thanks.