2013-07-17 3 views
0

ajax 호출 후 내 document.ready 함수 내에서 그래프를로드하려고합니다.json 파일로 하이 차트 그래프로드

JSON PHP를 통해 생성되고,이 결과이다

[{ "이름": "Precios", "데이터"[ "5.50", "2013년 7월 1일 13시 50분 : 00 "], ["6.50 ","2013년 7월 5일 11시 4분 0초 "]}]

이 코드를 사용하여 JSON의 데이터 부분을 그래프로 시도하고 :

var options = { 
chart: { 
     renderTo: 'graphContainer', 
    defaultSeriesType: 'line', 
    marginRight: 130, 
    marginBottom: 25 
}, 

title: { 
    text: 'Registro de Precios', 
    x: -20 //center 
}, 
    subtitle: { 
    text: 'Producto: '+nombreProducto, 
    x: -20 //center 
}, 

xAxis: { 
    labels: { 
     enabled: false 
    }, 
    title: { 
    text: 'Fecha' 
    } 
}, 

yAxis: [ 
    { 
    min: 0, 
    title: { 
     text: 'Precio' 
    } 
    }, 
    { 
    linkedTo: 0, 
     opposite: true 
    } 
], 

legend: { 
    layout: 'vertical', 
    align: 'right', 
    verticalAlign: 'top', 
    x: -10, 
    y: 100, 
    borderWidth: 0 
}, 

series: [] 
}; 
$jDatepicker.getJSON('graficasDatos.php?idTienda='+idTienda+'&idProducto='+idProducto, function(data) {   

    $jDatepicker.each(data, function(key, value) { 
var series = {}; 
$jDatepicker.each(value, function(key,val) { 
    if(key == 'name') 
    { 
    series.name = val; 
    } 
    else{ 
    var datos; 
    $jDatepicker.each(val, function(key,val) { 
     datos = val; 
     var x = datos[1]; 
     var y = datos[0]; 
     series.data = [x,y]; 
     options.series.push(series); 
    }); 
    } 
}); 
}); 
var chart = new Highcharts.Chart(options); 

내가 뭘 잘못하고 있는지, 왜 그래프가 보이지 않는지에 대한 조언은 감사 할 것입니다.

답변

0

날짜는 시간 소인 (밀리 초 단위의 시간)이어야하며 값은 문자열이 아닌 숫자 여야합니다.

0

내가 그냥을 바꾸기로했다, 나는 그것이 작동시킬 수 있었다

를 해결했다.

[{ "행":

내가이 얻을 수있는 JSON을 수정 [{ "precio": "5.50", "fecha": "2013년 7월 1일를"}, { "precio" "6.50", "fecha": "2013-07-05"}], "fechas": [{ "fecha": "2013-07-01"}, { "fecha": "2013-07-05"} ] "이름": "Precio"}]

그리고이있는 업데이트 된 코드 :

var chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'graphContainer', 
    showAxes: true, 
    borderWidth: 1 
}, 
title: {      
     text: 'Precios registrados del producto' 
}, 
credits: { 
    text: 'GTSF' 
}, 
xAxis: { 
    type: 'datetime', 
    title: { 
    text: 'Fecha', 
    align: 'high' 
    }, 
    labels: { 
    rotation: -45, 
    align : 'center', 
    y: 40, 
    x: -20 
    }, 
    categories: [] 
}, 
yAxis: { 
    title: { 
    text: 'Precio ($)' 
    } 
}, 
plotOptions: { 
    line: { 
    allowPointSelect: true 
    } 
} 
}); 

// Kick off the loading screen 
chart.showLoading("Obteniendo precios de producto "+ nombreProducto +" ...."); 

$jDatepicker.getJSON('graficasDatos.php?idTienda='+idTienda+'&idProducto='+idProducto, function(stockData) {   

    // Construct series data and add the series 
var seriesData = []; 
var categoriesArray = []; 

    $jDatepicker.each(stockData[0].rows, function(idx, data) { 
    precio = parseFloat(data.precio); 
    seriesData.push([ data.fecha, precio ]); 
}); 

$jDatepicker.each(stockData[0].fechas, function(idx, data) { 
    categoriesArray.push(data.fecha); 
}); 

var seriesOpts = { 
    name: stockData[0].name, 
    data: seriesData, 
    // This is to stop Highcharts rotating the color 
    // for the series 
    color: chart.options.colors[0], 
    marker: { 
     symbol: chart.options.symbols[0] 
    } 
} 

chart.options.xAxis.categories = categoriesArray; 

chart.hideLoading(); 
chart.addSeries(seriesOpts, false); 
//chart.addAxis(axisOpts, true); 
chart.redraw(); 
}); 

나는이 사람을 도울 수 있기를 바랍니다 : D

관련 문제