Current filter:
                                You should refresh the page.
                                  • Hello Devexpress,

                                    I am using BootstrapchartControl with BootstrapChartLineSeries to represent various data with series and one datasource (DataTable). In the datatable I have one column which is used for values of  common argument axis and it can have only unique values (restriction due to calculation of some data for the different series).It is working and all is good.

                                    Now I want to draw a rectangle (OK Window) in the same BootstrapChartControl additional to the other series. I am using the BootstrapChartLineSeries to draw the rectangle (with 4 points). In the datatable I added a new column for this series (rectangle).  Now my problem is that I want to draw this rectangle using same argument axis which can have only unique values. I am not able to add two values (lower left point of rectangle and upper left point) for the same Argument.

                                    Could you please help me how to do this? Or Am I doing the wrong approach? Is there some other method to draw rectangle in BootStrapChartControl?

                                    Thanks and Regards,
                                    Gaurav

                                • Helen (DevExpress Support) 10.02.2019

                                  Hi Gaurav,
                                   
                                  Your scenario is not entirely clear to me. What is the purpose of this custom rectangle? If possible, send us a picture of the desired output.
                                  Currently, I suggest that you check the following demos:
                                  Constant Lines
                                  Axis Breaks
                                  They show how to display supplementary elements on a chart.

                                • Gaurav Chawla 10.02.2019

                                  Hello,
                                  please find attached the picture. I want to have this green rectangle ilike this. Constant lines and axis breaks would be not so helpful as I want to have a rectangle "window".
                                   

                                • Helen (DevExpress Support) 10.03.2019

                                  Hi Gaurav,
                                   
                                  BootstrapChart does not have a special API to draw custom shapes in the chart area. As for a possible workaround, it's difficult to suggest a correct one, because the purpose of this rectangle is still not entirely clear. What does it show? Is it static or can its position and shape be changed? Is it a part of your chart or it is a UI element? Please describe your scenario in greater detail.

                                • Gaurav Chawla 10.09.2019

                                  Hello Helen,

                                  This rectangle shows the "OK Window". That means the series (data points) that is inside this window is ok and the series outside this rectangle is not ok. It is static. For each series, there must be one rectangle. So, there can be many rectangles at the same time. It should be part of chart. For example in the picture attached, blue series is outside of green rectangle.

                                1 Solution

                                Creation Date Importance Sort by

                                Hello Gaurav,

                                Thank you for the clarification. Currently, BootstrapChart provides only one mechanism to indicate limitations - Constant Lines. So it does not have a built-in way to draw a rectangle in its chart area.
                                The approach with a separate chart series is a way to go, but it requires disabling the default sorting in the chart via the BootstrapChartDataPrepareSettings.SortingMethod property.
                                I've attached a sample project to demonstrate this solution.

                                • Gaurav Chawla 10.09.2019

                                  Hi Helen,

                                  Thank you so much for the answer. Yes it is working although when I have DataTable as DataSource (and not Json) then even when I set BootstrapChartDataPrepareSettings.SortingMethod to false, I still get the same image (as attached) as if the SortingMethod is true. (Tested your project with this setting equals true wth json as datasource) and not the rectangle.

                                  Should I need to "switch off" sorting (somehow) in Datatable as well?

                                   The code for DataTable:

                                  DataTable dataSource = new DataTable();

                                  dataSource.Columns.Add(column1);
                                  dataSource.Columns.Add(column2);
                                  DataRow r = dataSource.NewRow();
                                  dataSource.Rows.Add(r);

                                  r = dataSource.NewRow();
                                  dataSource.Rows.Add(r);
                                  r = dataSource.NewRow();
                                  dataSource.Rows.Add(r);
                                  r = dataSource.NewRow();
                                  dataSource.Rows.Add(r);
                                  r = dataSource.NewRow();
                                  dataSource.Rows.Add(r);
                                  dataSource.Rows[0][column1] =20;
                                  dataSource.Rows[1][column1] = 20;
                                  dataSource.Rows[2][column1] =180;
                                  dataSource.Rows[3][column1] = 180;
                                  dataSource.Rows[4][column1] = 20;

                                  dataSource.Rows[0][column2] = 20;
                                  dataSource.Rows[1][column2] = 180;
                                  dataSource.Rows[2][column2] = 180;
                                  dataSource.Rows[3][column2] = 20;
                                  dataSource.Rows[4][column2] = 20;
                                  btstrpChart.DataSource = dataSource;
                                  btstrpChart.DataBind();

                                  Thanks.

                                • Gaurav Chawla 10.09.2019

                                  Sorry forgot to attch the image. Please find it here.

                                • Helen (DevExpress Support) 10.10.2019

                                  Hello Gaurav,

                                  Make sure that you've specified the DataColumn type:

                                  [C#]
                                  DataColumn column1 = new DataColumn("hydroWindowVal", typeof(int)); DataColumn column2 = new DataColumn("hydroWindowArg", typeof(int));

                                  When I bind the BootstrapChart control to the DataTable with such columns, it works as expected:

                                • Gaurav Chawla 10.10.2019

                                  It works!! Thanks a lot :)

                                • Helen (DevExpress Support) 10.10.2019

                                  I'm happy to help :)