Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

highcharts не работает в файле с расширением .php

84K
10 ноября 2012 года
ppbinag
6 / / 02.11.2012
Нужно построить график на сайте. Воспользовался highcharts все заработало пока был код в файле index.htm, переношу все из этого файла в index.php перестает работать? Название файла не влияет, а вот при смене расширения перестает работать. Попутно вопрос, как сделать чтобы была выборка данных из БД?
8
10 ноября 2012 года
mfender
3.5K / / 15.06.2005
Этого не может быть. Хоть бы краем глаза увидеть, как так от смены расширения файла не сервере перестаёт работать javascript в браузере...
84K
10 ноября 2012 года
ppbinag
6 / / 02.11.2012
Вот и я не пойму почему так происходит... Еще тогда вопрос чем можно воспользоваться еще для построения гистограммы используя данные из БД?
8
10 ноября 2012 года
mfender
3.5K / / 15.06.2005
Да уж это кому чем удобно. Главное в нужном виде отправить это всё highchart'у.
то есть, если нужно нам для него в Highcharts.Chart.series передать массив
 
Код:
[{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
(Взял из демки Highcharts)

то можно создать на стороне сервера такой же точно массив, для правильного понимания конвертировать его в utf-8, если этого не сделано, и просто отдать браузеру через PHP.json_encode().
8
11 ноября 2012 года
mfender
3.5K / / 15.06.2005
На скорую руку сваял example. Самое тяжёлое было придумать откуда взять нейтральные данные. Свои светить как-то неохота ))))

Вобщем, сделаем базу с одной единственной таблицей:


Код:
CREATE DATABASE IF NOT EXISTS geobase
CHARACTER SET utf8
COLLATE utf8_general_ci;

CREATE TABLE geobase.geo_countries(
  iso2id VARCHAR(2) NOT NULL,
  iso3id VARCHAR(3) DEFAULT NULL,
  isonumid VARCHAR(3) DEFAULT NULL,
  fipsid VARCHAR(2) DEFAULT NULL,
  title_int VARCHAR(255) DEFAULT NULL,
  title_rus VARCHAR(255) DEFAULT NULL,
  capital_title VARCHAR(255) DEFAULT NULL,
  area FLOAT DEFAULT 0,
  continent VARCHAR(2) DEFAULT NULL,
  domain VARCHAR(4) DEFAULT NULL,
  currency_code VARCHAR(3) DEFAULT NULL,
  currency_name VARCHAR(15) DEFAULT NULL,
  phone_code VARCHAR(6) DEFAULT NULL,
  postal_code VARCHAR(10) DEFAULT NULL,
  postal_code_regex VARCHAR(255) DEFAULT NULL,
  gcid INT(11) DEFAULT NULL,
  PRIMARY KEY (iso2id)
)
ENGINE = MYISAM
AVG_ROW_LENGTH = 3238
CHARACTER SET utf8
COLLATE utf8_general_ci
ROW_FORMAT = FIXED;
Заполним эту таблицу данными из geonames:


Код:
if (isset($_REQUEST["ajax"])) {
    $res = array();
    switch ($_REQUEST["ajax"]) {
        case "Country": ajax_getCountry($db, $res, $_REQUEST["countries"]);
            break;
    }
    echo json_encode($res);
} else {
    getCountryFromGeoName($db);
}

function getCountryFromGeoName(\AbstractDB &$db) {
    $arr = file("http://download.geonames.org/export/dump/countryInfo.txt");
    foreach ($arr as $key => $row) {
        $rarr = array();
        if (substr($row, 0, 1) != "#") {
            $rarr = explode("\t", $row);
            $qq = "
                REPLACE INTO geo_countries
                SET
                    iso2id          = '{$rarr[0]}',
                    iso3id          = '{$rarr[1]}',
                    isonumid        = '{$rarr[2]}',
                    fipsid          = '{$rarr[3]}',
                    title_int       = '{$rarr[4]}',
                    capital_title   = '{$rarr[5]}',
                    area            = '{$rarr[6]}',
                    continent       = '{$rarr[8]}',
                    domain          = '{$rarr[9]}',
                    currency_code   = '{$rarr[10]}',
                    currency_name   = '{$rarr[11]}',
                    phone_code      = '{$rarr[12]}',
                    postal_code     = '{$rarr[13]}',
                    postal_code_regex = '{$rarr[14]}',
                    gcid            = '{$rarr[16]}'
            "
;
            $db->Query($qq);
        }
    }
}
Ну, понятно, что $db у каждого свой. Это мне так привычнее AbstractDB юзать.
А теперь пишем то, что увидят. Допустим, хотим мы графически увидеть разницу в площадях стран СССР.

