высокие графики с селектором года

Question

Я использую Highcharts для своей статистики, я сделал дополнительную кнопку для выбора года. Это работает нормально, но когда я нажимаю кнопку, обновляется страница, а это не то, что я хочу.

Моя серия Highcharts выглядит так:

series: [{
     name: 'Sales <? echo $year; ?>',
     lineWidth: 4,
     lineColor: '#058DC7',
     color: '#058DC7',
     marker : {
        enabled : true,
        fillColor: '#058DC7',
        radius : 5,
        lineWidth : 2,
        states: {
            hover: {
                radius: 6,
                lineWidth : 2
                }
            }
        },
    states: {
    hover: {
        lineWidth: 5
        }
     },
     data: [<?

        //SELECT FROM DATABASE
        $query = "SELECT SUM(amount) AS amount_total
        FROM invoices 
        WHERE user_id = {$_COOKIE['customer_id']} 
        AND date BETWEEN '{$year}-01-01' AND '{$year}-12-30'
        GROUP BY MONTH(date)";
        $sql = mysql_query("$query"); 
        while ($fill = mysql_fetch_array($sql)) 
        { 
            $amount = $fill['amount'];

            echo $amount.',';
        }

        ?>]

  }

Кнопка:

    <div class="stats_options" id="yearSelector" style="margin-bottom:10px; width:150px;">Select Year: <span style="color:#058DC7; font-weight:bold;">2008</span></div>
      <div id="yearSelectorOptions" class="option_list" style="width:170px; display:none;">
          <ul>
              <li><a href="?config&year=2009&history=">2009</a></li><li><a href="?config&year=2008&history=">2008</a></li><li><a href="?config&year=2007&history=">2007</a></li><li><a href="?config&year=2006&history=">2006</a></li><li><a href="?config&year=2005&history=">2005</a></li><li><a href="?config&year=2004&history=">2004</a></li><li><a href="?config&year=2003&history=">2003</a></li><li><a href="?config&year=2002&history=">2002</a></li><li><a href="?config&year=2001&history=">2001</a></li><li><a href="?config&year=2000&history=">2000</a></li><li><a href="?config&year=1999&history=">1999</a></li><li><a href="?config&year=1998&history=">1998</a></li>                                
          </ul>
      </div>

Так что я хочу изменить год без обновления страницы.

Я надеюсь, что кто-то может помочь мне в правильном направлении!

Answer 1

Как отметил Bhesh, для обновления вам понадобится Ajax.Я создал нечто подобное здесь: http://danaben.net/t/baseball/scatter.php

Проверьте скрипт вверху, который устанавливает некоторые параметры диаграммы, получает выбранный год и затем вызывает скрипт php.Php возвращает объект json, который я использую для замены значения options.series.Вам придется адаптировать это к вашему графику, но это должно быть в правильном направлении.