ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Vertical bar chart values above bars
Posted by Patrick on Aug-16-2014 10:50
Attachments:
Support,

I want to show the values above vertical bar chart as percentages. I attached a screen
shot and the code

Please let me know how to format this to display as (for example) 450% vs.450.

Thank you,
Patrick
BAR.png
Barcode.cs
        private void RenderChart()
        {
            // The data for the bar chart
            double[] data = { 461, 166 };

            // The labels for the bar chart
            string[] labels = {"Global Core", "SPY"};

            //Width, Height
            XYChart c = new XYChart(290, 300);
                
            // Add a title to the chart using 18pts Times Bold Italic font. Set top/bottom
            // margins to 8 pixels.
            //c.addTitle("Global Core vs. SPY", "Arial", 12).setMargin2(0, 0, 8, 8);

            // Set the plotarea at (70, 55) and of size 460 x 280 pixels. Use transparent
            // border and black grid lines. Use rounded frame with radius of 20 pixels.
            
            //Edge, Edge, Width, Height
            c.setPlotArea(50, 30, 180, 240, -1, -1, Chart.Transparent, 0xB4B4B4);  // 0x000000 0xB4B4B4
 
            // Add a multi-color bar chart layer using the supplied data. Set cylinder bar shape.
            int[] colors = { 0x337DED, 0xee6622 };
            c.addBarLayer3(data, colors).setBarShape(Chart.CircleShapeNoShading);

            // Add a percentage bar layer
            //BarLayer layer = c.addBarLayer2(Chart.Percentage);

            // Add labels to the top of the bar using 8 pt Arial Bold font. The font color is
            // configured to be red (0xcc3300) below zero, and blue (0x3333ff) above zero.
            //BarLayer layer = c.addBarLayer2(Chart.Overlay);
            //layer.setAggregateLabelStyle("Arial Bold", 8, layer.yZoneColor(0, 0xcc3300,   0x3333ff));

            // Add a bar layer to the chart using the Overlay data combine method
            BarLayer layer = c.addBarLayer2(Chart.Overlay);

            // Select positive data and add it as data set with blue (6666ff) color
            layer.addDataSet(new ArrayMath(data).selectGEZ(null, Chart.NoValue).result(), 0x000000);
            layer.addDataSet(new ArrayMath(data).selectLTZ(null, Chart.NoValue).result(), 0x000000);

            // Add labels to the top of the bar using 8 pt Arial Bold font. The font color is
            // configured to be red (0xcc3300) below zero, and blue (0x3333ff) above zero.
            layer.setAggregateLabelStyle("Arial Bold", 8, layer.yZoneColor(0, 0x000000, 0x000000));           
          

            // Set the labels on the x axis.
            c.xAxis().setLabels(labels);

            // Show the same scale on the left and right y-axes
            c.syncYAxis();

            // Set the left y-axis and right y-axis title using 10pt Arial Bold font
            //c.yAxis().setTitle("% Return", "Arial Bold", 10);
            //c.yAxis2().setTitle("% Return", "Arial Bold", 10);

            // Set y-axes to transparent
            c.yAxis().setColors(Chart.Transparent);
            c.yAxis2().setColors(Chart.Transparent);

            c.yAxis().setLabelFormat("{value}%");
            c.yAxis2().setLabelFormat("{value}%");

            // Disable ticks on the x-axis by setting the tick color to transparent
            c.xAxis().setTickColor(Chart.Transparent);

            //Left / Right Axis
            c.yAxis().setLabelStyle("Arial", 9);
            c.yAxis2().setLabelStyle("Arial", 9);

            //Under Chart Cy
            c.xAxis().setLabelStyle("Arial", 11);

            // Output the chart
            WebChartViewer1.Image = c.makeWebImage(Chart.JPG);

            //Include tool tip for the chart
            WebChartViewer1.ImageMap = c.getHTMLImageMap("", "", "title='{xLabel}: {value}%'");    
        }

  Re: Vertical bar chart values above bars
Posted by Peter Kwan on Aug-18-2014 14:36
Hi Patrick,

You may use:

// display the value, followed by the % character
layer.setAggregateLabelFormat("{value}%");

Hope this can help.

Regards
Peter Kwan