Perspective XY Chart and using two value Axis

Ignition
1

I have looked at this topic which had a similar problem but not really addressed my issue.

What I am trying to accomplish is what I have already done so in Vision, but in perspective the X,Y chart will not allow two value fields and so I have to select category. The problem with category is that it will bunch up the data and not show it in the correct position.

Vision:

image
image1346×246 16.9 KB

Perspective so far:

image
image2200×439 27.3 KB

So as you can see, the spread of the data is not showing correctly so at a glace the operator thinks the range is good.

[
  {
    "type": "ia.chart.xy",
    "version": 0,
    "props": {
      "title": {
        "appearance": {
          "font": {
            "size": "0px"
          }
        }
      },
      "subtitle": {
        "appearance": {
          "font": {
            "size": "0px"
          }
        }
      },
      "legend": {
        "enabled": false,
        "position": "absolute",
        "markers": {
          "stroke": {
            "opacity": 1
          }
        },
        "labels": {
          "font": {
            "weight": 600,
            "size": "14px",
            "color": "#040000"
          }
        }
      },
      "scrollBars": {
        "horizontal": {
          "enabled": false
        },
        "vertical": {
          "enabled": false
        }
      },
      "background": {
        "opacity": 0
      },
      "xAxes": [
        {
          "name": "Temp",
          "label": {
            "enabled": false,
            "text": "Temp Initial",
            "color": ""
          },
          "visible": true,
          "tooltip": {
            "enabled": true,
            "text": "",
            "cornerRadius": 3,
            "pointerLength": 4,
            "background": {
              "color": "",
              "opacity": 1
            }
          },
          "inversed": false,
          "render": "category",
          "category": {
            "break": {
              "enabled": false,
              "startCategory": 0,
              "endCategory": 0,
              "size": 0.1
            }
          },
          "date": {
            "baseInterval": {
              "enabled": false,
              "timeUnit": "minute",
              "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"
          },
          "value": {
            "range": {
              "max": 60,
              "min": 20,
              "useStrict": false
            },
            "logarithmic": false,
            "break": {
              "enabled": false,
              "startValue": 0,
              "endValue": 100,
              "size": 0.05
            },
            "format": "##.##"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "#010000",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "#0B000021",
              "opacity": 0.5,
              "dashArray": "",
              "minDistance": 50,
              "position": 0.001
            },
            "font": {
              "size": "11px",
              "weight": 500
            }
          }
        }
      ],
      "yAxes": [
        {
          "name": "Count",
          "label": {
            "enabled": false,
            "text": "Count",
            "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": 0,
              "size": 0.05
            },
            "format": "#,###"
          },
          "appearance": {
            "opposite": false,
            "inside": false,
            "labels": {
              "color": "#000000",
              "opacity": 1,
              "rotation": 0,
              "verticalCenter": "middle",
              "horizontalCenter": "middle"
            },
            "grid": {
              "color": "#787869",
              "opacity": 0.3,
              "dashArray": 0,
              "minDistance": 50,
              "position": 0.5
            },
            "font": {
              "size": "11px",
              "weight": 500
            }
          }
        }
      ],
      "series": [
        {
          "name": "Initial Pass",
          "label": {
            "text": "Initial Pass"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "InitialPass",
            "x": "Temp",
            "y": "IntitialPass"
          },
          "xAxis": "Temp",
          "yAxis": "Count",
          "zIndex": 1,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{categoryX} ({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": 0,
              "y": 0
            },
            "appearance": {
              "fill": {
                "color": "#337D1E",
                "opacity": 1
              },
              "stroke": {
                "color": "#EBEBEB",
                "opacity": 1,
                "width": 1
              },
              "stacked": true,
              "width": 60,
              "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": "Initial Fail",
          "label": {
            "text": "Initial Fail"
          },
          "visible": true,
          "hiddenInLegend": false,
          "defaultState": {
            "visible": true
          },
          "data": {
            "source": "InitialFail",
            "x": "Temp",
            "y": "IntitialPass"
          },
          "xAxis": "Temp",
          "yAxis": "Count",
          "zIndex": 1,
          "tooltip": {
            "enabled": true,
            "text": "{name}: [bold]{categoryX} ({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": 0,
              "y": 0
            },
            "appearance": {
              "fill": {
                "color": "#7D1E20",
                "opacity": 1
              },
              "stroke": {
                "color": "#EBEBEB",
                "opacity": 1,
                "width": 1
              },
              "width": 60,
              "height": null,
              "stacked": true,
              "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": {
                "color": "",
                "opacity": 0
              },
              "bullets": [
                {
                  "enabled": false,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "width": 1,
                    "opacity": 1
                  },
                  "rotation": 0,
                  "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": {
                "color": "",
                "opacity": 0
              },
              "bullets": [
                {
                  "enabled": true,
                  "render": "circle",
                  "width": 10,
                  "height": 10,
                  "label": {
                    "text": "{value}",
                    "position": {
                      "dx": 0,
                      "dy": 0
                    }
                  },
                  "tooltip": {
                    "enabled": true,
                    "text": "{name}: [bold]{valueY}[/]",
                    "cornerRadius": 3,
                    "pointerLength": 4,
                    "background": {
                      "color": "",
                      "opacity": 1
                    }
                  },
                  "fill": {
                    "color": "",
                    "opacity": 1
                  },
                  "stroke": {
                    "color": "",
                    "width": 1,
                    "opacity": 1
                  },
                  "rotation": 0,
                  "deriveFieldsFromData": {
                    "fill": {
                      "color": "",
                      "opacity": ""
                    },
                    "stroke": {
                      "color": "",
                      "opacity": "",
                      "width": ""
                    },
                    "rotation": ""
                  },
                  "heatRules": {
                    "enabled": false,
                    "max": 100,
                    "min": 2,
                    "dataField": ""
                  }
                }
              ]
            }
          }
        }
      ],
      "dataSources": {}
    },
    "meta": {
      "name": "XYChart_0"
    },
    "position": {
      "x": 427,
      "y": 316.5,
      "height": 344,
      "width": 597
    },
    "custom": {},
    "propConfig": {
      "props.dataSources.FinalFail": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "direct",
            "publishInitial": false,
            "tagPath": "[Mix Line 1]RunScreen/mixtemp/mixTempFinalFail"
          },
          "type": "tag"
        }
      },
      "props.dataSources.FinalPass": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "direct",
            "publishInitial": false,
            "tagPath": "[Mix Line 1]RunScreen/mixtemp/mixTempFinalPass"
          },
          "type": "tag"
        }
      },
      "props.dataSources.InitialFail": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "direct",
            "publishInitial": false,
            "tagPath": "[Mix Line 1]RunScreen/mixtemp/mixTempInitialFail"
          },
          "type": "tag"
        }
      },
      "props.dataSources.InitialPass": {
        "binding": {
          "config": {
            "fallbackDelay": 2.5,
            "mode": "direct",
            "publishInitial": false,
            "tagPath": "[Mix Line 1]RunScreen/mixtemp/mixTempInitialPass"
          },
          "type": "tag"
        }
      }
    }
  }
]

