Showing two series on a ShieldUI JavaScript Chart having different dataStart properties

Question

I am trying to show some sales data using Shield UI JavaScriptChart. I have currently two series. The one contains data for the year 2012, and the second for 2013. Here is my code:

            dataSeries: [
            {
                seriesType:'splinearea',
                data: [13,25.6,157.2,111.6,112.8,51.58],
                dataStart: Date.UTC(2012, 0, 1),
                dataStep: 24 * 3600 * 1000 
            },
            {
                seriesType:'splinearea',
                data: [17,25.6,147.2,125.6,124.8,55.58],
                dataStart: Date.UTC(2013, 0, 1),
                dataStep: 24 * 3600 * 1000 
            },
            ]  

Strangely, the data I get are two tiny stripes in the beginning and in the end of the chart. Why so?

Answer 1

It is quite normal to get that result, since you are specifying two dataStarts where the distance between them is one whole year. What you can do is following: You need to retain the dataStarts being the same; even more I see you have the same amount of points so probably you need to have a point to point comparison. You may also add two collectionAllias properties, specifying that the one series is for 2012 and the other one for 2013:

            dataSeries: [
            {
                seriesType:'splinearea',
                data: [13,25.6,157.2,111.6,112.8,51.58],
                collectionAlias: "Sales 2012",
                dataStart: Date.UTC(2012, 0, 1),
                dataStep: 24 * 3600 * 1000 
            },
            {
                seriesType:'splinearea',
                data: [17,25.6,147.2,125.6,124.8,55.58],
                collectionAlias: "Sales 2013",
                dataStart: Date.UTC(2012, 0, 1),
                dataStep: 24 * 3600 * 1000 
            },
            ]

Using the above code you will be able to represent the sales for the beginnings of 2012 and 2013.