Ajax Json и график (Гуру)
Гуру, просыпаемся, давайте валите меня грязью.=)
Вопрос такой, есть ajax запрос который отправляет при клике на ссылку переменную 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");
}
Затем я получаю мой массив и разбиваю его. потом вставляю данные в график и по сути должен при клике открыться
, он и открывается, но график в нём не отображается.=( Возможно это не правильное решение моей задачи.
Поясню задачу, нужно для каждого элемента вывести свой график, можно конечно сделать без подгрузки из стороннего файла, но если элементов много то страница значительно нагрузиться от большого кол-ва ajax кода.
nanotek,
Дай ссылку чтоль где шаманишь это всё.
Там надо региться, да и до окончания палить не охото)
Сделал по другому, ajax:
$.ajax({
type: "POST",
url: "/stata",
dataType: "json",
data: {'func' : 'go_stata', 'id' : id},
beforeSend: function(){ progress = true;},
success: function(json){
$("#dd").html(json);
}
});
}
Обработчик(кусок):
<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 () {
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData_'.$id.';
chart.categoryField = "country";
chart.startDuration = 1;
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.gridPosition = "start";
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);
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>
<script>
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 () {
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData_1;
chart.categoryField = "country";
chart.startDuration = 1;
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 90;
categoryAxis.gridPosition = "start";
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);
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");
});
</script>
Но график так и не показывается.( что опять не так? Ведь все данные получены и обработаны.
Если кому интересно, решение было простое, в обработчике нужно было убрать