Question posted in
You can find the official documentation here.

how to update plotly graph using ajax in django – Jquery ajax

I want to update my plotly graph using ajax in my Django project. This is what I tried so far.
I’m following this guide to doing it and I’m totally new in jquery and ajax.

urls.py

urlpatterns = [
    path('', views.index, name='index'),   
    path('smartflow/ajax/updategraph', views.updategraph, name = "updategraph")

]

In views.py I defined a updategraph function(view) to do the job for GET request.

def updategraph(request):        
    df_georgian = get it from a csv file for example

    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
            coding = request.GET.get('coding')

            if coding:
                    trace2 = go.Scatter(x=df_georgian.index,
                                            y=df_georgian.loc[:, df_georgian.columns[2]],
                                            mode='lines',
                                            name='2')


                    fig_new = go.Figure(data=[trace2])
                    plot_div_new = plot(fig_new,
                                            config=config,
                                            output_type='div')

                    data = {
                            'my_data':plot_div_new
                    }
                    return JsonResponse(data)
    else:
            return redirect('smartflow')

this is my template:

<div class="container">

    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 mx-3 px-0 mt-5 pt-5" id="graph" >
            {% autoescape off %}
            {{ new|safe }}
            {% endautoescape %}
        </div>

        <div class="col-12">

            <div>
                <input type="checkbox" id="coding" name="interest" value="coding" onclick = "myfunction()">
                <label for="coding">Coding</label>
            </div>

        </div>

    </div>
</div>

I want, if the coding checkbox is selected, then the graph adds the trace2 to itself and when it is unchecked the trace2 removes from the existing graphs.

here is my jquery to respond to GET request which is at the end of my template:

<script type = "text/javascript">
    $("#coding").change(function () {
    if (document.getElementById('coding').checked) {
        alert("checked");
        
        var current_graph = $('#graph').val();

        $.ajax({
            url: "{% url 'updategraph' %}",
            data: {
                'current_graph': current_graph
            },
            dataType: 'json',

            success: function (data) {
            // $('#graph').val() = current_graph; //Here is my question?!?!?!?!?!??!?!?!?!
                alert(response);

            }
        });
        
    } else {
        alert("unchecked");
    }
  
});

when I select coding, I get the following error in the chrome console:

GET http://127.0.0.1:8000/smartflow/ajax/updategraph?current_graph= 500 (Internal Server Error)         jquery-3.5.1.min.js:2 
send    @   jquery-3.5.1.min.js:2
ajax    @   jquery-3.5.1.min.js:2
(anonymous) @   (index):1683
dispatch    @   jquery.min.js:2
v.handle    @   jquery.min.js:2

in the success function of my js code ($(‘#graph’).val() = data; //Here is my question?!?!?!?!?!??!?!?!?!) part:

1- I dont know how to get the my_data that I returned in the views.py and put it in the div with #graph id.

2- how to add the data to the current graph without deleting previous ones.

Tags:

2

Answers


  1. 0

    Where you have your comment:

    $('#graph').html(data["current_graph"])

    Login or Signup to reply.
  2. 0

    You can add content to the div using :

    $('#theDiv').prepend('<img id="theImg" src="theImg.png" />')

    In this example I am appending an image inside the div..
    In the ajax call would be something like :

    $.ajax({
        url  : "{% url 'url_to_call' %}",
        type : 'get',
        data : {
            somedata : $('#somedata').val()
        },
        success: function(response){
            $( "#the-div" ).prepend('<img id="id" src="theImg.png" />')
        }
    });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search