igDataChart not displaying lines with some datasets

Ethan P posted over 2 years ago

I'm using an igDataChart to display one or more lines on a chart and I'm getting a weird behavior where some datasets allow for several lines to be displayed at once while others will cause the chart to be blank. The datasets that cause the chart to be blank do work when only one of them is on the chart at a time however. The following code is what generates the chart.

$(chartID).igDataChart({
            width: "1300px",
            height: "600px",
            title: chartTitle,
            legend: { 
                element: 'legend', 
                type: 'legend',
            },
            dataSource: fuelData,
            axes: [{
                name: "xAxis",
                type: "categoryDateTimeX",
                title: "Date & Time of Fuel Price(s)",
                dataSource: uniqueDates,
                dateTimeMemberPath: "dateTime",
                label: "dateTime",
                labelAngle: 0,
                formatLabel: function(item) {
                    var res = '';
                    res += item.getMonth() + 1;
                    res += "/";
                    res += item.getDate();
                    res += "/";
                    res += item.getFullYear();
                    res += '  '
                    return res;
                },
                labelTextStyle: "9pt Verdana",
                }, 
                {
                    name: "yAxis",
                    type: "numericY",
                    title: "Diesel Fuel Price(s)",
                    labelTextStyle: "9pt Verdana",
            }],
            series: seriesStates
        });

Here is the series data for a chart that properly displays two lines.

seriesStates = [{"type":"line","dataSource":[{"id":13375,"dateTime":"2022-06-01T12:06:44.993Z","state":"Oregon","regular":5.24,"midGrade":5.4,"premium":5.61,"diesel":5.74},{"id":13426,"dateTime":"2022-06-02T12:06:42.623Z","state":"Oregon","regular":5.27,"midGrade":5.42,"premium":5.63,"diesel":5.78},{"id":13477,"dateTime":"2022-06-03T12:06:57.243Z","state":"Oregon","regular":5.32,"midGrade":5.47,"premium":5.67,"diesel":5.84},{"id":13528,"dateTime":"2022-06-04T12:06:47.707Z","state":"Oregon","regular":5.38,"midGrade":5.52,"premium":5.73,"diesel":5.91},{"id":13579,"dateTime":"2022-06-05T12:06:52.733Z","state":"Oregon","regular":5.4,"midGrade":5.57,"premium":5.76,"diesel":5.95},{"id":13630,"dateTime":"2022-06-06T12:07:08.413Z","state":"Oregon","regular":5.42,"midGrade":5.58,"premium":5.78,"diesel":5.98},{"id":13681,"dateTime":"2022-06-07T12:06:57.173Z","state":"Oregon","regular":5.46,"midGrade":5.61,"premium":5.81,"diesel":6.03},{"id":13732,"dateTime":"2022-06-08T12:07:08.023Z","state":"Oregon","regular":5.49,"midGrade":5.65,"premium":5.85,"diesel":6.08},{"id":13783,"dateTime":"2022-06-09T12:07:22.297Z","state":"Oregon","regular":5.51,"midGrade":5.67,"premium":5.87,"diesel":6.11},{"id":13834,"dateTime":"2022-06-10T12:06:44.397Z","state":"Oregon","regular":5.52,"midGrade":5.69,"premium":5.89,"diesel":6.14},{"id":13885,"dateTime":"2022-06-11T12:07:19.960Z","state":"Oregon","regular":5.54,"midGrade":5.71,"premium":5.9,"diesel":6.16},{"id":13936,"dateTime":"2022-06-12T12:07:17.973Z","state":"Oregon","regular":5.54,"midGrade":5.71,"premium":5.91,"diesel":6.16},{"id":13987,"dateTime":"2022-06-13T12:07:01.990Z","state":"Oregon","regular":5.54,"midGrade":5.71,"premium":5.91,"diesel":6.15},{"id":14038,"dateTime":"2022-06-14T12:06:51.307Z","state":"Oregon","regular":5.54,"midGrade":5.72,"premium":5.92,"diesel":6.17}],"markerType":"circle","xAxis":"xAxis","yAxis":"yAxis","name":"Oregonseries","title":"Oregon","valueMemberPath":"diesel","isTransitionInEnabled":true,"isHighlightingEnabled":true,"showTooltip":true,"thickness":2},{"type":"line","dataSource":[{"id":13384,"dateTime":"2022-06-01T12:06:44.993Z","state":"Washington","regular":5.25,"midGrade":5.44,"premium":5.63,"diesel":5.81},{"id":13435,"dateTime":"2022-06-02T12:06:42.623Z","state":"Washington","regular":5.27,"midGrade":5.47,"premium":5.65,"diesel":5.83},{"id":13486,"dateTime":"2022-06-03T12:06:57.243Z","state":"Washington","regular":5.31,"midGrade":5.5,"premium":5.67,"diesel":5.87},{"id":13537,"dateTime":"2022-06-04T12:06:47.707Z","state":"Washington","regular":5.36,"midGrade":5.53,"premium":5.72,"diesel":5.93},{"id":13588,"dateTime":"2022-06-05T12:06:52.733Z","state":"Washington","regular":5.39,"midGrade":5.55,"premium":5.75,"diesel":5.97},{"id":13639,"dateTime":"2022-06-06T12:07:08.413Z","state":"Washington","regular":5.41,"midGrade":5.56,"premium":5.75,"diesel":5.99},{"id":13690,"dateTime":"2022-06-07T12:06:57.173Z","state":"Washington","regular":5.46,"midGrade":5.62,"premium":5.8,"diesel":6.05},{"id":13741,"dateTime":"2022-06-08T12:07:08.023Z","state":"Washington","regular":5.49,"midGrade":5.66,"premium":5.85,"diesel":6.1},{"id":13792,"dateTime":"2022-06-09T12:07:22.297Z","state":"Washington","regular":5.51,"midGrade":5.69,"premium":5.88,"diesel":6.14},{"id":13843,"dateTime":"2022-06-10T12:06:44.397Z","state":"Washington","regular":5.53,"midGrade":5.71,"premium":5.9,"diesel":6.17},{"id":13894,"dateTime":"2022-06-11T12:07:19.960Z","state":"Washington","regular":5.54,"midGrade":5.74,"premium":5.92,"diesel":6.2},{"id":13945,"dateTime":"2022-06-12T12:07:17.973Z","state":"Washington","regular":5.54,"midGrade":5.74,"premium":5.92,"diesel":6.2},{"id":13996,"dateTime":"2022-06-13T12:07:01.990Z","state":"Washington","regular":5.55,"midGrade":5.73,"premium":5.92,"diesel":6.21},{"id":14047,"dateTime":"2022-06-14T12:06:51.307Z","state":"Washington","regular":5.55,"midGrade":5.75,"premium":5.94,"diesel":6.23}],"markerType":"circle","xAxis":"xAxis","yAxis":"yAxis","name":"Washingtonseries","title":"Washington","valueMemberPath":"diesel","isTransitionInEnabled":true,"isHighlightingEnabled":true,"showTooltip":true,"thickness":2}]

