How To Customize ASP.NET Chart Databound To SqlDataSource

Question

I have an ASP Chart like this:

I am not sure how I can make the labels for the values to appear vertical instead of being horizontal. I am not sure if this can be achieved by CSS as the resultant output is an image.

Chart appearing as image

All I have with me is the code which says something like this: Saw some similar question here: C# chart rotate labels, but it is for C# and the given solution has C# code. I am using ASP.NET VBScript and also I am not using any code other than the above mark-up.

Also please advice me how to change the bar colour to a different one.

Is there anything else that I should check?

jsanalytics · Accepted Answer · 2016-08-12T04:56:22.650

Define LabelAngle and Color to the values you want and disable SmartLabelStyle as shown in the markup below:

    <asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" Height="400px" Width="600px">
        <Series>
            <asp:Series Name="Series1" IsValueShownAsLabel="True" LabelAngle="-90" LabelFormat="0,0" XValueMember="salesordernumber" YValueMembers="subtotal" Color="Red" Font="Microsoft Sans Serif, 12pt">
                <SmartLabelStyle Enabled="False" />
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
                <AxisY Maximum="3000">
                    <MajorGrid Enabled="False" />
                    <LabelStyle Format="0,0" />
                </AxisY>
                <AxisX>
                    <MajorGrid Enabled="False" />
                </AxisX>
            </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>

EDIT: use the chart's PreRender event to assign different colors to each data point in your series. The sample below assigns random colors but you could modify it to assign any colors you want.

    protected void Chart1_PreRender(object sender, EventArgs e)
    {
        Random r = new Random();

        foreach (DataPoint dp in Chart1.Series[0].Points)
            dp.Color = Color.FromArgb(r.Next(0, 255), r.Next(0, 255), r.Next(0, 255));
    }

EDIT: Adding full VB code.

WebForm.aspx:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="WebApplication1.WebForm1" %>

<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <asp:Chart ID="Chart1" runat="server" Height="400px" Width="600px" DataSourceID="SqlDataSource1">
            <Series>
                <asp:Series Name="Series1" IsValueShownAsLabel="True" LabelAngle="-90" LabelFormat="0,0" XValueMember="salesordernumber" YValueMembers="subtotal" Color="Red" Font="Microsoft Sans Serif, 12pt">
                    <SmartLabelStyle Enabled="False" />
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1">
                    <AxisY Maximum="3000">
                        <MajorGrid Enabled="False" />
                        <LabelStyle Format="0,0" />
                    </AxisY>
                    <AxisX>
                        <MajorGrid Enabled="False" />
                    </AxisX>
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="select * from table;"></asp:SqlDataSource>

    </div>
    </form>
</body>
</html>

WebForms.aspx.vb:

Imports System.Web.UI.DataVisualization.Charting
Imports System.Drawing

Public Class WebForm1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Chart1_PreRender(sender As Object, e As EventArgs) Handles Chart1.PreRender
        Dim r As New Random
        For Each dp As DataPoint In Chart1.Series(0).Points
            dp.Color = Color.FromArgb(r.Next(0, 255), r.Next(0, 255), r.Next(0, 255))
        Next
    End Sub
End Class

Thank you so much jstreet. And if you have any suggestion or recommendation to make each single column different colour really appreciated. Thanks again — Snwr Jamal Muhammed, Aug 07 '16 at 06:23
first of all, Thank you so much. Actually I have not tried the code yet. Because SQL Severer 2012 is not running on my PC which is Window 10 and its original. It gives this message " Windows Management Instrumentation (WMI) service" failed. Now I am trying to fix this problem. — Snwr Jamal Muhammed, Aug 08 '16 at 22:33
I have converted your code to VB code and it gave me this errors ( The system.drawing.color cannot be indexed because it has not default property). If you have any suggestions I would appreciate your effort. Here is the code : Protected Sub Chrt1_PreRender(sender As Object, e As EventHandler) Dim r As New Random() For Each dp As DataPoint In Chart1.Series(0).Points Next dp.Color = System.Drawing.Color.FromArgb(r.[Next](0, 255), r.[Next](0, 255), r.[Next](0, 255)) End Sub — Snwr Jamal Muhammed, Aug 10 '16 at 07:12
Change your call to `Random` from this: `r.[Next](0, 255)` to this: `r.Next(0, 255)`. — jsanalytics, Aug 10 '16 at 10:34
I have seen it and tried , thanks so much. But unfortunately I still have some problem in connection string.. once i implemented I will share the result. Again thank you very much for your helping. jstreet — Snwr Jamal Muhammed, Aug 13 '16 at 13:49
OK. You can always post a separate question for your connection string problem, if you need to. — jsanalytics, Aug 13 '16 at 14:07
I have used your code for making the chart columns different colors.But it still displays one color, also It doesn't give any error in the code. please, If you can suggest me any idea about it , really appreciated jstreet — Snwr Jamal Muhammed, Aug 28 '16 at 12:44
Please update your question by posting the exact code you're using, both markup and code-behind. — jsanalytics, Aug 28 '16 at 13:01
Please check the updated code I have put. Thank you so much for helping Jstreet — Snwr Jamal Muhammed, Aug 29 '16 at 06:31
I have fixed the issue on the code. It was related to the namespaces. There was a conflict between these two namespaces [iTextSharp.text] and [System.Drawing] which you should write full namespaces when you use it with Color or Font like this : System.Drawing.Color.FromArgb(r.Next(0,255), r.Next(0,255), r.Next(255)) — Snwr Jamal Muhammed, Aug 29 '16 at 11:11
Awesome... so is it working now? Please remember to mark my post as accepted, as explained here: [How does accepting an answer work?](http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) — jsanalytics, Aug 29 '16 at 12:18

How To Customize ASP.NET Chart Databound To SqlDataSource

1 Answers1

Linked