Search code examples
shieldui

How to render two Shield UI Charts to one container?


I am trying to place two Shield UI Charts in the same container. The one chart is line-type and the other- area. However it seems that the second chart is replacing the first one, so as a result I’ve got only the area chart to see. Below is my code:

                $("#container2").shieldChart(
                    {
                        exportOptions:
                        {
                            image: false,
                            print: false
                        },
                        primaryHeader: {
                            text: headerText
                        },

                        dataSeries: [
                            {
                                seriesType: 'line',
                                collectionAlias: 'Q Data',
                                data: localData
                            }
                        ]
                    }
                    );
                $("#container2").shieldChart(
                    {
                        exportOptions:
                        {
                            image: false,
                            print: false
                        },
                        primaryHeader: {
                            text: headerText
                        },

                        dataSeries: [
                            {
                                seriesType: 'area',
                                collectionAlias: 'Q Data',
                                data: localData
                            }
                        ]
                    }
                    );  

Solution

  • Each chart is completely and entirely rendered to a container, and to put it simple no other charts can be rendered to it in any given moment. I see you are using a single series charts, so first of all you can simply place the series in one chart. Or you could simply place another container on the page, since having two containers will visually not reflect the appearance of the charts.