Django Graphos Chart Not Loaded On Table Update Using Ajax - django

Question

I have been using django graphos and it works fine till i realize that the chart is not drawn when i update my table through ajax instead of a page refresh. Let me describe the issue further.
When my page is loaded for the first time, all the charts are loaded properly using {{chart.as_html}} . I am usng django by the way .
This charts are displayed in a table.
But when user selects different value from a dropdown and click reload, my code will only update the table through ajax instead of a whole page refresh. Unfortunately , when the table is updated, the chart with new data is not displayed. It just appears blank. I can see all the data from the developer tools but the chart just fail to appear.
I have checked through various topics but I am unable to get it working.
Part of my main html file
{% if objects %}
{% for obj in objects %}
<tr data-toggle="collapse" data-target="#{{obj.name}}" data-parent="#myGroup" class="accordion-toggle">
<!--tr>-->
<td style="border:0;"><img src='{{STATIC_URL}}/static/images/{{obj.name}}.png' class="infostockIcon"></td>
{% if obj.risk == "high" %}
{% if obj.dpr == "high" %}
<td class="tablerisk"><strong> * {{obj.name}} </strong></td>
{% else %}
<td class="tablerisk"><strong> {{obj.name}} </strong></td>
{% endif %}
<td class="tablerisk"> {{obj.stock_price}} </td>
<td class="tablerisk" style="color: black;"> {{obj.option_strategy}} </td>
<td class="tablerisk" style="color: black;"> {{obj.whiz_strategy}} </td>
<td class="tablerisk"> {{obj.strike_price}} </td>
<td class="tablerisk"> {{obj.expiry_date}} </td>
<td class="tablerisk"> {{obj.premium}} </td>
<td class="tablerisk"> {{obj.roi}} </td>
{% else %}
{% if obj.dpr == "high" %}
<td><strong> * {{obj.name}} </strong></td>
{% else %}
<td><strong> {{obj.name}} </strong></td>
{% endif %}
<td> {{obj.stock_price}} </td>
<td> {{obj.option_strategy}} </td>
<td> {{obj.whiz_strategy}} </td>
<td> {{obj.strike_price}} </td>
<td> {{obj.expiry_date}} </td>
<td> {{obj.premium}} </td>
<td> {{obj.roi}} </td>
{% endif %}
<td style="border:0;"><span class="caret black"></span></th></td>
</tr>
<tr>
<td style="border: 0;padding: 0 !important;"></td>
<td colspan="8" style="padding: 0 !important; border: none;">
<div class="accordion-body collapse" id="{{obj.name}}">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li data-toggle="tab" class="active">
Monthly Seasonality
</li>
<li data-toggle="tab">
Weekly Seasonality
</li>
<li data-toggle="tab">
Dividend
</li>
<li data-toggle="tab">
{{obj.name}} Info
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="{{obj.name}}monthseason">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4>Monthly Seasonality<img src='{{STATIC_URL}}/static/info.png' class="infoIcon" style="float: none; right: 0px; margin-left: 5px" /></h4>
<div id="gchart_div">
{{ obj.monthly_chart.as_html}}
</div>
</div>
</div>
</div>
<div class="tab-pane" id="{{obj.name}}weekseason">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4>Weekly Seasonality<img src='{{STATIC_URL}}/static/info.png' class="infoIcon" style="float: none; right: 0px; margin-left: 5px"/></h4>
{{ obj.weekly_chart.as_html}}
</div>
</div>
</div>
<div class="tab-pane" id="{{obj.name}}dividend">
<!--div style="padding-left: 2%;" >-->
<div class="row">
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >TTM Dividend Yield:</label>
<label >{{obj.ttm_dividend_yield}}</label>
</div>
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >Ex-Dividend Date:</label>
<label >{{obj.ex_div}}</label>
</div>
</div>
<!--/div>-->
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<h4>Dividend Yield<img src='{{STATIC_URL}}/static/info.png' class="infoIcon" style="float: none; right: 0px; margin-left: 5px"/></h4>
{{obj.div_yearly_chart.as_html}}
</div>
</div>
</div>
<div class="tab-pane alignRight" id="{{obj.name}}data">
<div style="padding-left: 2%;" >
<div class="row">
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >Sector:</label>
<label >{{obj.sector}}</label>
</div>
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >Industry:</label>
<label >{{obj.industry}}</label>
</div>
</div>
<div class="row">
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >Earning Date:</label>
<label >{{obj.earnings_date}}</label>
</div>
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >Ex-Dividend Date:</label>
<label >{{obj.ex_div}}</label>
</div>
</div>
<div class="row">
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >52 Week Range:</label>
<label >{{obj.year_range}}</label>
</div>
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >5 Year Low:</label>
<label >{{obj.five_year_low}}</label>
</div>
</div>
<div class="row">
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >DPR:</label>
<label >{{obj.dpr_value}}</label>
</div>
<div class="col-md-5 col-xs-6 col-sm-6 alignLeft">
<label >Latest News:</label>
<a href={{obj.url}}>Seeking Alpha</a>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</td>
</tr>
My ajax call:
`var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse','.collapse', function() {
$myGroup.find('.collapse.in').collapse('hide');
});
$('#tabs li a').click(function (e) {
$('#tabs li a.active').removeClass('active');
$(this).parent('li a').addClass('active');
});
$("#loadprofit").on("click", function(e)
{
//alert("asdas");
e.preventDefault();
var selectedOption = $("#strategy").val();
var selectedDate = $("#strategy2").val();
csrf_token = "{{ csrf_token }}";
$.ajax({
method: "POST",
url: window.location.href,
data: { selected_option: selectedOption,selected_date:selectedDate,csrfmiddlewaretoken: csrf_token },
})
.done(function( msg )
{
console.log(msg);
$("#sct tbody").html(msg);
});
});
</script>
{% endblock %}
`
This whole table gets updated when user clicks on a button. Then it calls views.py and table gets updated with the latest value. But {{ obj.monthly_chart.as_html}} is not loaded and it appears blank although i can see the whole chart drawing function and the data form the developer tool
Any help is greatly appreciated.