2013-10-23 44 views
0

我想使用AmChart并通过JSON从MySQL获取图表的数据。amchart JSON的多个数据

这是我的js来源:

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" 
} 
] 

我不知道问题是日期格式还是什么问题,当我测试这段代码时,我没有看到任何东西。

有人知道问题如何? 由于

回答

0

尝试图表设置日期的格式:

chart.dataDateFormat = “YYYY,MM,DD”;

请注意,您应该使用v3.X才能正常工作。

如果这不起作用,我可以帮忙看看你是如何构建图表的。

+0

感谢您的快速回答。我尝试了这个,问题没有解决。我包括在帖子中构建图表的来源。谢谢 – xandra

+0

我想你的数据是在图表初始化后加载的。尝试添加chart.validateNow();在$ .getJSON方法的结尾。 – zeroin