title: Dynamically changing chart data using Django and Highcharts?
body: <p>How would I go about allowing a user to change the status of a  graph and updating it on the page? </p>
  
  <p>For example, allowing a user to adjust the size of a graph without having to rePOST. </p>
  
  <p>I am using High charts in Django, what I have thought about doing is this. Send all the data over, and set a default size so that there is something to display. Then add a dropdown or something that allows the user to increase the size of the graph. When a user selects one of them, I somehow slice the data to increase the size. </p>
  
  <p>E.g., list L = [1,2,3,4,5,6,7,8,9,10] is sent over, but the default size is 5. So only L[:5] is displayed. The user selects the size to be 6, so it reloads so that L[:6] is displayed.  </p>
  
  <p>Example graph: </p>
  
  <p><img src="https://i.stack.imgur.com/7EOzb.png" alt="Example graph"></p>
  
  <p>Below are code snippets of my class based view. A user searches the reddit user he/she wants to analyse -> data is collected, fun things happen and all charts are set up -> </p>
  
  <pre><code>def post(self, request): 
     ...
  
     top_chart_series = collected user data, ready to be parsed in JS. 
     # currently I am only sending over the default size of data (top 10 words)
     # but what I would like to do is send ALL of the data and then deal with it in JS. 
     return render(request, &lt;htmlpage.html&gt;, .... lots of variables, {'top_chart_series': top_chart_series...}) 
  
  
  .... to the JS 
  # So this is where I am a bit confused.
  # At this point, the page is being loaded and the charts are being set up via JS: 
  # My question then, is how can I allow the user to adjust the size of the graph without having
  # to rePOST? 
  # I lack JS knowledge so that is probably why I am so confused in how I can approach this.
  
  # Anyway, what I was thinking was, once ALL the data is sent, I first chart a graph
  # with the default size (10 words), and then if the user decides to adjust the data
  # I run the function again(?) with the selected size. 
  # Here is the JS that I use currently, I haven't implemented anything I have described.
  
  
              function top_words(target, title, categories, data){
              // The parameters are variables sent in by django
              // E.g., top_words('#top_chart', 'Top Words', '{{ top_chart_series.categories|safe }}','{{ top_chart_series.data|safe }}');
              var seriesOptions = JSON.parse(data);
              var categories = JSON.parse(categories);
  
              $(target).highcharts({
                  chart: {
                      type: 'bar'
                  },
                  title: {
                      text: null
                  },
                  xAxis: {
                      title: {
                          text: null
                      },
                      categories: categories
                  },
                  yAxis: {
                      title: {
                      text: 'Occurence'
                      }
                  },
                  exporting: {
                              enabled: false
                  },
                  credits: {
                      enabled: false
                  },
                  plotOptions: {
                      bar: {
                          showInLegend: false 
                      }
                  },
  
                  series: seriesOptions
              }
          );
  </code></pre>