Adding major and minor ticks to y-axis for Time Series and Power Chart Component

Ignition
1

Hello,

I'm currently am using a time series chart and binding it to a query to display data vs time.

On my y axis where my data is located I am trying to adjust the increments of the ticks. In the attached image I am working with small values so I would like the increments to be adjusted, to better show the line graph. I believe the issue lies with the increments between the min and max values so changing those could better help my goals.

Is there a property to help with this? I have adjusted the min max properties on axes and also ticks under plots settings. It seems to have not solved my issue.

image
image1479×757 38.9 KB

Thank You

2

Have you created a trend under props.plots[0].trends? Selecting the series and axis under the trend is required for props.plots[0].axes[0].tick.count to have an affect on the y-axis ticks

1 Like
3

I have tried that, I actually am using a power chart for this now and it has the same issue. The y axis seems to have no options to adjust the major and minor tick values.

4

It works for me on both. For the Power Chart, add an axis, set the tick count to whatever you need, and point the pens axis to it. Here is a view you can shift-right click and paste to see that I have both charts showing 20 ticks on the y-axis.

You will probably need to change the historical tag path on the Power Chart

Chart View 
{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "TimeSeriesChart"
        },
        "position": {
          "basis": "400px"
        },
        "props": {
          "plots": [
            {
              "axes": [
                {
                  "alignment": "left",
                  "label": {
                    "font": {
                      "color": "",
                      "size": 10
                    },
                    "offset": 0,
                    "style": {
                      "classes": ""
                    },
                    "text": "",
                    "visible": true
                  },
                  "max": "",
                  "min": "",
                  "name": "Axis1",
                  "style": {
                    "classes": ""
                  },
                  "tick": {
                    "color": "",
                    "count": 20,
                    "label": {
                      "font": {
                        "color": "",
                        "size": 10
                      },
                      "format": "Auto",
                      "style": {
                        "classes": ""
                      }
                    },
                    "style": {
                      "classes": ""
                    }
                  },
                  "width": 60
                }
              ],
              "markers": [],
              "trends": [
                {
                  "axis": "Axis1",
                  "baselines": [],
                  "breakLine": true,
                  "columns": [],
                  "interpolation": "curveLinear",
                  "radius": 2,
                  "series": "Boiler",
                  "stack": true,
                  "type": "line",
                  "visible": true
                }
              ]
            }
          ],
          "series": [
            {
              "data": [
                {
                  "Pressure": 12,
                  "Temperature": 52,
                  "time": 1560469431423
                },
                {
                  "Pressure": 42,
                  "Temperature": 18,
                  "time": 1560469432423
                },
                {
                  "Pressure": 81,
                  "Temperature": 26,
                  "time": 1560469433423
                },
                {
                  "Pressure": 11,
                  "Temperature": 63,
                  "time": 1560469434423
                },
                {
                  "Pressure": 23,
                  "Temperature": 65,
                  "time": 1560469435423
                },
                {
                  "Pressure": 43,
                  "Temperature": 12,
                  "time": 1560469436423
                },
                {
                  "Pressure": 71,
                  "Temperature": 61,
                  "time": 1560469437423
                },
                {
                  "Pressure": 89,
                  "Temperature": 60,
                  "time": 1560469438423
                },
                {
                  "Pressure": 66,
                  "Temperature": 58,
                  "time": 1560469439423
                },
                {
                  "Pressure": 33,
                  "Temperature": 1,
                  "time": 1560469440423
                }
              ],
              "name": "Boiler"
            }
          ]
        },
        "type": "ia.chart.timeseries"
      },
      {
        "meta": {
          "name": "PowerChart"
        },
        "position": {
          "basis": "600px"
        },
        "props": {
          "axes": [
            {
              "color": "#757A7F",
              "dataFormat": "0,0.##",
              "label": {
                "font": {
                  "color": "#757A7F",
                  "size": 10
                },
                "offset": 0,
                "style": {
                  "classes": ""
                },
                "text": ""
              },
              "name": "Axis1",
              "position": "left",
              "range": {
                "auto": true,
                "max": "",
                "min": ""
              },
              "style": {
                "classes": ""
              },
              "tick": {
                "color": "#757A7F",
                "count": 20,
                "label": {
                  "font": {
                    "color": "#757A7F",
                    "size": 10
                  },
                  "format": "Auto",
                  "style": {
                    "classes": ""
                  }
                },
                "style": {
                  "classes": ""
                }
              },
              "width": 60
            }
          ],
          "config": {
            "rangeEndDate": {
              "$": [
                "ts",
                0,
                1719490809878
              ],
              "$ts": 1719490713703
            },
            "rangeStartDate": {
              "$": [
                "ts",
                0,
                1719490809878
              ],
              "$ts": 1719462009703
            }
          },
          "interaction": {
            "chartZoomLevel": 1,
            "rangeZoomLevel": 1
          },
          "pens": [
            {
              "axis": "Axis1",
              "data": {
                "aggregateMode": "default",
                "source": "histprov:history:/drv:ignition-usws3079:system:/tag:gateway/performance/cpu usage"
              },
              "display": {
                "breakLine": true,
                "interpolation": "curveLinear",
                "radius": 3,
                "styles": {
                  "highlighted": {
                    "fill": {
                      "color": "#63BEA2",
                      "opacity": 1
                    },
                    "stroke": {
                      "color": "#63BEA2",
                      "dashArray": 0,
                      "opacity": 1,
                      "width": 1
                    }
                  },
                  "muted": {
                    "fill": {
                      "color": "#63BEA2",
                      "opacity": 0.4
                    },
                    "stroke": {
                      "color": "#63BEA2",
                      "dashArray": 0,
                      "opacity": 0.4,
                      "width": 1
                    }
                  },
                  "normal": {
                    "fill": {
                      "color": "#63BEA2",
                      "opacity": 0.8
                    },
                    "stroke": {
                      "color": "#63BEA2",
                      "dashArray": 0,
                      "opacity": 0.8,
                      "width": 1
                    }
                  },
                  "selected": {
                    "fill": {
                      "color": "#63BEA2",
                      "opacity": 1
                    },
                    "stroke": {
                      "color": "#63BEA2",
                      "dashArray": 0,
                      "opacity": 1,
                      "width": 1
                    }
                  }
                },
                "type": "line"
              },
              "enabled": true,
              "name": "cpu usage",
              "plot": 0,
              "selectable": true,
              "visible": true
            }
          ]
        },
        "type": "ia.chart.powerchart"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}
