Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

245
Views
poblando la serie Highchart haciendo un bucle de mi consulta cada mes

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] }] }); }
over 4 years ago · Santiago Trujillo
1 answers
Answer question

0

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]);
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!