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

Новые темы	Объявления	Свободное общение
08:59 Яндекс не видит фавикон 08:58 AviTool - мощный инструмент для автоматизации работы с Avito 20:31 Работает ли ссылочное продвижение 2019 – 2020? 20:12 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 19:14 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 17:03 Как получить трафик из Google Discover 00:02 CPA-сеть MyLead - глобальная монетизация трафика!	02:42 BetaTransfer касса — это надежный сервис приема платежей в сфере High Risk 23:34 USMobileSMSBot - 22:34 Раскрутка сайта прогонами и поведенческими. Опыт с 2009 года - качественно на любой бюджет (NEW 2022 новостной прогон)! 17:26 Онлайн подработка до 5К (БЕЛАЯ) 17:10 рассылки viber и whatsapp 12:56 Высококачественные и надежные прокси-серверы и 5G 06:24 ProxyWins.com - 15% по промо-коду "venividivici"	16:58 Точные прогнозы на футбол 15:23 Ещё 12 заявлений в полицию о мошенничестве подано на блогера Аяза Шабутдинова 12:27 ИИ Google поставил под сомнение подлинность фотографий высадки астронавтов США на Луну 17:33 Стряхнуть обыденность - об Агасфере 00:03 Кабмин разрешил Роскомнадзору блокировать сайты с методами обхода блокировок 14:55 150+ хакерских поисковых систем и инструментов 23:03 С юмором по жизни!