0
AmChart를 사용하고 JSON에서 MySQL의 차트 데이터를 가져오고 싶습니다.amchart multiple data by JSON
AmCharts.ready(function() {
//generateChartData();
createStockChart();
});
function createStockChart() {
var chart = new AmCharts.AmStockChart();
chart.pathToImages = "../amcharts/images/";
// DATASETS //////////////////////////////////////////
$.getJSON("jsonlistdisp.php", function (locdata) {
$.each(locdata, function (i, item) {
$.getJSON("jsonvaluedisp.php?id_disp="+locdata[i].id, function (data) {
var newDate = new Date(data.date);
newDate.setHours(data.hour);
var dataSet = new AmCharts.DataSet();
dataSet.title = locdata[i].name;
dataSet.fieldMappings = [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}];
dataSet.dataProvider = data;
dataSet.categoryField = newDate;
// set data sets to the chart
chart.dataSets.push(dataSet);
});
});
});
// PANELS ///////////////////////////////////////////
// first stock panel
var stockPanel1 = new AmCharts.StockPanel();
stockPanel1.showCategoryAxis = false;
stockPanel1.title = "Valor";
stockPanel1.percentHeight = 70;
// graph of first stock panel
var graph1 = new AmCharts.StockGraph();
graph1.valueField = "value";
graph1.comparable = true;
graph1.compareField = "value";
graph1.compareGraphBalloonText="[[value]] kwh"; //mostrar las unidades de medida en el balloon de las comparaciones
graph1.balloonText= "[[value]] kwh"; //mostrar las unidades de medida en el balloon
stockPanel1.addStockGraph(graph1);
// create stock legend
stockPanel1.stockLegend = new AmCharts.StockLegend();
stockPanel1.stockLegend.valueTextRegular="[[value]] kwh"; ////mostrar las unidades de medida en el legend
// second stock panel
var stockPanel2 = new AmCharts.StockPanel();
stockPanel2.title = "Volumen";
stockPanel2.percentHeight = 30;
var graph2 = new AmCharts.StockGraph();
graph2.valueField = "volume";
graph2.type = "column";
graph2.showBalloon = false;
graph2.fillAlphas = 1;
stockPanel2.addStockGraph(graph2);
stockPanel2.stockLegend = new AmCharts.StockLegend();
stockPanel2.stockLegend.valueTextRegular="[[value]] kwh"; ////mostrar las unidades de medida en el legend
// set panels to the chart
chart.panels = [stockPanel1, stockPanel2];
// OTHER SETTINGS ////////////////////////////////////
var scrollbarSettings = new AmCharts.ChartScrollbarSettings();
scrollbarSettings.graph = graph1;
scrollbarSettings.updateOnReleaseOnly = true;
scrollbarSettings.usePeriod = "10mm";
chart.chartScrollbarSettings = scrollbarSettings;
var cursorSettings = new AmCharts.ChartCursorSettings();
cursorSettings.valueBalloonsEnabled = true;
chart.chartCursorSettings = cursorSettings;
// PERIOD SELECTOR ///////////////////////////////////
var periodSelector = new AmCharts.PeriodSelector();
periodSelector.periods = [{
period: "hh",
count: 24,
label: "ddd"
}, {
period: "hh",
count: 48,
label: "dd"
}, {
period: "hh",
count: 120,
label: "ddd"
}, {
period: "hh",
count: 240,
label: "dia"
}, {
period: "MAX",
label: "MAX"
}];
chart.periodSelector = periodSelector;
var panelsSettings = new AmCharts.PanelsSettings();
panelsSettings.usePrefixes = true;
chart.panelsSettings = panelsSettings;
// DATA SET SELECTOR
var dataSetSelector = new AmCharts.DataSetSelector();
dataSetSelector.position = "left";
chart.dataSetSelector = dataSetSelector;
chart.write('chartdiv');
}
}
JSON 파일 "jsonlistdisp.php"결과 :
[
{
"id": "1",
"name": "dispositivo 1",
"desc": "dispositivo"
},
{
"id": "2",
"name": "dispositivo 2",
"desc": "dispositivo"
}
]
및 JSON 파일 "jsonvaluedisp.php"결과 :
[
{
"date": "2013,08,19",
"hour": "15,17,51,0",
"value": "0.393000",
"volume": "0.393000"
},
{
"date": "2013,08,19",
"hour": "15,30,01,0",
"value": "0.393000",
"volume": "0.393000"
}
]
이 내 JS 소스입니다
문제가 날짜 형식인지 또는 문제인지는 모르겠지만이 코드를 테스트 할 때 아무 것도 볼 수 없습니다.
누군가 알고있는 문제는 무엇입니까? 차트 감사
답장을 보내 주셔서 감사합니다. 나는 이것을 시도하고 문제가 해결되지 않았다. 게시물에 차트를 작성하는 소스를 포함합니다. 감사합니다 – xandra
나는 차트가 초기화 된 후 데이터가로드 된 것 같아요. chart.validateNow()를 추가해보십시오. $ .getJSON 메소드의 끝에서. – zeroin