[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 807
  • Last Modified:

Applying style to the... asp.net, c#

The attached code creates a column chart (4 columns).

How can I apply css (.class or #ID) such that the first and last bars will have different backgound colors and gradient? If applying css is not possible then how can I change the colors for first column red, last column orange and the rest blue.

Thank you
    protected void createChart1()
    {

        double[] yValues = { 15, 60, 12, 13 };   //for column chart
        //double[] yValues2 = { 30, 32, 30, 35 };   //for line
        string[] xValues = { "September", "October", "November", "December" };

        Chart chart = new Chart();

        Series series = new Series("Default");
        series.ChartType = SeriesChartType.Column;
        series["PieLabelStyle"] = "Disabled";
        chart.Series.Add(series);

        ChartArea chartArea = new ChartArea();
        Axis yAxis = new Axis(chartArea, AxisName.Y);
        Axis xAxis = new Axis(chartArea, AxisName.X);

        chart.Series["Default"].Points.DataBindXY(xValues, yValues);
        chart.ChartAreas.Add(chartArea);

        chart.Width = new Unit(300, UnitType.Pixel);
        chart.Height = new Unit(200, UnitType.Pixel);
        string filename = "C:\\image\\Chart.png";
        chart.SaveImage(filename, ChartImageFormat.Png);

Open in new window

0
Mike Eghtebas
Asked:
Mike Eghtebas
  • 4
  • 3
1 Solution
 
Robert SchuttSoftware EngineerCommented:
I don't think this component has any possibilities for CSS classes. In this example you're specifically saving as png image so the page you use this on could not influence the individual components with CSS any more.

But even if you would have another handler I don't think it would send html mark-up instead of an image, although I'm not 100% sure. So what you would need for that is a Chart component which renders as html.

As it is, I think the below code is what you would have to use (in between your existing lines 19 and 20):
            chart.Series["Default"].Color = System.Drawing.Color.Blue; // change default if you want to
            chart.Series["Default"].Points[0].Color = System.Drawing.Color.Red;
            chart.Series["Default"].Points[chart.Series["Default"].Points.Count - 1].Color = System.Drawing.Color.Orange;

Open in new window

0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Hi Robert,

I will try your code for changing the color, this might be sufficient for now. Have in mind that the idea here was to use css before making the image so that the image will have better colors and gradient. I understand that those css settings will not have any effect after the image is constructed?

Question: Is there any way to apply css setting before the image construction?

Thank you,

Mike
0
 
Robert SchuttSoftware EngineerCommented:
I'm not exactly sure what you're looking for. Be aware that setting an object property BorderColor in this context is something completely different from using css properties on your page. If you have a skin or theme it might be possible to use colors and such defined in there for your chart but "reading back" the css defined in your page is a different matter. I searched around a bit but didn't find an obvious way for that. If it would be about 1 color (like the blue or black in the current image) there is a neat little trick but I'm not sure it would even work here: use Transparent for that color and use css to set the background color behind the chart picture. But other than that, as far as I can think about it, there is no way to use css to influence the colors in the picture.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
The most import parts in this post are handled by you. The chart images produced here via this c# are static and out of reach of any css we may have. This I understand. My focus was on how to create image to have colors with gradient just before the code creates the image. Meaning that the image will look much better after it is created.

Not knowing much, I am talking about css instead of skins or themes. As you are mentioning it, we may have to use skin or themes that I don't know much about it at this point. If you have a link for this subject, I will appreciate have it so I could learn more about it.

Regards,

Mike
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.
0
 
Robert SchuttSoftware EngineerCommented:
Sorry Mike, I read past your mention of gradient twice! I just saw it in your last comment when you mentioned it for the third time...

For gradients there are other properties on the chart object and the chartarea and points respectively.

Just some random code and the result:
            chart.Series["Default"].Color = System.Drawing.Color.Blue;
            chart.Series["Default"].BackGradientStyle = GradientStyle.TopBottom;
            chart.Series["Default"].BackSecondaryColor = System.Drawing.Color.DarkBlue;
            chart.Series["Default"].Points[0].Color = System.Drawing.Color.Red;
            chart.Series["Default"].Points[0].BackGradientStyle = GradientStyle.TopBottom;
            chart.Series["Default"].Points[0].BackSecondaryColor = System.Drawing.Color.DarkRed;
            chart.Series["Default"].Points[chart.Series["Default"].Points.Count - 1].Color = System.Drawing.Color.Orange;
            chart.Series["Default"].Points[chart.Series["Default"].Points.Count - 1].BackGradientStyle = GradientStyle.TopBottom;
            chart.Series["Default"].Points[chart.Series["Default"].Points.Count - 1].BackSecondaryColor = System.Drawing.Color.Yellow;

            chartArea.BackGradientStyle = GradientStyle.HorizontalCenter;
            chartArea.BackColor = System.Drawing.Color.SlateGray;
            chartArea.BackSecondaryColor = System.Drawing.Color.White;

Open in new window

chart with gradients
0
 
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Perfect. Thanks.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now