XY Chart rotate 90 degrees

Ignition
1

I found the following chart useful for some of the cases, it looks like XY chart clock wise rotated 90degree.

I couldn't get it configured using XY chart, maybe I didn't do it correct or XY chart just cannot do it, it's some other chart perspective does not have.

Any suggestions?

image
image1140×560 81.9 KB

2

No, that describes rotating the whole image. You are describing a horizontal bar chart.

  1. Drop an XY Chart into your view.
  2. Under props.dataSources create an array sampleData. Paste the following into props.dataSources.sampleData.
[
  {
    "fruit": "apples",
    "boxes": 17
  },
  {
    "fruit": "oranges",
    "boxes": 11
  },
  {
    "fruit": "bananas",
    "boxes": 14
  },
  {
    "fruit": "mango",
    "boxes": 5
  }
]
  1. Make the following changes:
  • Delete yAxes.1. (You only need one y-axis, yAxes.0.)
  • Delete series.1. (You only have one series of data, series.0.)
  • xAxes.0.name : cat. (Short for category. Name as you wish.)
  • xAxes.0.label.text : Boxes (x-axis units).
  • xAxes.0.render : value. (Bars will be proportional to value, not date or category.)
  • yAxes.0.name : fruit. (Name as you wish.)
  • yAxis.0.label.text : Fruits (text that will appear below the chart).
  • yAxes.0.render : category. (The y-axis category will be the name of the fruit.)
  • series.0.name : fruits (or whatever you like).
  • series.0.data.source : sampleData (created in step 2).
  • series.0.data.x : boxes (the field name in sampleData to be rendered on the x-axis).
  • series.0.data.y : fruit (the field name in sampleData to be rendered on the y-axis).
  • series.0.xAxis : cat (defined above).
  • series.0.yAxis : fruit (defined above).
  • series.0.render : column (the magic part).
    You should now have a horizontal bar chart.
    If some of the labels are missing on the y-axis (typically every second one) then,
  • yAxes.0.appearance.grid.minDistance : 1 (should make every label appear).

XY chart horizontal bar
XY chart horizontal bar792×269 10.4 KB

I really recommend that you do this exercise and then try to create your own chart. Make sure your data is correct and sensibly named.
You can also delete dataSources.example as you won't be using it.

2 Likes
3

image

How hot is it today ?
Bananas !

5 Likes
4

Much Appreciated.

I missed out the following setting:

  • yAxes.0.render : category. (The y-axis category will be the name of the fruit.)

I have to say:
You are only limited by your imagination in Ignition.

1 Like