Search code examples
c#asp.netchartsasp.net-charts

Create XY Scatter in ASP.NET


I have two arrays of data that I would like to display in an XY scatter. I've downloaded the ASP.NET libraries and am wondering how to display the data. This is as far as I've gotten on the front end and was wondering if anyone has suggestions on what the next steps would be (i.e. how do I bind the array data to the x and y axes?)

thanks

<asp:Chart runat="server" ID="scatter" Width="500px" Height="500px">
    <Series>
        <asp:Series Name="Series1" MarkerSize="10" ChartType="Point">
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"
            BackSecondaryColor="White" BackColor="Gainsboro" ShadowColor="Transparent" BackGradientStyle="TopBottom">
            <Area3DStyle Rotation="10" Perspective="10" Inclination="15" IsRightAngleAxes="False"
                WallWidth="0" IsClustered="False" />
            <AxisY LineColor="64, 64, 64, 64">
                <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                <MajorGrid LineColor="64, 64, 64, 64" />
            </AxisY>
            <AxisX LineColor="64, 64, 64, 64">
                <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
                <MajorGrid LineColor="64, 64, 64, 64" />
            </AxisX>
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

Also do you know how to allow the datapoints to show their values when the user hovers over them?


Solution

  • Does one array contain X values and the other Y, or do both contain Y values?

    If the former, you could use the DataBindXY method.

    double [] xArray= { 2.8, 4.4, 6.5, 8.3, 3.6, 5.6, 7.3, 9.2, 1.0};
    double [] yArray = { 3.1, 2.7, 4.6, 3.5, 3.3, 1.5, 4.5, 2.5, 2.1}; 
    Chart1.Series["Series1"].Points.DataBindXY(xArray, yArray);
    

    If the latter, you could create a second series (just duplicate the part you have labeled as Series1 and call it Series2) and then use the DataBindY on each.

    double [] yArray1= { 2.8, 4.4, 6.5, 8.3, 3.6, 5.6, 7.3, 9.2, 1.0};
    double [] yArray2 = { 3.1, 2.7, 4.6, 3.5, 3.3, 1.5, 4.5, 2.5, 2.1}; 
    Chart1.Series["Series1"].Points.DataBindY(yArray1);
    Chart1.Series["Series2"].Points.DataBindY(yArray2);
    

    This is a great resource explaining many different ways to databind all with examples: http://blogs.msdn.com/b/alexgor/archive/2009/02/21/data-binding-ms-chart-control.aspx