"#NAMES"
"Temp","IntitialPass"
"#TYPES"
"D","L"
"#ROWS","38"
"34.0","1"
"35.4","1"
"35.9","1"
"36.1","1"
"36.5","2"
"36.6","1"
"36.7","2"
"36.8","3"
"36.9","1"
"37.1","3"
"37.2","2"
"37.3","1"
"37.4","4"
"37.5","4"
"37.6","4"
"37.8","6"
"37.9","2"
"38.0","6"
"38.1","1"
"38.2","3"
"38.3","3"
"38.4","4"
"38.5","2"
"38.6","3"
"38.7","6"
"38.8","3"
"38.9","3"
"39.0","2"
"39.2","2"
"39.3","1"
"39.4","2"
"39.5","3"
"39.6","2"
"39.7","1"
"39.8","1"
"40.1","3"
"40.4","1"
"40.5","1"
2

Post the chart JSON and the data (which won't be included in the chart JSON if it is the result of a binding). Please see Wiki - how to post code on this forum.

Tips: change the title tags to Ignition (rather than General Discussion) and remove the Vision tag as your question is looking for a Perspective solution.

3

I did not add vision to the tag. It was done automatically obviously.

4

I ended up solving my problems by using the ApexCharts 3rd party module.
Perspective charts suck full stop at this current stage of Ignition's life.

There is also this new module Embr Charts.Js which could be better ( I don't know, haven't tried it).

5

I appreciate you taking the time to report back. I will have a look at them. Very surprised there is no workaround here though.

6

I found the same problem. I suspect that rendering value / value data as a column is not expected / supported. I had a look in the AM Charts documentation but couldn't find an example of what you're looking for. (The XY-Chart is based on a third-party component.)

You may be able to do what you want with ApexChart. See KyvisLabs ApexChart Module - #70 by jd1.

Tips:

  • You're missing the leading [ on your chart JSON. (Presumably that's a pasting error.)
  • You should post the InitialFail dataset as well. It's required for anyone trying to reproduce your chart.
7

It was actually there in the raw text just needed to go on the next line.
The other data is all zero values and a repeat format of what I have. I have downloaded a couple fo the new charting modules and I will see what they can do.

8

Maybe I’m missing your goal, but for this type of chart you should really be binning your data when you query.

Specify a bin size (like 0.2° or 0.5°), count all readings in those groups, then give that data to your chart.

The key part is to have a count of 0 for groups without values.

9

I agree. An XY-Chart in column mode won't work well if the column width > minimum X interval.

10

That is a clunky way of doing it. A graph should be able to auto range so its linear.

11

Bar graphs with real axes don’t naturally make sense.

A real axis (whether it’s linear, logarithmic, time, or something else) represents an infinite number of possible values, while a bar graph displays values for a category.

If you want to use a subset of a real axis as your categories (i.e. all numbers between 30 and 40 in increments of 0.1) you’re going to have to do that mapping yourself.

1 Like
12

That is not correct sorry, bar graphs with time work fine which is the exact thing thing. My point is Value is not working as it should be. In Vision it works great. So if it didn't make sense it would be broken in vision too, and time would not work in perspective.

Zero difference from time and a value other then what you call it.

I do appreciate the comments, but they are not really helpful saying it is the way it should be. If its broken then that is fine I will work around it. But it should be able to work this way.