clear cache from Highchart when loading data from a json file

Question

I am doing following :

creating a json file using some logic in python django
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 :

Running it from another browser - it was showing updated graph with new values
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 ?

Community · Accepted Answer · 2017-05-23 10:27:54Z

3

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
});

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Sep 16, 2014 at 7:49

Nicolas R

14.7k2 gold badges32 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

paarth batra Over a year ago

setting cache only works great and even replacing getJSON with ajax works great . Thanks :)

Nicolas R Over a year ago

As I said, one is global and the other is local (only this request) so use the right one.

Collectives™ on Stack Overflow

clear cache from Highchart when loading data from a json file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related