score:2
when django return rendered template to client, it won't be able to make any changes afterwards. that's why your chart doesn't reflect any changes made in django.
if you need to update your chart with new data, easiest solution will be to use ajax request.
- user press refresh button
- javascript send get request to django api point
- django serve new values in json back to user
- javascript will update chart with new values
make another endpoint, something like this:
from django.http import jsonresponse
def dashboard_ajax_chart_data(request):
pass_tc=500
failed_tc=99
inprogress_tc=50
data = {'data':[pass_tc, failed_tc, inprogress_tc]}
return jsonresponse(data)
make function in your javascript code, like this:
jquery('.refresh-button').click(function(){
jquery.getjson("/dashboard_ajax/", function(data, status)
{
chart.data.datasets[0].data = data.data;
chart.update();
}
)
});
and make this function execute when you click on your refresh button.
i don't have proper experience with chart.js, but use this guide to update your chart. https://www.chartjs.org/docs/latest/developers/updates.html
Source: stackoverflow.com
Related Query
- How to refresh chart in django without refreshing whole page
- how to reduce list chart to one and use select dropdown to show selection without refresh page?
- How i can refresh chart without refresh page?
- How to save Chart JS charts as image without black background using blobs and filesaver?
- How do I display chart on my HTML page based on JSON data sent by Node JS
- How to create a Doughnut chart in django admin interface using foreign key field data?
- Chart js how to toggle line without click
- How to print a chart rendered by code
- How to display Tooltip without hovering pie chart with Chart.JS
- How to put implement chart.js into an existing page django
- Chart.js how to show line chart without displaying the labels on xaxis and yaxis
- How to load a chart in a diferent page
- How to Draw a line on chart without a plot point using chart.js
- How do I destroy/update Chart Data in this chart.js code example?
- How to push a variable number of datasets to a chart data, without the _observer "magic"_ (using vuecharts.js)?
- how to see labels without losing middle text in doughnut chart
- update chart in chart js without reloading the page
- How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page
- update my chartjs form without refreshing page
- How to update your django page by looking for new data in the db?
- How to display Json object in chart js consisting of lists created using Django rest framework in angular application
- C# MVC5 JavaScript Chart.js Pie Chart with Realtime Updating from SQL Server Database without Refreshing
- How to convert chart.js library chart to image in pure node.js without using HTML and CSS?
- How to run Chart.js samples using source code
- How to make the size of pie chart fixed without using canvas (chart.js)
- How to get values inside a chart without clicking
- Chart JS - Remember hidden label state after page refresh
- how to not repeat code while creating multiple charts in chart js
- How to add text inside the doughnut chart using Chart.js?
- How to clear a chart from a canvas so that hover events cannot be triggered?
More Query from same tag
- Uncaught TypeError: Cannot read property 'draw' of undefined
- How do i programmatically set bar fillColor in chartJs + angular
- how to add a background that display "no data" on Canvas using ChartJS?
- Using associative PHP array in JS to later on use in chart generated via chart.js
- How to make ChartJS not cut off tooltips?
- Adding reading off lines in ChartJS
- How to draw pile/stacked bar chart?
- Removing text shadow/blur from chart.js charts
- Bootstrap tab is working but the tab content is not showing
- Best way to connect Django Query results to Chart.js charts?
- ChatJS 2.8 chaning x-Axis font style and color
- How to change background color of labels in line chart from chart.js?
- Execute chartjs after an ajax call with PHP
- Chart.js v2.0 - colouring individual bars differently
- Horizontal gradient for every single bar in group chart js
- Angular Chart.js, how to remove series?
- Time series data visualization using JSON
- Data will not draw onto my chart
- when showing large amount of data graph not displaying from middle
- Format chart.js x-axis labels to specific timezone
- Cannot read property 'getElementAtEvent' of undefined, Typescript
- Draw a mathematical function in chartjs
- Canvas size not changing
- Line Chart using Chart js with time data
- Chart.JS fixing maximum and minumum to a location on screen
- Chartjs is graphing my values at positions 0,1,2 rather than their values along the x axis
- Data not displaying in django admin - using chart.js (no errors)
- Is there a way to make a view run without having to show the view in the browser in laravel?
- Chart.js minimal width of Chart with scrollable overflow
- Chart, X and Y-Axis labels are blurred in horizontal bar chart using chart.js