highcharts не работает в файле с расширением .php
Нужно построить график на сайте. Воспользовался highcharts все заработало пока был код в файле index.htm, переношу все из этого файла в index.php перестает работать? Название файла не влияет, а вот при смене расширения перестает работать. Попутно вопрос, как сделать чтобы была выборка данных из БД?
Этого не может быть. Хоть бы краем глаза увидеть, как так от смены расширения файла не сервере перестаёт работать javascript в браузере...
Вот и я не пойму почему так происходит... Еще тогда вопрос чем можно воспользоваться еще для построения гистограммы используя данные из БД?
Да уж это кому чем удобно. Главное в нужном виде отправить это всё highchart'у.
то есть, если нужно нам для него в Highcharts.Chart.series передать массив
(Взял из демки Highcharts)
то можно создать на стороне сервера такой же точно массив, для правильного понимания конвертировать его в utf-8, если этого не сделано, и просто отдать браузеру через PHP.json_encode().
то есть, если нужно нам для него в 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]
}]
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]
}]
то можно создать на стороне сервера такой же точно массив, для правильного понимания конвертировать его в utf-8, если этого не сделано, и просто отдать браузеру через PHP.json_encode().
На скорую руку сваял example. Самое тяжёлое было придумать откуда взять нейтральные данные. Свои светить как-то неохота ))))
Вобщем, сделаем базу с одной единственной таблицей:
Заполним эту таблицу данными из geonames:
Ну, понятно, что $db у каждого свой. Это мне так привычнее AbstractDB юзать.
А теперь пишем то, что увидят. Допустим, хотим мы графически увидеть разницу в площадях стран СССР.
Сверьху там кнопки jquery-ui с кодами стран. По клику на любой из кнопок будем сериализовать их checked и спрашивать у сервера данные. Он нам будет возвращать JSON, и просто рисуем чарт заново.
А теперь бежим обратно на сервер, и пишем там такую фигню, которую уже заложили в самом начале, где разбирали URL:
Собственно вот. Всё просто. И с помощью ajax.
У меня получилось что-то такое:
Вобщем, сделаем базу с одной единственной таблицей:
Код:
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;
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;
Код:
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);
}
}
}
$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);
}
}
}
А теперь пишем то, что увидят. Допустим, хотим мы графически увидеть разницу в площадях стран СССР.
Код:
<!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>
<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>
А теперь бежим обратно на сервер, и пишем там такую фигню, которую уже заложили в самом начале, где разбирали 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"];
}
}
$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.
У меня получилось что-то такое: