# Embedding vega charts

**URL:** <https://support.prodi.gy/t/embedding-vega-charts/4105>\
**Category:** Uncategorized\
**Tags:** usage, custom, front-end, third-party\
**Created:** [April 5, 2021, 7:13pm UTC](https://support.prodi.gy/t/embedding-vega-charts/4105 "2021-04-05T19:13:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arnault](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/arnault/32/4257_2.png) [@Arnault](https://support.prodi.gy/u/Arnault)\
**Post date:** [April 5, 2021, 7:13pm UTC](https://support.prodi.gy/t/embedding-vega-charts/4105/1 "2021-04-05T19:13:49Z")

</div>

Hi,

I am trying to embed vega chart in an html template to display them.  
The chart won't display and the card stay blank.

I am using this as a minimal template and using a dummy stream.

```html
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
  <div id="graph-vega"></div>
  <script type="text/javascript">
  var vega_spec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "config": {
        "view": {
          "continuousHeight": 300,
          "continuousWidth": 400
        }
      },
      "data": {
        "url": "https://vega.github.io/vega-datasets/data/cars.json"
      },
      "encoding": {
        "color": {
          "field": "Origin",
          "type": "nominal"
        },
        "x": {
          "field": "Horsepower",
          "type": "quantitative"
        },
        "y": {
          "field": "Miles_per_Gallon",
          "type": "quantitative"
        }
      },
      "mark": "point"
    };
    var options = {"renderer": "canvas", "actions": false};
    vegaEmbed("#graph-vega", vega_spec, options);
  </script>

```

I am not really clear on how to add news sources to the page (like vega dependencies), I am not clear on how to execute a function at every new element to create the chart.  
I couldn't find an exemple

Thanks a lot for your insights,

---

<div class="post-metadata">

**Author:** ![ines](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/ines/32/3_2.png) [@ines](https://support.prodi.gy/u/ines)\
**Post date:** [April 6, 2021, 1:53am UTC](https://support.prodi.gy/t/embedding-vega-charts/4105/2 "2021-04-06T01:53:46Z")

</div>

Hi! I'm not super familiar with Vega specifically, but there are basically 2 things to consider when embedding content with third-party JavaScript libraries: the main scripts need to be available globally, so one way to do this is to embed the files in the `static/index.html` within your Prodigy installation. Then, whenever a new task is available, your function will have to re-run to render the graph. Prodigy fires the custom event `prodigyupdate` that you can listen to and use to re-render your chart. You also have acccess to the current task JSON via `window.prodigy.content`, so you can stream in the JSON representation of your chart, and then render that whenever the task updates.

Here's an example of including a charting library that works in a similar way:

> [@Import HTML Template And React](https://support.prodi.gy/t/import-html-template-and-react/803/7):
>
> Nevermind!! you had it in the link above slight_smile So, here is what I did. I wanted to display a radar chart along with the a table, so here is the js incase anyone else wants to know: function displayRadar(){ var ctx = document.getElementById('radarChart').getContext('2d'); var rdata = window.prodigy.content.radar var myRadarChart = new Chart(ctx, { type: 'radar', data: rdata }); } document.addEventListener('prodigymount', event =\> { displayRadar(…

That said, how important is it for you that the visualization re-renders on the fly and/or is interactive? Depending on what you're doing, it might be easier to use a Python library like [`altair`](https://altair-viz.github.io/) in your Prodigy recipe and have it generate an SVG of your chart for each incoming example. You can then render it using the `html` UI. An advantage of this approach is that you can store the whole graphic with your data in a pretty lightweight way and you'll always be able to reproduce exactly what the annotator saw, without requiring any libraries for rendering.

---

<div class="post-metadata">

**Author:** ![Arnault](https://sea2.discourse-cdn.com/flex020/user_avatar/support.prodi.gy/arnault/32/4257_2.png) [@Arnault](https://support.prodi.gy/u/Arnault)\
**Post date:** [April 6, 2021, 9:54am UTC](https://support.prodi.gy/t/embedding-vega-charts/4105/3 "2021-04-06T09:54:38Z")

</div>

Thanks a lot Ines.

It's a nice example.  
For other people looking into it, I could not find a documentation on the `static/index.html` but I ran into this comment which explains it all : [https://support.prodi.gy/t/removing-meta-div-from-display-and-custom-css/1028/6](https://support.prodi.gy/t/removing-meta-div-from-display-and-custom-css/1028/6) .

Fair question about just sending an svg or an image data. That's what I am currently doing and using altair. So you bullseyed it. 😛

In a more complete version, I want my users to be able to browse the chart, interact with some specifics dots and probably select those and add them the answer.