Код:
<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="css/ui-darkness/jquery-ui-1.8.21.custom.css" type="text/css" media="all" />
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.js"></script>        
        <script src="js/highcharts.js"></script>
    </head>
    <body>
        <form id="buttonset">
            <input type="checkbox" checked="checked" id="ARM" /><label for="ARM">Армения</label>
            <input type="checkbox" checked="checked" id="AZE" /><label for="AZE">Азербайжан</label>
            <input type="checkbox" checked="checked" id="BLR" /><label for="BLR">Беларусь</label>
            <input type="checkbox" checked="checked" id="KAZ" /><label for="KAZ">Казахстан</label>
            <input type="checkbox" checked="checked" id="LTU" /><label for="LTU">Литва</label>
            <input type="checkbox" checked="checked" id="LVA" /><label for="LVA">Латвия</label>
            <input type="checkbox" checked="checked" id="EST" /><label for="EST">Эстония</label>
            <input type="checkbox" checked="checked" id="GEO" /><label for="GEO">Грузия</label>
            <input type="checkbox" checked="checked" id="KGZ" /><label for="KGZ">Киргизия</label>
            <input type="checkbox" checked="checked" id="MDA" /><label for="MDA">Молдавия</label>
            <input type="checkbox" checked="checked" id="RUS" /><label for="RUS">Россия</label>
            <input type="checkbox" checked="checked" id="UKR" /><label for="UKR">Украина</label>
            <input type="checkbox" checked="checked" id="UZB" /><label for="UZB">Узбекистан</label>
            <input type="checkbox" checked="checked" id="TKM" /><label for="TKM">Туркменистан</label>
            <input type="checkbox" checked="checked" id="TJK" /><label for="TJK">Таджикистан</label>
        </form>
        <script>
            (function(){
                $('#buttonset').buttonset();
                $('#buttonset :checkbox').click(function(e, data){
                    var inps = $(e.target.parentElement).children('input');
                    var sel = [];
                    for(var i=0; i<inps.length; i++){
                        if($(inps[i]).attr('checked') != undefined){
                            sel.push($(inps[i]).attr('id'));
                        }
                    }
                    doChart(sel.join(','));
                });
               
                var country_bars;
                               
                             
                /* Приделаем контейнер для чарта */
                $('<div>').attr('id', 'country_area_bars').appendTo('body');

                   
                /* Получим данные для графика. Знаем, что нам вернётся JSON */
                var doChart = function(cntr){
                    $('div#country_area_bars').empty();
                    $.getJSON('http://localhost/geobase', {ajax: 'Country', countries: cntr},
                    function(resp){
                        country_bars =  new Highcharts.Chart({
                            chart: {
                                renderTo: 'country_area_bars',
                                type: 'column'
                            },
                            title: {
                                text: 'Европейские страны по площади'
                            },
                            legend:{
                                enabled: false
                            },
                            xAxis: {
                                /* Категории у нас в приехавшем массиве categories */
                                categories: resp.categories,
                                labels: {
                                    rotation: -60,
                                    align: 'right',
                                    style: {
                                        fontSize: '12px',
                                        fontFamily: 'sans-serif'
                                    }
                                }                                
                            },
                            yAxis: {
                                min: 0,
                                type: 'linear',
                                title: {
                                    text: 'Площадь км²'
                                }
                            },
                            series:[{
                                    name: 'Площадь км²',
                                    data: resp.data
                                }]
                        });
                    });
                }
            })();
        </script>
    </body>
</html>
Сверьху там кнопки jquery-ui с кодами стран. По клику на любой из кнопок будем сериализовать их checked и спрашивать у сервера данные. Он нам будет возвращать JSON, и просто рисуем чарт заново.

А теперь бежим обратно на сервер, и пишем там такую фигню, которую уже заложили в самом начале, где разбирали URL:


Код:
function ajax_getCountry(\AbstractDB &$db, &$res, $countries) {
    $ret = array();
   
    /* препарируем страны, которые следует выбрать */
    $countries = implode("', '", explode(",", $countries));
    $db->QueryAssocAll("SELECT iso3id, title_int, area FROM geo_countries WHERE iso3id IN ('{$countries}') ORDER BY title_int", $ret);
    /**
     * В $ret Получаем массив примерно такого содержания:
      Array
      (
      [0] => Array
      (
      [iso3id] => AND
      [title_int] => Andorra
      [area] => 468
      )

      [1] => Array
      (
      [iso3id] => ALB
      [title_int] => Albania
      [area] => 28748
      )

      [2] => Array
      (
      [iso3id] => AUT
      [title_int] => Austria
      [area] => 83858
      )
      .........................
      )
     */

    $res["orig"] = $ret;
    foreach ($ret as $key => $val) {
        $res["categories"][] = $val["title_int"];

        /* На (double) нужно обратить особое внимание,
         * т.к. Highcharts требует именно чиста, а не строки,
         * которые вернёт нам этот скрипт.
         */

        $res["data"][] = (double) $val["area"];
    }
}


Собственно вот. Всё просто. И с помощью ajax.

У меня получилось что-то такое:

Знаете кого-то, кто может ответить? Поделитесь с ним ссылкой.

Ваш ответ

Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог