2013-10-23 4 views
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 소스입니다

문제가 날짜 형식인지 또는 문제인지는 모르겠지만이 코드를 테스트 할 때 아무 것도 볼 수 없습니다.

누군가 알고있는 문제는 무엇입니까? 차트 감사

답변

0

시도 설정 날짜 형식 :

chart.dataDateFormat = "YYYY, MM, DD"을;

참고 : 작동하려면 v3.X를 사용해야합니다.

이 방법이 도움이되지 않는 경우 차트 작성 방법을 알면 도움이 될 수 있습니다.

+0

답장을 보내 주셔서 감사합니다. 나는 이것을 시도하고 문제가 해결되지 않았다. 게시물에 차트를 작성하는 소스를 포함합니다. 감사합니다 – xandra

+0

나는 차트가 초기화 된 후 데이터가로드 된 것 같아요. chart.validateNow()를 추가해보십시오. $ .getJSON 메소드의 끝에서. – zeroin