date - hbar - zingchart pie

¿Cómo trazar los gráficos de WeekOnWeek en un gráfico de ZingChart?

Question

Intento trazar dos gráficos de líneas en un gráfico de ZingChart y me cuesta averiguar en qué formato debo pasar los datos.

Básicamente, tengo una matriz de pares timestamp / integer para datos de hoy y de una semana con intervalos de una hora, por ejemplo:

today = [[timestamp1, 1], [timestamp2, 4], ......, [timestamp18, 7]] <- suponiendo que ahora son las 6pm, por lo que no hay datos para el resto del día

week_ago = [[timestamp1, 4], [timestamp2, 7], ......, [timestamp23, 1]] <- datos completos de 24 horas

La serie x debería mostrar horas de 00:00 a 23:00 y la serie y solo es un número entero. Además, en cada punto gráfico me gustaría que la información sobre herramientas muestre la fecha y el valor entero.

Suena muy simple y probablemente lo sea, pero porque soy bastante nuevo en ZingChart no puedo entenderlo.

Muchas gracias

Answer 1

¿Es esto lo que estás tratando de hacer? Utilicé dos objetos en series para contener mis datos: el primero contiene los datos de las series temporales de hoy, y el segundo contiene los datos de las series temporales de la semana pasada. Aquí encontrará más información sobre los datos y las escalas de series de tiempo .

Luego, creé dos escalas de eje x . scaleX está vinculado al primer objeto de la serie (datos de hoy), y scaleX2 está vinculado al segundo objeto de la serie (o datos de la semana pasada). Tiene la opción de "mezclar" las dos escalas para que aparezcan en la misma línea del eje (pero esto se hace más comúnmente en el eje y). O puede desactivar la visibilidad del segundo eje x, que es lo que hice en la demostración siguiente.

Por supuesto, puede utilizar información sobre herramientas (desactivada en esta demostración), puntos de mira y / o una leyenda para explicar mejor sus datos.

var myConfig = {
  type: ''line'',
  utc: true, //If set to false, this will default to UTC time.
  timezone: -5, //Currently set to EST time. You can specify your desired time zone.
  scaleX: {
    minValue: 1471496400000,
    maxValue: 1471579200000,
    step: ''hour'',
    transform: {
      type: ''date'',
      all: ''%g%a''
    },
    label: {
      text: ''X-Axis''
    },
    item: {
      fontSize: 10
    }, 
    maxItems: 24
  },
  scaleX2: {
    minValue: 1470891600000,
    maxValue: 1470974400000,
    placement: ''default'',
    blended: true,
    visible: false,
    step: ''hour'',
    transform: {
      type: ''date'',
      all: ''%g%a''
    },
    item: {
      fontSize: 10
    }, 
  },
  scaleY: {
    values: ''0:10:1'',
    label: {
      text: ''Y-Axis''
    },
    item: {
      fontSize: 10
    },
    guide: {
      lineStyle: ''solid''
    }
  },
  plot: {
    tooltip: {
      visible: false
    }
  },
  crosshairX: {
    plotLabel: {
      multiple: true
    }
  },
 series: [
  { //Today, or 08/18/16 until 6am
    scales: ''scaleX, scaleY'',
    values: [
      [1471496400000, 3], //08/18/16 at midnight, EST time
      [1471500000000, 7], //1am
      [1471503600000, 5], //2am
      [1471507200000, 9], //3am
      [1471510800000, 4], //4am
      [1471514400000, 5], //5am
      [1471518000000, 2] //6am
    ],
    text: ''Today''
  },
  { //Last Thursday, or 08/11/16, all 24 hours
    scales: ''scaleX2, scaleY'',
    values: [
      [1470891600000, 5], //08/11/16 at midnight, EST time
      [1470895200000, 6], //1am
      [1470898800000, 4], //2am
      [1470902400000, 9], //3am
      [1470906000000, 1], //4am
      [1470909600000, 5], //5am
      [1470913200000, 6], //6am
      [1470916800000, 3], //7am
      [1470920400000, 5], //8am
      [1470924000000, 7], //9am
      [1470927600000, 8], //10am
      [1470931200000, 2], //11am
      [1470934800000, 3], //12am
      [1470938400000, 1], //1pm
      [1470942000000, 4], //2pm
      [1470945600000, 6], //3pm
      [1470949200000, 7], //4pm
      [1470952800000, 3], //5pm
      [1470956400000, 5], //6pm
      [1470960000000, 6], //7pm
      [1470963600000, 2], //8pm
      [1470967200000, 3], //9pm
      [1470970800000, 5], //10pm
      [1470974400000, 4] //11pm
    ],
    text: ''Last Week''
  }
 ],
 legend: {
   align: ''center'',
   verticalAlign: ''bottom'',
   marker: {
     type: ''circle'',
     size: 4,
     showLine: true
   },
   borderWidth: 1
 }
};
zingchart.render({ 
 id : ''myChart'', 
 data : myConfig, 
 height: 400, 
 width: 600
});

<head>
  <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
 </head>
 <body>
  <div id=''myChart''></div>
 </body>

Espero que ayude. Estoy en el equipo de ZingChart, y puedes dejarme saber si tienes más preguntas. Familiarizarse con nuestro Tutorial de Escalas debería darle una buena base para trabajar con nuestra biblioteca.