Quiero completar los datos de mi serie de Highchart. Lo que estaba haciendo aquí es obtener mi eje x con mi primer ajax (devuelve meses), y me da meses, y cada mes que obtenía, lo repetía cada mes. Obtuve otros datos para mi serie. ..
Aquí está mi primer ajax: me da una salida de estos: [{"datemonths":"February"},{"datemonths":"April"}]
function getbarxAxis() { $.ajax({ url: siteurl+"patients_report/bardata_date", type: "POST", dataType: "JSON", success: function(data) { var categories = new Array(); for (var i in data) { categories.push(data[i]["datemonths"]); getbarseries(data[i]["datemonths"]); } loadChart(categories); } }); }Estoy muy confundido, ¿cómo puedo formar los datos de mi serie y pasar mis datos a la serie? ¿Cómo puedo hacer esto? aquí está mi segundo código de la función que estaba dentro del ciclo en mi primer ajax: en estos ajax me da dos datos JSON porque el primer ajax me da dos meses
Primer bucle: [{"clinic_name":"Clinic 1","total_checked_up":"4"}]
Segundo bucle: [{"clinic_name":"Clinic 2","total_checked_up":"1"},{"clinic_name":"Clinic 3","total_checked_up":"1"}]
function getbarseries(month) { $.ajax({ url: siteurl+"patients_report/bardataclinic/"+month, type: "POST", dataType: "JSON", success: function(data) { alert(data); } }); }Aquí está la función donde quiero modificarla desde el código anterior, ahora logro cambiar el eje x y ahora estoy confundido, ¿cómo puedo hacer para cambiar también los datos predeterminados de la serie para que sean dinámicos en función de mis datos de la base de datos? . Aquí está:
function loadChart(categories) { Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: '' }, xAxis: { categories: categories }, yAxis: { min: 0, title: { text: 'Detailed patient per clinic' } }, legend: { reversed: true }, plotOptions: { series: { stacking: 'normal' } }, series: [{ name: 'John', data: [5, 3, 4, 7, 3, 2] }, { name: 'Jane', data: [2, 2, 3, 2, 4, 2] }, { name: 'Joe', data: [3, 4, 4, 2, 1, 3] }] }); }Un enfoque posible es:
1) tenga una variable global que aloje la referencia al gráfico de gráficos altos que cree:
var chart; function loadChart(categories) { chart = Highcharts.chart('container', { chart: { type: 'bar' }, title: { text: '' }, xAxis: { categories: categories }, yAxis: { min: 0, title: { text: 'Detailed patient per clinic' } }, legend: { reversed: true }, plotOptions: { series: { stacking: 'normal' } } }); }Luego, cuando haya terminado de cargar datos de su segunda llamada ajax, puede usar la siguiente API para agregar datos de series: http://api.highcharts.com/highcharts/Chart.addSeries
(Es por eso que necesitaba una variable para hacer referencia a la instancia del gráfico)
// data should be in correct form for highcharts series function populate_data( data ){ chart.addSeries(data); };Como nota al margen, su código necesita estructura, ya que la "placa de caldera" se vuelve difícil de administrar muy rápido.
Ejemplo de cómo agregar datos de series en diferentes llamadas: http://jsfiddle.net/gpusx8ze/
var chart; function doAxis( axis ){ chart = Highcharts.chart('container', { xAxis: { categories:axis }, plotOptions: { series: { stacking: 'normal' } } }); } function doData( data ){ chart.addSeries({ data: data }) } doAxis( ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']); doData( [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]); doData( [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2]);