CODEWITHSUNDEEP
djangopython-3.xhighcharts
Barthélemy Lancelot
Barthélemy Lancelot

Reputation: 41

Why do I have the issue 'property assigment expected' when I want to display a chart on my web page using highcharts

I have an issue when I want to display a chart on my web page using django and highcharts. This is my detail.html file.

I have an error called property assignment expected on the side of my curly brackets here : 

_dateList={{dateList|safe}};
_price={{price.room.actual_rate.amount}};
_availability={{availability}};

Here is the all file

<h1>{{property.name}}</h1>
<h2>{{roomtype.name}}</h2>

<div id="container"></div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>



<script>
_dateList={{dateList|safe}};
_price={{price.room.actual_rate.amount}};
_availability={{availability}};

Highcharts.chart('container', {

    title: {
        text: 'Pricing model prevision'
    },

    xAxis: {
        categories: _dateList
    },
    yAxis: [{
        title: {
            text: 'Price',
            style: {
                color: Highcharts.getOptions().colors[2]
            }

        },
        labels: {
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        }

    }, {
        title:{
            text:'Occupancy',
            style:{
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels:{
            style:{
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }],
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'price',
        data: _price
    }, {
        name: 'availabilty',
        data: _availability
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});
</script>

<ul>
    {% for day in dayList %}
        {% if day.availability.room %}
            <li>{{day.date}}:{{day.allotment}}:{{day.pricing.room.actual_rate.amount}} </li>
        {% else %}
            <li>{{day.date}}:0 </li>
        {% endif %}
    {% endfor %}
</ul>

Can you help me with this issue? thank you for your help, Best

Upvotes: 3

Views: 1188

Answers (2)

Ces
Ces

Reputation: 138

I doubt that you are still looking for a solution but I have struggled with this too and the solution has been given to me on my own question, so if you want it it is here. I reference it here so that you can see the person who answered this but here is the solution :

instead of :

const jsArrayOfItems = {{ content|tojson }};

use :

const jsArrayOfItems = JSON.parse('{{ content|tojson|safe }}');

Hope it will help if someone is stuck on this too.

Upvotes: 0

pypie
pypie

Reputation: 71

If you add quotation marks, as shown below, it should work:

_dateList='{{dateList|safe}}';

Without quotation marks, it is interpreted as a variable. With quotation marks, it is interpreted as a string.

Upvotes: 1

Related Questions