{% load otree static %}


    <br><br>
    <hr>
    <br>
    {% if display_time_series %}
    <div id="container" style="min-width: 310px; height: 350px; max-width: 800px; margin: 0 auto"></div>
    {% endif %}
    <script src="https://code.highcharts.com/highcharts.js" ></script>
    <script src="https://code.highcharts.com/modules/exporting.js" ></script>

    <script>

        if({{ price_list |json }}){
            var price_list={{ price_list|json }}
        }else{
            var price_list=[-10]
        }

        price_list.reduce(function(result, value, index, array) {
          result.push([index+1,value]);
          return result;
        }, []);

        console.log(price_list)

        if({{ average_price |json }} > -10){
            Highcharts.chart('container', {
                chart: {
                    type: 'scatter',
                    {#zoomType: 'xy'#}
                    animation: false
                },
                credits: {enabled: false},
                legend: {enabled: false},
                tooltip: {enabled: false},
                exporting: { enabled: false },
                title: {
                    text: 'Trade Prices from Previous Markets'
                },
                xAxis: {
                    title: {
                        enabled: true,
                        text: 'Trade'
                    },
                    startOnTick: true,
                    endOnTick: true,
                    showLastLabel: true,
                    allowDecimals: false
                },
                yAxis: {
                    min:0,max:100,gridLineWidth: 0.5,
                    title: {
                        text: 'Price'
                    },

                    plotLines:[{
                        color:'green',
                        dashStyle:'longdashdot',
                        width: 2,
                        label:{text:"Average: " + {{ average_price |json }},verticalAlign:"middle"},
                        value: {{ average_price |json }}
                    }]
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        }
                    }
                },
                series: [
                    {
                    {#name: 'Female',#}
                    color: 'rgba(11, 102, 35, .5)',
                    data:
                        price_list
                    }
                ]
            });
        } else {
                Highcharts.chart('container', {
                chart: {
                    type: 'scatter',
                    {#zoomType: 'xy'#}
                    animation: false
                },
                credits: {enabled: false},
                legend: {enabled: false},
                tooltip: {enabled: false},
                exporting: { enabled: false },
                title: {
                    text: 'Trade Prices from Previous Markets'
                },
                xAxis: {
                    title: {
                        enabled: true,
                        text: 'Trade'
                    },
                    startOnTick: true,
                    endOnTick: true,
                    showLastLabel: true,
                    allowDecimals: false
                },
                yAxis: {
                    min:0,max:100,gridLineWidth: 0.5,
                    title: {
                        text: 'Price'
                    }
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 5,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(100,100,100)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        }
                    }
                },
                series: [
                    {
                    {#name: 'Female',#}
                    color: 'rgba(11, 102, 35, .5)',
                    data:
                        price_list
                    }
                ]
            });
        }


    </script>