Ajax Json и график

Сообщений: 185 Регистрация: Дек 2010

15 Декабря 2016 13:58

Вопрос такой, есть ajax запрос который отправляет при клике на ссылку переменную id в файл обработчик, файл обработчик получает это всё и формирует нужный мне массив (с этим проблем нет массив получается и отправляется обратно). Вот сам код

Код

function go_stata(id) { 
$.post('/stata', {'func' : 'go_stata', 'id' : id}, 
function(data, requestStatus) { 
if ( data['status'] != '0' ) {$.each(data['stata'], function(index, msg_array) { 
var chart; 
var chartData_id = 
 [{ 
"country": "Пн","visits": msg_array['pn'] 
},{ 
"country": "Вт","visits": msg_array['vt'] 
},{ 
"country": "Ср","visits": msg_array['sr'] 
},{ 
"country": "Чт","visits": msg_array['ch'] 
},{ 
"country": "Пт","visits": msg_array['pt'] 
},{ 
"country": "Сб","visits": msg_array['sb'] 
},{ 
"country": "Вс","visits": msg_array['vs'] 
}, 
]; 
AmCharts.ready(function () { 
// SERIAL CHART 
chart = new AmCharts.AmSerialChart(); 
chart.dataProvider = chartData_id; 
chart.categoryField = "country"; 
chart.startDuration = 1; 
 
categoryvar categoryAxis = chart.categoryAxis; 
categoryAxis.labelRotation = 90; 
categoryAxis.gridPosition = "start"; 

var graph = new AmCharts.AmGraph(); 
graph.valueField = "visits"; 
graph.balloonText = "[[category]]: <b>[[value]]</b>; 
graph.type = "column"; 
graph.lineAlpha = 0; 
graph.fillAlphas = 0.8; 
chart.addGraph(graph); 
 
var chartCursor = new AmCharts.ChartCursor(); 
chartCursor.cursorAlpha = 0; 
chartCursor.zoomable = false; 
chartCursor.categoryBalloonEnabled = false; 
chart.addChartCursor(chartCursor); 
chart.creditsPosition = "top-right"; 
chart.write('chartdiv_'+id+''}); 
$('#stata').prepend('<div id="chartdiv_' + id + '" style="min-width: 200px; height: 250px; max-width: 100%; margin: 0 auto"></div>'); 
}); 
} 
}, "json");}

Затем я получаю мой массив и разбиваю его. потом вставляю данные в график и по сути должен при клике открыться

Код
<div id="chartdiv_' + id + '" style="min-width: 200px; height: 250px; max-width: 100%; margin: 0 auto"></div>

, он и открывается, но график в нём не отображается.=( Возможно это не правильное решение моей задачи.
Поясню задачу, нужно для каждого элемента вывести свой график, можно конечно сделать без подгрузки из стороннего файла, но если элементов много то страница значительно нагрузиться от большого кол-ва ajax кода.

Так же можете посоветовать как можно реализовать всплывающее окно, но что бы оно брало информацию из другого файла. Принцип:
Человек нажал на ссылку -> ссылка передала id в другой файл -> файл обрабатывает полученный id и возвращает уже готовый html код обратно во всплывающее окно.

Изменено: Олег Былинкин - 15 Декабря 2016 14:02

Скачайте самые новые фильмы торент

Dark Some

Сообщений: 42 Регистрация: Мар 2015

15 Декабря 2016 16:09

передай через data при клике. И получи ajax ответ

Лучшая партнерка с оплатой за показы и клики

Dark Some

Сообщений: 42 Регистрация: Мар 2015

15 Декабря 2016 16:15

Код
$('#click').click(function(){ var some = $(this).data("id"); $.ajax({ type: "POST", url: "some.php", data: "name="+some, success: function(html){ $("#results").append(html); } }); });

Олег Былинкин

Сообщений: 185 Регистрация: Дек 2010

15 Декабря 2016 21:18

Через data не прошло, сделал немного по другомувот код скрипта:

Код

function go_stata(id) {
$.ajax({
type: "POST",
url: "/stata",
dataType: "json",
data: {'func' : 'go_stata', 'id' : id},
beforeSend: function(){ progress = true;},
success: function(json){
$("#dd").html(json);
}
});
}

Вот код обработчика:

Код

if($_POST['func'] == "go_stata") {
$id = intval($_POST["id"]);
$sql = mysql_query("SELECT * FROM `nano_rek_dinamika` WHERE `id_user`='$id_login' AND `id`='$id'") or die(mysql_error());
while ($row = mysql_fetch_array($sql)){
$pn = $row["pn"];
$vt = $row["vt"];
$sr = $row["sr"];
$ch = $row["ch"];
$pt = $row["pt"];
$sb = $row["sb"];
$vs = $row["vs"];

$shablon = '
<div id="chartdiv_'.$id.'" style="min-width: 200px; height: 250px; max-width: 100%; margin: 0 auto"></div>
<script>
var chart;
var chartData_'.$id.' = [
{
"country": "Пн",
"visits": '.$pn.'},
{
"country": "Вт",
"visits": '.$vt.'},
{
"country": "Ср",
"visits": '.$sr.'},
{
"country": "Чт",
"visits": '.$ch.'},
{
"country": "Пт",
"visits": '.$pt.'},
{
"country": "Сб",
"visits": '.$sb.'},
{
"country": "Вс",
"visits": '.$vs.'},

];


AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData_'.$id.';
chart.categoryField = "country";
chart.startDuration = 1;

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.gridPosition = "start";

var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.balloonText = "[[category]]: <b>[[value]]</b>";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
chart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);

chart.creditsPosition = "top-right";

chart.write("chartdiv_'.$id.'");
});
</script>
';
echo json_encode($shablon);
}
}