5

I did change the tick count settings and play with axis props making it different values. Still no change in the y axis increments. It seems the only options is changing the min and max value and then the chart will automatically adjust the major and minor ticks.

6

Did you try pasting that view into a project?

image
image276×713 27 KB

1 Like
7

I did attempt, but I failed. I'm fairly new to ignition. Do I copy your code and paste into the project browser in the root container?

8

It's pretty straight forward to do

  • Create a new view to paste the JSON into
  • Copy the View JSON from above. You can use the button in the upper right after you expand it
  • Hold Shift and right-click on the top level of the view and select Paste JSON
    image
    image413×562 28.4 KB
1 Like
9

I used the view and adjusted the tags and I am getting the same issue. The distribution of the major ticks is like 4.2*10^-8, 130, 170, ... 800

Maybe it is because the wide range of values from 4.2*10^-8 to about 800?

I am still searching for a major tick value property, so that I can force the axis to change instead of automatically changing. Tick count only changes the number of ticks.

Thank you for the help

image
image173×565 5.43 KB

10

I would think that a combination of these settings will get what you're wanting on the Power Chart.

props.axes[0].range.min (Uncheck Auto to see these 2)
props.axes[0].range.max
props.axes[0].tick.count

1 Like
11

I did adjust those and it still gives the same outcome.

12

Is anything changing when you adjust them?
What does it currently look like, and what do you want it to look like?

1 Like
13

They do change a bit, the graph moves and is bit more centered but, I am trying centralize a lot of data in the middle of the chart. Also show the extreme min and max values. I also think the major ticks needs be adjusted. I'm going investigate more on this.

Thank You