Scatter Chart

Home >Shield UI Documentation >Chart >ASP.NET >Chart Types >Scatter Chart

The scatter charts represent data as a series of points with their X and Y axis co-ordinates. It very useful in cases where you want to find out how data point density is distributed with varying x and y co-ordinates.

scatter

The chart from the image above is created with the following code:

<shield:ShieldChart ID="ShieldChart1" Width="580px" Height="400px" runat="server" 
    OnTakeDataSource="ShieldChart1_TakeDataSource"
    CssClass="chart">
    <PrimaryHeader Text="Weather - Wind/Precipitation Values"></PrimaryHeader>
    <TooltipSettings>
        <AxixMarkers Enabled="true"  Mode="XY" Width="1" ZIndex="3"/>
    </TooltipSettings>
    <Legend RenderDirection="Vertical" Align="Right" VerticalAlign="Top"></Legend>
    <Axes>
        <shield:ChartAxisX> 
            <Title Text="Speed of Wind"></Title>
        </shield:ChartAxisX>
        <shield:ChartAxisY>
            <Title Text="RainFall Quantities"></Title>
        </shield:ChartAxisY>
    </Axes>
    <DataSeries>
        <shield:ChartScatterSeries EnableValueXSorting="false" DataFieldY="ValueX8" DataFieldX="ValueY8" CollectionAlias="January 2008">
        </shield:ChartScatterSeries>
            <shield:ChartScatterSeries EnableValueXSorting="false" DataFieldY="ValueX9" DataFieldX="ValueY9" CollectionAlias="January 2009">
        </shield:ChartScatterSeries>
            <shield:ChartScatterSeries EnableValueXSorting="false" DataFieldY="ValueX10" DataFieldX="ValueY10" CollectionAlias="January 2010">
        </shield:ChartScatterSeries>
    </DataSeries>
</shield:ShieldChart>

protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
{
    ShieldChart1.DataSource = new object[] 
    {
        new { ValueY8 = 16.4, ValueX8 = 5.4, ValueY9 = 6.4, ValueX9 = 13.4, ValueY10 = 21.7, ValueX10 = 3 }, 
        new { ValueY8 = 21.7, ValueX8 = 2  , ValueY9 = 1.7, ValueX9 = 11,   ValueY10 = 13.6, ValueX10 = 3.5 }, 
        new { ValueY8 = 25.4, ValueX8 = 3  , ValueY9 = 5.4, ValueX9 = 8,    ValueY10 = 13.6, ValueX10 = 3 }, 
        new { ValueY8 = 19,   ValueX8 = 2  , ValueY9 = 9,   ValueX9 = 17,   ValueY10 = 29.9, ValueX10 = 3 }, 
        new { ValueY8 = 10.9, ValueX8 = 1  , ValueY9 = 1.9, ValueX9 = 4,    ValueY10 = 21.7, ValueX10 = 20 }, 
        new { ValueY8 = 13.6, ValueX8 = 3.2, ValueY9 = 3.6, ValueX9 = 12.2, ValueY10 = 19,   ValueX10 = 2 }, 
        new { ValueY8 = 10.9, ValueX8 = 7.4, ValueY9 = 1.9, ValueX9 = 14.4, ValueY10 = 10.9, ValueX10 = 3 }, 
        new { ValueY8 = 10.9, ValueX8 = 0  , ValueY9 = 1.9, ValueX9 = 9,    ValueY10 = 28,   ValueX10 = 4 }, 
        new { ValueY8 = 10.9, ValueX8 = 8.2, ValueY9 = 1.9, ValueX9 = 13.2, ValueY10 = 27.1, ValueX10 = 0.3 }, 
        new { ValueY8 = 16.4, ValueX8 = 0  , ValueY9 = 1.4, ValueX9 = 7,    ValueY10 = 16.4, ValueX10 = 4 }, 
        new { ValueY8 = 16.4, ValueX8 = 1.8, ValueY9 = 6.4, ValueX9 = 8.8,  ValueY10 = 13.6, ValueX10 = 0 }, 
        new { ValueY8 = 13.6, ValueX8 = 0.3, ValueY9 = 3.6, ValueX9 = 4.3,  ValueY10 = 19,   ValueX10 = 5}, 
        new { ValueY8 = 13.6, ValueX8 = 0  , ValueY9 = 1.6, ValueX9 = 10,   ValueY10 = 16.4, ValueX10 = 3 }, 
        new { ValueY8 = 29.9, ValueX8 = 0  , ValueY9 = 9.9, ValueX9 = 2,    ValueY10 = 24.5, ValueX10 = 3 }, 
        new { ValueY8 = 27.1, ValueX8 = 2.3, ValueY9 = 7.1, ValueX9 = 15,   ValueY10 = 32.6, ValueX10 = 3 }, 
        new { ValueY8 = 16.4, ValueX8 = 0  , ValueY9 = 1.4, ValueX9 = 0,    ValueY10 = 27.1, ValueX10 = 4 }, 
        new { ValueY8 = 13.6, ValueX8 = 3.7, ValueY9 = 3.6, ValueX9 = 13.7, ValueY10 = 13.6, ValueX10 = 6 }, 
        new { ValueY8 = 10.9, ValueX8 = 5.2, ValueY9 = 1.9, ValueX9 = 15.2, ValueY10 = 13.6, ValueX10 = 8 }, 
        new { ValueY8 = 16.4, ValueX8 = 6.5, ValueY9 = 6.4, ValueX9 = 16.5, ValueY10 = 13.6, ValueX10 = 5 }, 
        new { ValueY8 = 10.9, ValueX8 = 0  , ValueY9 = 0.9, ValueX9 = 10,   ValueY10 = 10.9, ValueX10 = 4 }, 
        new { ValueY8 = 24.5, ValueX8 = 7.1, ValueY9 = 4.5, ValueX9 = 17.1, ValueY10 = 16.4, ValueX10 = 0 }, 
        new { ValueY8 = 10.9, ValueX8 = 0  , ValueY9 = 10.9,ValueX9 =  10,  ValueY10 = 32.6, ValueX10 = 10.3}, 
        new { ValueY8 = 8.1,  ValueX8 = 4.7, ValueY9 = 0.1, ValueX9 = 14.7, ValueY10 = 21.7, ValueX10 = 20.8}, 
        new { ValueY8 = 19,   ValueX8 = 0  , ValueY9 = 9,   ValueX9 = 10,   ValueY10 = 24.5, ValueX10 = 0.8}, 
        new { ValueY8 = 21.7, ValueX8 = 1.8, ValueY9 = 2.7, ValueX9 = 11.8, ValueY10 = 16.4, ValueX10 = 0}, 
        new { ValueY8 = 27.1, ValueX8 = 0  , ValueY9 = 2.1, ValueX9 = 10,   ValueY10 = 21.7, ValueX10 = 6.9 }, 
        new { ValueY8 = 24.5, ValueX8 = 0  , ValueY9 = 2.5, ValueX9 = 10,   ValueY10 = 13.6, ValueX10 = 7.7 }, 
        new { ValueY8 = 27.1, ValueX8 = 0 , ValueY9 = 27.1, ValueX9 = 10,   ValueY10 = 16.4, ValueX10 = 0}, 
        new { ValueY8 = 29.9, ValueX8 = 1.5, ValueY9 = 2.9, ValueX9 = 11.5, ValueY10 = 8.1,  ValueX10 = 0}, 
        new { ValueY8 = 27.1, ValueX8 = 0.8, ValueY9 = 7.1, ValueX9 = 10.8, ValueY10 = 16.4, ValueX10 = 0 }, 
        new { ValueY8 = 22.1, ValueX8 = 2  , ValueY9 = 2.1, ValueX9 = 12,   ValueY10 = 16.4, ValueX10 = 0}
    };
}
  • When the chart is bound to collection of objects the X values are got by the field which name is set into the DataFieldX property of the ChartScatterSeries. The Y values are got by the field which name is set into the DataFieldY property.
  • The name that is shown in the legend is chosen via the CollectionAlias property of the ChartScatterSeries.
  • By default all X values are sorted in order scatter chart to be shown appropriately, however this behavior is controlled by the EnableValueXSorting property of the ChartScatterSeries.
  • DataStart and DataStep properties control the start value of the x axis and explicit value for the interval between a data series member values.
  • All points from the ChartScatterSeries are represented with ChartSeriesItem which belongs to the ChartScatterSeries.Items collection.
    • The ChartScatterSeries.Items can be added declarative without data binding.
    • The data binding and declarative approach can be mixed. However in order declarative items to be appended to the items created from the datasource the ShieldChart.AppendDataBoundItems property need to be set to "true".
  • All setting related to ChartScatterSeries are contained into the ChartScatterSeries.Settings object.
    • The series color can be set via Color property.
    • If the AddToLegend is set to false the series is not added into the legend.
    • The animation of the series can be controlled by ChartScatterSeries.Settings.EnableAnimation and ChartScatterSeries.Settings.AnimationDuration properties.
    • Each point from the series can be selected if the EnablePointSelection property is set to true.
    • All selected points can be customized by Settings.PointMark.ActiveSettings.PointSelectedState object properties.
    • From the Settings.PointMark.ActiveSettings.PointHoveredState object properties you can change the appearance of each part when the user hovers it.
    • Each series has related tooltip which can be customized via the Settings.Tooltip object.
    • Each point from the series can have related text, which appearance is controlled by Settings.DataPointText property. You can changeBackgroundColor, BorderColor, Color, Padding, and TextAngle of the corresponding data point text.