nanotek21

Ajax Json и график

8 posts in this topic

Вопрос такой, есть 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;

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

// value
// in case you don't want to change default settings of value axis,
// you don't need to create it, as one value axis is created automatically.

// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.balloonText = "[[category]]: <b>[[value]]</b>
34;;
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+''&
#41;;
});
$('#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 кода.

Share this post


Link to post
Share on other sites

На строку 59 обратите внимание:

graph.balloonText = "[[category]]: <b>[[value]]</b>";
 

Кавычек не хватает... 

Проверьте консоль, наверняка есть ошибки...

campusboy likes this

Share this post


Link to post
Share on other sites

Консоль смотрю, ошибок нет. Кавычки тут пропали просто, так в коде они есть.

Share this post


Link to post
Share on other sites

кстати, если взять чисто скрипт графика и вставить в него свои значения

var chart;
var chartData_1 = [
{
"country": "Пн",
"visits": 23
},
{
"country": "Вт",
"visits": 3
},
{
"country": "Ср",
"visits": 2
},
{
"country": "Чт",
"visits": 22
},
{
"country": "Пт",
"visits": 12
},
{
"country": "Сб",
"visits": 11
},
{
"country": "Вс",
"visits": 1
},
 
];
 
 
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";
 
// value
// in case you don't want to change default settings of value axis,
// you don't need to create it, as one value axis is created automatically.
 
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = "visits";
graph.balloonText = "[[category]]: <b>[[value]]</b>
34;;
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');
});

то график появляется и работает

Share this post


Link to post
Share on other sites

Как по мне, вы AmCharts.ready употребляете не по назначению. А проблема связана, скорее всего, с делегированием.

nanotek21 and witosp like this

Share this post


Link to post
Share on other sites

Как по мне, вы AmCharts.ready употребляете не по назначению. А проблема связана, скорее всего, с делегированием.

А можете немного подробнее разжевать про делегирование

Share this post


Link to post
Share on other sites

А можете немного подробнее разжевать про делегирование

Вот тут нормально написано, 2 пункт меню.

Share this post


Link to post
Share on other sites

Вы разобрались почему div с графиком не всплывал?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.