How to plot WeekOnWeek graphs on one ZingChart chart?

Question

I'm trying to plot two line graphs on one ZingChart chart and struggling to figure out in what format I should pass the data.

Basically, I have an array of timestamp/integer pairs for today's and week ago data with one hour intervals e.g.:

today = [[timestamp1, 1], [timestamp2, 4], ......, [timestamp18, 7]] <-- assuming now it's 6pm so there is no data for the rest of the day

week_ago = [[timestamp1, 4], [timestamp2, 7], ......, [timestamp23, 1]] <-- full 24 hours data

The x-series should show hours from 00:00 to 23:00 and y-series is just integer. Also, on each graph point I'd like the tooltip to show the date and the integer value.

It sounds very simple and probably is but because I'm quite new to ZingChart I cannot figure it out.

Thanks a lot

score 7 · Answer 1 · answered Aug 18 '16 at 19:52

Is this what you're trying to do? I used two series objects to contain my data: the first contains the time-series data for today, and the second contains the time-series data for last week. There's more information on time-series data and scales here.

Next, I created two x-axis scales. scaleX is tied to the first series object (today's data), and scaleX2 is tied to the second series object (or last week's data). You have the option to "blend" the two scales so that they appear on the same axis line (but this is more commonly done on the y-axis). Or you can turn off the visibility of the second x-axis, which is what I did in the below demo.

You can of course use tooltips (turned off on this demo), crosshairs, and/or a legend to further explain your data.

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>

Hope that helps. I'm on the ZingChart team, and you can let me know if you have further questions. Familiarizing yourself with our Scales Tutorial should give you a good foundation for working with our library.

How to plot WeekOnWeek graphs on one ZingChart chart?

1 Answers1