1

I'm trying to generate a Punch Card, but unlike the provided example, I'd like to use the dataset option.

Desired result: 'week' (w1 .. w5) on xAxis and stacked (a1 .. a4) on yAxis, with symbolSize relative to respective value.

punch bar

I'm currently using these options. What am I missing?

{
"tooltip": {},
"dataset": {
    "source": [
    {"week": "w1", "a1": 1, "a2": 1, "a3": 1, "a4": 0},
    {"week": "w2", "a1": 3, "a2": 5, "a3": 2, "a4": 1},
    {"week": "w3", "a1": 2, "a2": 3, "a3": 1, "a4": 4},
    {"week": "w4", "a1": 6, "a2": 1, "a3": 2, "a4": 0},
    {"week": "w5", "a1": 6, "a2": 2, "a3": 3, "a4": 0}
    ],
    "dimensions": ["week","a1","a2","a3","a4"]
},
"xAxis": {
    "type": "category"
},
"yAxis": {
    "type": "category"
},
"series": [
    {
    "type": "scatter",
    symbolSize: function (val) {
        console.log(val)
        // how to use val / filter current category? (a1..a4?)
        return 10
    },
    }
]
};

See: codepen

pax
  • 482
  • 8
  • 26

1 Answers1

0

As for the size, you can see that val is simply an object and you can do something like this:

symbolSize: function (val) {
     return val.a1 * 10
  },
rajniszp
  • 150
  • 7
  • I feel the problem is earlier in the set-up, I can access values there, is just now `val` returns all the values from that week (a1..a4), I'd need just the corresponding value respective to the yAxis. – pax Apr 26 '22 at 08:30
  • 1
    Ah okay, yes, you basically tried to create object that corresponds to multiple points. Take a look at this pen: https://codepen.io/rajniszp/pen/GRyVpNV Feel free to ask if you don't understand how it works – rajniszp Apr 27 '22 at 09:24