старшие диаграммы с выбором года

#jquery #highcharts

#jquery #старшие диаграммы

Вопрос:

Я использую 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="?configamp;year=2009amp;history=">2009</a></li><li><a href="?configamp;year=2008amp;history=">2008</a></li><li><a href="?configamp;year=2007amp;history=">2007</a></li><li><a href="?configamp;year=2006amp;history=">2006</a></li><li><a href="?configamp;year=2005amp;history=">2005</a></li><li><a href="?configamp;year=2004amp;history=">2004</a></li><li><a href="?configamp;year=2003amp;history=">2003</a></li><li><a href="?configamp;year=2002amp;history=">2002</a></li><li><a href="?configamp;year=2001amp;history=">2001</a></li><li><a href="?configamp;year=2000amp;history=">2000</a></li><li><a href="?configamp;year=1999amp;history=">1999</a></li><li><a href="?configamp;year=1998amp;history=">1998</a></li>                                
          </ul>
      </div>

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

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

Ответ №1:

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

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