После обработки получаю вот что:

Код

<div id="chartdiv_1" style="min-width: 200px; height: 250px; max-width: 100%; margin: 0 auto"></div>
var chart;
var chartData_1 = [
{
"country": "Пн",
"visits": 0},
{
"country": "Вт",
"visits": 0},
{
"country": "Ср",
"visits": 2},
{
"country": "Чт",
"visits": 0},
{
"country": "Пт",
"visits": 0},
{
"country": "Сб",
"visits": 0},
{
"country": "Вс",
"visits": 0},

];


AmCharts.ready(function () {
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData_1;
chart.categoryField = "country";
chart.startDuration = 1;

// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.gridPosition = "start";

var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.balloonText = "[[category]]: <b>[[value]]</b>";
graph.type = "column";
graph.lineAlpha = 0;
graph.fillAlphas = 0.8;
chart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);

chart.creditsPosition = "top-right";

chart.write("chartdiv_1");
});

Но график так и не отображается, не могу понять в чём проблема!( Пробовал и js скрипты дублировать в сам шаблон, не помогло.

26.03.2020 22:30	Быстрый поиск на ajax php
12.12.2018 13:42	Создание JSON структуры страницы
28.01.2014 03:44	Как отделить jQuery от google ajax
03.10.2013 16:21	Ajax всплывающее окно
10.09.2012 16:33	скрыть копипаст помощью ajax

Новые темы	Объявления	Свободное общение
20:25 Rotapost прикрыли! Чем пользоваться? 20:24 Операторы поиска Яндекса: FAQ для тех, кто хочет стать мастером поиска 20:23 Ночной бар в Паттайе: как случайная встреча с "тайкой" и её кадыком перевернула мой взгляд на продвижение сайта в Google 2026 09:24 Как Яндекс индексирует ваш сайт? \| АПдейт выдача 5.12.2025 18:31 Хлебные крошки на сайте: сказка из Простоквашино про навигацию в интернете 10:58 Стоит ли добавлять сайт в Rambler топ 100? 15:59 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options	18:46 CactusPay.PRO \| Умная платёжная система с выводом в USDT TRC-20 16:32 Q3.Network: 1500+ гемблинг-офферов, нестандартные источники трафика, свои приложения 23:58 Mixmasters - Exchange without AML and KYC 17:38 Quix Email - сервис почтовых активаций 16:41 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 12:41 SnapSwap.io — мгновенный обмен BTC, XMR, ETH, USDT и других криптовалют без регистрации! 11:07 - Вечные ссылки с трастовых сайтов 2024 проверен FastTrust	21:38 Про мясо 20:36 Точные прогнозы на футбол 20:21 С юмором по жизни! 14:04 Компьютерная мышь 13:08 Бесплатный майнинг Tether (USDT) 16:49 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 20:43 Добро пожаловать в цифровой мир...