0

Tengo la siguiente gráfica en Excel:

Grafica

Y la quiero pasar a las gráficas de Highcharts para poder utilizarla en un navegador, estoy utilizando asp y js.

Pero no logro el resultado que deseo, actualmente me queda de la siguiente manera:

Highcharts

El problema que tengo es que no logro mostrar una columna por cada día del año. Yo tendría que poder mostrar una columna por cada día del mes que sería el valor conseguido y atrás de ellos la meta. Si alguien puede ayudarme muchas gracias o indicarme que otra librería poder utilizar.

var grafica = {
    chart: {
        renderTo: 'container',
				type: 'column'
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 0
        }
    },
    series: []
};

var datosMes = function (data, name,colores) {
    var datosSeries = {
        name: name,
        data: data,
				color: colores
    };
    grafica.series.push(datosSeries);
    var chart = new Highcharts.Chart(grafica);
};
var data = [];

data = [5, 3, 2];
datosMes(data, 'Enero','red');

data = [2,3,2];
datosMes(data, 'Febrero','blue');

data = [2,3,2];
datosMes(data, 'Marzo','green');

data = [2,3,2];
datosMes(data, 'Abril','yellow');
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script><div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

1 respuesta 1

1

en el ejemplo de excel tienes dos series de datos, meta y actual (quizás se refiera a real) pero tu método datoMes esta agregando series no datos, entonces lo que estas haciendo es primero agregas la serie "Enero" después la serie "Febrero" después la serie "Marzo", etc. Entonces una de las formas de lograr el resultado que buscas es crear dos series, una serie llamada "Meta" y la otra llamada "Actual" y a estas series agregarles los datos.

var grafica = {
    chart: {
        renderTo: 'container',
				type: 'column'
    },
    xAxis:{
      type: 'datetime'
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 0
        }
    },
    series: [{
      name: 'Meta',
      type: 'column',
      color: 'blue',
      data: []
    },
    {
      name: 'Actual',
      type: 'column',
      color: 'red',
      data: []
    }
    ]
};
var FechaInicial = new Date(2018,0,1,0,0,0,0);

for(var i = 0; i < 365; i++){
  grafica.series[0].data.push([FechaInicial.getTime(), Math.floor((Math.random() * 10) + 1)]);
  grafica.series[1].data.push([FechaInicial.getTime(), Math.floor((Math.random() * 10) + 1)]);
  FechaInicial.setDate(FechaInicial.getDate()+1);
}

var chart = new Highcharts.Chart(grafica);
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.