Title: how do I get my altair plot from views to render on my html page in Django?
Tags: python;django;altair;vega
Question: I am trying to get my Altair plot to render from my views to my html page. I have tried everything from stack overflow to get this to work, but every time I try I don't get my plot. This is my code in the different sections.
Views.py:
```def search_site(request):
    if request.method == &quot;POST&quot;:
        inputSite = request.POST.get('Site')
        SITES = Ericsson_LTE_1D_Version_Sectir_ID_HOUR.objects.filter(SITE__contains = inputSite).values()
        data = pd.DataFrame(SITES)
        chart = alt.Chart(data).mark_line().encode(
        y ='Avg_Nr_Of_RRC_Connected_Users:Q',
        x ='PERIOD_START_TIME:T',
        ).to_json(indent=None)

        
        return render(request,'VenueReporting/searchSite.html', {'site':inputSite,'Predictions':SITES,'chart':chart})
    else:
        return render(request, 'VenueReporting/searchSite.html',{})
```
HTML Page:
```<head&gt;
 <script src=&quot;https://cdn.jsdelivr.net/npm/vega@[VERSION]&quot;&gt;</script&gt;
 <script src=&quot;https://cdn.jsdelivr.net/npm/vega-lite@[VERSION]&quot;&gt;</script&gt;
 <script src=&quot;https://cdn.jsdelivr.net/npm/vega-embed@[VERSION]&quot;&gt;</script&gt;
</head&gt;
<body&gt;
  <script type=&quot;text/javascript&quot;&gt;
    var chart = &quot;{{chart}}&quot;;
    vegaEmbed('#vis1', chart).then(result =&gt; console.log(result))
  .catch(console.warn);
  </script&gt;

    {% if Predictions %}
        <h2&gt;You Searched for:</h2&gt;
        <h3&gt;{{site}}</h3&gt;
        <h2&gt;The activity was:</h2&gt;
        <div id=&quot;vis1&quot;&gt;</div&gt;
    
    {% else %}
        <h1&gt;That Venue does not exist or you put the wrong information</h1&gt;
    {% endif %}
</body&gt;
```


Here is the accepted answer: The ```chart``` variable in the javascript should not be a string, it should be a JSON object. Also, django's default behavior of escaping special charcters will result in invalid JSON. To fix this, you can use something like this (notice there are no quotes):
```var chart = {{ chart|safe }};
```
Also, in your ```<script&gt;``` tags, ```[VERSION]``` is not meant to be used literally. You should specify the versions of the libraries compatible with Altair, which you can find in ```alt.VEGA_VERSION```, ```alt.VEGAEMBED_VERSION```, and ```alt.VEGALITE_VERSION```:
``` <script src=&quot;https://cdn.jsdelivr.net/npm/vega@{{ alt.VEGA_VERSION }}&quot;&gt;</script&gt;
 <script src=&quot;https://cdn.jsdelivr.net/npm/vega-lite@{{ alt.VEGALITE_VERSION }}&quot;&gt;</script&gt;
 <script src=&quot;https://cdn.jsdelivr.net/npm/vega-embed@{{ alt.VEGAEMBED_VERSION }}&quot;&gt;</script&gt;
```
(assuming you pass ```alt``` to your template).

Comment for this answer: It's still not working. How do I pass alt to my template? Also for the JavaScript it says, "property assignment expected" as its highlighted in red.
Comment for this answer: okay i fixed the "Property assignment error" but I still am not getting a plot. I also still dont know how to pass alt to my template
Comment for this answer: okay I figured it out the problem was my javascript needed to be after my div call


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:09/02/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<python><django><altair><vega>', 'Title': 'how do I get my altair plot from views to render on my html page in Django?', 'ViewCount': 413, 'id': 69021750, 'user_AboutMe': None, 'user_AccountId': 12558686.0, 'user_DisplayName': 'Julian Romero', 'user_Reputation': 35.0, 'user_Views': 12.0, 'user_id': 9137337.0}}