Select Scatter Chart > Overview |
The Select Scatter chart is a special type of chart that allows users to visually select a subset of data from the given data points. Essentially, it's a extension of XY Plot Chart (Scatter Chart) from FusionCharts v3 with the added functionality of selecting any number of points on the chart and returning them back to server (or JavaScript functions for further processing). This can be used for a variety of purposes, where you want your users to visually select data from the scatter chart. A finished chart looks as under: |
![]() |
As you can see above, the chart is basically an XY Plot chart. Each data point is represented as a scatter point. You can opt to connect these points by lines too. The end user process for interacting with this chart can be listed as under: |
| Step 1: The chart is presented to the user with all the data points, from which we can select. |
![]() |
| Step 2: To select a set of points, the user can drag and draw a rectangle over the chart. All the points within this rectangle are now selected points. |
![]() |
| Once the select rectangle has been drawn, the user can resize it to adjust more points. The resize handlers lets the users do so. |
![]() |
| Shown below is resize handler in action. |
![]() |
| If the user wants to move the selection rectangle, he can right click on it, select "Drag Selection". |
![]() |
| Resize rectangle in drag mode. |
![]() |
| Step 3: To select more scattered data points, the user can add additional select rectangles on the chart. The process to add another select rectangle is same. Click anywhere in the chart canvas and draw a rectangle. |
![]() |
| Shown below is an example where 4 select rectangles have been added to the chart. |
![]() |
| You can drag, resize or delete any select rectangles individually, by right clicking on them and then selecting the appropriate option. |
![]() |
| To delete any select rectangle, one can choose Delete section from context menu. |
![]() |
| And the rectangle will be gone. |
![]() |
| Step 4: Once the selection process is over, the user can click Submit button. This button posts the XML data as form to your server side script. Shown below is an example, where we've just displayed the XML data for selected points. In your apps, you could process this data and put into more meaningful use. |
![]() |