Vega-lite graph generated from view API is getting cut off

[ujamshed]

Hi,

I have created vega-lite graphs using the view API. My general procedure is to pull data from a database and place it into a JSON array and then feed the array to the vega view api to push to my graph and construct it. It works as desired, however parts of my graph get cut of, or I simply get a really truncated graph, which is not the case for when I pull the graph data from a csv or json file locally. I have attempted a couple things, but nothing is working and the graphs are arbitrarily cut. I attempted to place the actual json below in the array section of the "view.insert" code below but it did not work either, I still get a truncated graph. The only way right now to get the full graph is to use data from a csv locally. I am kind of lost as to what to do or why this is happening.

{"Sex":"Male","PAC type":"Parent","Total":"0"},{"Sex":"Male","PAC type":"Alkylated","Total":"46"},{"Sex":"Female","PAC type":"Parent","Total":"0"},{"Sex":"Female","PAC type":"Alkylated","Total":"52"},{"Sex":"Male","PAC type":"Parent","Total":"0"},{"Sex":"Male","PAC type":"Alkylated","Total":"52"},{"Sex":"Male","PAC type":"Parent","Total":"0"},{"Sex":"Male","PAC type":"Alkylated","Total":"56"},{"Sex":"Male","PAC type":"Parent","Total":"0"},{"Sex":"Male","PAC type":"Alkylated","Total":"101"},{"Sex":"Female","PAC type":"Parent","Total":"0"},{"Sex":"Female","PAC type":"Alkylated","Total":"107"},{"Sex":"Male","PAC type":"Parent","Total":"0"},{"Sex":"Male","PAC type":"Alkylated","Total":"133"},{"Sex":"Female","PAC type":"Parent","Total":"0"},{"Sex":"Female","PAC type":"Alkylated","Total":"228"},{"Sex":"Unknown","PAC type":"Parent","Total":"0"},{"Sex":"Unknown","PAC type":"Alkylated","Total":"253"},{"Sex":"Female","PAC type":"Parent","Total":"0"},{"Sex":"Female","PAC type":"Alkylated","Total":"785"},{"Sex":"Male","PAC type":"Parent","Total":"0"},{"Sex":"Male","PAC type":"Alkylated","Total":"2784"},{"Sex":"Male","PAC type":"Parent","Total":"3"},{"Sex":"Male","PAC type":"Alkylated","Total":"480"},{"Sex":"Female","PAC type":"Parent","Total":"4"},{"Sex":"Female","PAC type":"Alkylated","Total":"132"},{"Sex":"Male","PAC type":"Parent","Total":"6"},{"Sex":"Male","PAC type":"Alkylated","Total":"176"},{"Sex":"Female","PAC type":"Parent","Total":"27"},{"Sex":"Female","PAC type":"Alkylated","Total":"1158"},{"Sex":"Male","PAC type":"Parent","Total":"64"},{"Sex":"Male","PAC type":"Alkylated","Total":"252"},{"Sex":"Male","PAC type":"Parent","Total":"185"},{"Sex":"Male","PAC type":"Alkylated","Total":"16"},{"Sex":"Female","PAC type":"Parent","Total":"373"},{"Sex":"Female","PAC type":"Alkylated","Total":"4293"},{"Sex":"Female","PAC type":"Parent","Total":"497"},{"Sex":"Female","PAC type":"Alkylated","Total":"22"},{"Sex":"Female","PAC type":"Parent","Total":"1933"},{"Sex":"Female","PAC type":"Alkylated","Total":"1163"}

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "width": 400,
  "height": 400,
  "data": {"name": "pacData"},
  "mark": "bar",
  "encoding": {
    "column": {
      "field": "PAC type", "type": "nominal", "spacing": 10
    },
    "y": {
      "aggregate": "average",
      "field": "Total",
      "title": "Total",
      "axis": {"grid": false}
    },
    "x": {
      "field": "Sex",
      "axis": {"title": "Sex"}
    },
    "color": {
      "field": "Sex",
      "scale": {"range": ["#7a003c", "#FFCC66", "#5b6770"]}
    },
      "tooltip": [
      {"field": "Sex", "type": "nominal"},
      {"field": "PAC type", "type": "nominal"},
      {"field": "Total", "type": "quantitative"},
    ]
  },
  "config": {
    "view": {"stroke": "transparent"},
    "axis": {"domainWidth": 1}
  }
}

The script to push the above array to the graph.

vegaEmbed('#PAC-graph', PAC, opt).then(res => res.view.insert('pacData', <?php echo($PAC_data2);?>).run());

Below is a picture of the graphs. The top one is created by data fetched from the DB and pushed via the view API, while the bottom one is created by using a csv or json locally.

[domoritz]

Odd. Can you try passing numbers as numbers to the view api (not quoted)?

[ujamshed]

I copy pasted the JSON as is into the array section and the result is the same. I have other graphs as well, and they are truncated differently, some just lose the x and y-axis labels while the one in the picture loses pretty much everything except 1 bar.

[domoritz]

If you miss the labels, you might need to call .resize on the view after you insert data. It's to recalculate padding.

[ujamshed]

That works! Thank you!

[domoritz]

You can also set autosize.resize to true. See https://vega.github.io/vega-lite/docs/size.html#autosize. We should document more explicitly that resize is false and how to trigger a resize event.

[domoritz]

Done in #7097