Обновление графика с выбранными ячейками в качестве оси из шаблона - Django

У меня есть приложение Django, в котором я хочу построить несколько графиков и дать пользователю возможность изменить ось из 2 полей выбора из шаблона. Опции из полей выбора на самом деле являются столбцами из фрейма данных. Проблема заключается в том, что каждый раз, когда я меняю опцию в одном поле выбора, в другом устанавливается значение None. Я не использую форму, потому что мне не нужна кнопка отправки. Я знаю, что в Dash есть функция Dash no_update, которая не обновляет график, пока в обоих полях выбора не будет установлена опция. Я новичок в jquery, js, ajax. Вызов ajax делает свою работу, но только для одного селекбокса за раз.

Спасибо

Views.py

def dashboard(request):
    cool_data = manage_pandas(df_raw)
    posnr=cool_data['posnr'].unique()
    x1 = request.GET.get('x')
    y1 = request.GET.get('y')
    dff = cool_data.loc[cool_data['posnr'] == pos]
    dff = dff.astype({'vnum': str})
    dff = dff.drop('posnr', axis = 1)
    col = dff.columns
    
    
    if x1 is None and y1 is None:
        print("Nothing selected")
        #Dummy plot
        plot_div = plot([Scatter(x=[1], y=[2],
                        mode='lines', name='test',
                        opacity=0.8, marker_color='green')],
               output_type='div')
    else:
        print(x1,y1)
        x_axis = dff[x1]
        y_axis = dff[y1]
    
        plot_div = plot([Scatter(x=x_axis, y=y_axis,
                        mode='lines', name='test',
                        opacity=0.8, marker_color='green')],
               output_type='div')
    context = {
        'posnr' : posnr,
        'plot_div':plot_div,
        'col':col
    }
    return render(request, "scatterplot/scatterplot.html", context)

scatterplot.html

<div class = "container" id = "second" style="display:true">
          <br>  <br>
        <select class="x">
            <option value="none" selected disabled hidden>
                Select X-Axis
            </option>
            
                {% for c in col %}
                <option value="{{ c }}">{{ c }}</option>
                {% endfor %}
            </select>
        <br>  <br>  
        <select class="y">
            <option value="none" selected disabled hidden>
                Select Y-Axis
            
                {% for c in col %}
                <option value="{{ c }}">{{ c }}</option>
                {% endfor %}
            </select>
        
        </div> 
        {% autoescape off %}
        {{ plot_div }}
        {% endautoescape %}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>

 
 $(document).ready(function(e){
     $("select.x").change(function(){
        var x = $(this).children("option:selected").val();
        var postUrl = "http://127.0.0.1:8000/scatterplot/dashboard"
              
        $.ajax({
                url:postUrl,
                type:'GET',
                data: {"x":x},
                success:function(response){console.log(response)}
                
            })
    });
    $("select.y").change(function(){
        var y = $(this).children("option:selected").val();
        var postUrl = "http://127.0.0.1:8000/scatterplot/dashboard"
        
        $.ajax({
                url:postUrl,
                type:'GET',
                data: {"y":y},
                success:function(response){console.log(response)}
                
            })
    })          
            
 });


</script>

Вернуться на верх