And here is the series data for a chart that does not properly display two lines.

seriesStates = [{"type":"line","dataSource":[{"id":13393,"dateTime":"2022-06-01T12:06:44.993Z","state":"California","regular":6.19,"midGrade":6.38,"premium":6.52,"diesel":6.68},{"id":13444,"dateTime":"2022-06-02T12:06:42.623Z","state":"California","regular":6.21,"midGrade":6.4,"premium":6.54,"diesel":6.71},{"id":13495,"dateTime":"2022-06-03T12:06:57.243Z","state":"California","regular":6.25,"midGrade":6.42,"premium":6.56,"diesel":6.75},{"id":13546,"dateTime":"2022-06-04T12:06:47.703Z","state":"California","regular":6.3,"midGrade":6.47,"premium":6.61,"diesel":6.82},{"id":13597,"dateTime":"2022-06-05T12:06:52.733Z","state":"California","regular":6.33,"midGrade":6.5,"premium":6.64,"diesel":6.85},{"id":13648,"dateTime":"2022-06-06T12:07:08.413Z","state":"California","regular":6.34,"midGrade":6.52,"premium":6.66,"diesel":6.88},{"id":13699,"dateTime":"2022-06-07T12:06:57.173Z","state":"California","regular":6.37,"midGrade":6.55,"premium":6.69,"diesel":6.92},{"id":13750,"dateTime":"2022-06-08T12:07:08.023Z","state":"California","regular":6.39,"midGrade":6.57,"premium":6.71,"diesel":6.94},{"id":13801,"dateTime":"2022-06-09T12:07:22.297Z","state":"California","regular":6.4,"midGrade":6.59,"premium":6.73,"diesel":6.96},{"id":13852,"dateTime":"2022-06-10T12:06:44.397Z","state":"California","regular":6.42,"midGrade":6.61,"premium":6.74,"diesel":6.97},{"id":13903,"dateTime":"2022-06-11T12:07:19.960Z","state":"California","regular":6.43,"midGrade":6.62,"premium":6.75,"diesel":6.99},{"id":13954,"dateTime":"2022-06-12T12:07:17.973Z","state":"California","regular":6.43,"midGrade":6.63,"premium":6.76,"diesel":6.99},{"id":14005,"dateTime":"2022-06-13T12:07:01.990Z","state":"California","regular":6.44,"midGrade":6.62,"premium":6.77,"diesel":6.99},{"id":14056,"dateTime":"2022-06-14T12:06:51.307Z","state":"California","regular":6.44,"midGrade":6.63,"premium":6.77,"diesel":7}],"markerType":"circle","xAxis":"xAxis","yAxis":"yAxis","name":"Californiaseries","title":"California","valueMemberPath":"diesel","isTransitionInEnabled":true,"isHighlightingEnabled":true,"showTooltip":true,"thickness":2},{"type":"line","dataSource":[{"id":13394,"dateTime":"2022-06-01T12:06:44.993Z","state":"Colorado","regular":4.37,"midGrade":4.69,"premium":4.98,"diesel":5.33},{"id":13445,"dateTime":"2022-06-02T12:06:42.623Z","state":"Colorado","regular":4.44,"midGrade":4.75,"premium":5.04,"diesel":5.35},{"id":13496,"dateTime":"2022-06-03T12:06:57.243Z","state":"Colorado","regular":4.49,"midGrade":4.8,"premium":5.08,"diesel":5.36},{"id":13547,"dateTime":"2022-06-04T12:06:47.707Z","state":"Colorado","regular":4.57,"midGrade":4.87,"premium":5.17,"diesel":5.38},{"id":13598,"dateTime":"2022-06-05T12:06:52.733Z","state":"Colorado","regular":4.61,"midGrade":4.92,"premium":5.22,"diesel":5.39},{"id":13649,"dateTime":"2022-06-06T12:07:08.413Z","state":"Colorado","regular":4.63,"midGrade":4.94,"premium":5.24,"diesel":5.4},{"id":13700,"dateTime":"2022-06-07T12:06:57.173Z","state":"Colorado","regular":4.73,"midGrade":5.04,"premium":5.33,"diesel":5.47},{"id":13751,"dateTime":"2022-06-08T12:07:08.023Z","state":"Colorado","regular":4.77,"midGrade":5.09,"premium":5.38,"diesel":5.49},{"id":13802,"dateTime":"2022-06-09T12:07:22.297Z","state":"Colorado","regular":4.8,"midGrade":5.12,"premium":5.41,"diesel":5.5},{"id":13853,"dateTime":"2022-06-10T12:06:44.397Z","state":"Colorado","regular":4.83,"midGrade":5.15,"premium":5.43,"diesel":5.5},{"id":13904,"dateTime":"2022-06-11T12:07:19.960Z","state":"Colorado","regular":4.86,"midGrade":5.18,"premium":5.47,"diesel":5.51},{"id":13955,"dateTime":"2022-06-12T12:07:17.973Z","state":"Colorado","regular":4.87,"midGrade":5.2,"premium":5.5,"diesel":5.52},{"id":14006,"dateTime":"2022-06-13T12:07:01.990Z","state":"Colorado","regular":4.88,"midGrade":5.2,"premium":5.5,"diesel":5.52},{"id":14057,"dateTime":"2022-06-14T12:06:51.307Z","state":"Colorado","regular":4.89,"midGrade":5.22,"premium":5.52,"diesel":5.52}],"markerType":"circle","xAxis":"xAxis","yAxis":"yAxis","name":"Coloradoseries","title":"Colorado","valueMemberPath":"diesel","isTransitionInEnabled":true,"isHighlightingEnabled":true,"showTooltip":true,"thickness":2}]

I don't think the series data is the issue but I'm not sure what else would cause some charts to display fine and others to not when the only thing changing between them is the series data.

Image of working chart:

Image of non working chart:

Top Replies

640

Offline Viktor Kombov posted over 2 years ago +1 verified
Hello Ethan, Thank you for posting in our community. I have created a small sample , trying to reproduce the described behavior. I have used the code...view reply »

640

Verified Answer
Offline Viktor Kombov posted over 2 years ago

Hello Ethan,

Thank you for posting in our community.

I have created a small sample, trying to reproduce the described behavior. I have used the code that you have shared in order to generate the chart. On my side everything works as expected with both data sets.

Please test the sample on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own isolated sample, where the issue is reproducible. Please keep in mind to remove any dependencies and code that is not directly related to the issue.

Having a sample, which I can debug on my side, will be highly appreciated and extremely helpful for providing you with solution as soon as possible.

Please note that the data sources of the both series that is represented by the chart should be with the same length as the length of the data source of the xAxis.

Thank you for your cooperation.

Looking forward to hearing from you.

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.
Cancel
Reply

Reject Answer

Cancel