Geek Answers Handbook

How to build WeekOnWeek charts on one ZingChart chart?

I am trying to build two line graphs on the same ZingChart graph and struggling to figure out in which format I should transfer the data.

Basically, I have an array of label / integer pairs for today's and weekly data at one-hour intervals, for example:

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

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

Series x should show hours from 00:00 to 23:00, and series y should show integers. In addition, at every point in the graph, I would like a tooltip to show the date and integer value.

It sounds very simple and probably just because I'm completely new to ZingChart, I can't figure it out.

Thank you so much

+7
date graph charts plot zingchart
source share
1 answer

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

Then I created two scales on the x axis . scaleX tied to the object of the first series (today the data), and scaleX2 tied to the second object of the series (or data last week). You have the ability to “mix” the two scales so that they are displayed on the same axis. (but this is most often done on the y-axis). Or you can turn off the visibility of the second x axis, which I did in the demo below.

You can, of course, use tooltips (disabled in this demo), crosshairs and / or 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 this helps. I am on the ZingChart team and you can let me know if you have additional questions. Familiarity with our Weight Guide should give you a good foundation for working with our library.

+7
source share

More articles:


All Articles