clear cache from Highchart when loading data from a json file

Question

I am doing following :

1. creating a json file using some logic in python django
2. This json file is now used by high chart js code to render the pie chart

code for highchart js is as below :

//high chart json pie chart

$(document).ready(function() {
console.log("hi from high chart from json PIE")

  $.getJSON("{% static 'money/data/highchartpie.json' %}", function(json) {
    console.log("haha i have read the json")
   $('#containerHighChartJSONPie').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: 1,//null,
        plotShadow: false
    },
    title: {
        text: 'Expenses per Types of Expenditures'
    },
    tooltip: {
        pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Type of Expenditure',
        data: json
    }]
});
});

});

data as in json is : [["Grocery",50.0],["Miscellaneous",30.0]]

Problem Following generates good pie chart as desired , if any data is changed the graph is also changed however sometimes the graph dosent show the updated data in it . I tried :

1. Running it from another browser - it was showing updated graph with new values
2. cleared cache and tried again in same browser and now it was showing updated code

So it seems its a cache issue , But is there any way to fix this in highchart code ?

Answer 1

You can set the cache to false by calling the following, it will be disabled for all your requests:

$(document).ready(function() {
  $.ajaxSetup({ cache: false });
});

See this SO question: How to set cache false for getJSON in JQuery?

For more precise cache handling, change your getJSON to an ajax jquery call where you set the datatype to JSON: in fact, $.getJSON is a shortcut for the following:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

So if you want to set cache: false in your request, you should just add it this way:

$.ajax({
    cache: false,
    dataType: "json",
    url: url,
    data: data,
    success: success
});