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

Message ListMessage List     Post MessagePost Message

  data display in x-axis
Posted by April on Mar-07-2011 17:41
| Reply | Monitor
hi

i have data return from dataset and i set the x-lable manally .. how can i display the data in correct lable? Currently the data returns correctly but not in correct month..

For example , my data return is for march , but the display is in Jan ..For the month Jan i dont have anydata.. can help? thx




        double[] data = dtTotalSold.getCol(0);

         // The labels for the bar chart
         string[] labels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
        "Sept", "Oct", "Nov", "Dec"};


         XYChart c = new XYChart(600, 380, Chart.brushedSilverColor(), Chart.Transparent,
           2);

         // Add a title to the chart using 18pts Times Bold Italic font. Set top/bottom
         // margins to 8 pixels.
         c.addTitle("Individual Yearly Sales Tracking Report(TOTAL SOLD)", "Times New Roman Bold Italic", 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.
         c.setPlotArea(70, 55, 460, 280, -1, -1, Chart.Transparent, 0x000000);
         c.setRoundedFrame(0xffffff, 20);
         c.addLegend(55, 18, false, "", 8).setBackground(Chart.Transparent);
         // Add a multi-color bar chart layer using the supplied data. Set cylinder bar
         // shape.

         c.addBarLayer3(data).setBarShape(Chart.CircleShape);


         // 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("Total SOLD Rev ($) AfterGST & Adj ", "Arial Bold", 10);
         c.yAxis2().setTitle(ddlSalesRep, "Arial Bold", 10);
         // Set y-axes to transparent
         c.yAxis().setColors(Chart.Transparent);
         c.yAxis2().setColors(Chart.Transparent);

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

         // Set the label styles of all axes to 8pt Arial Bold font
         c.xAxis().setLabelStyle("Arial Bold", 8);
         c.yAxis().setLabelStyle("Arial Bold", 8);
         c.yAxis2().setLabelStyle("Arial Bold", 8);

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

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

  Re: data display in x-axis
Posted by Peter Kwan on Mar-07-2011 18:34
| Reply | Monitor
Hi April,

If your data are for March, please put it in the 3rd array position.

For example, you may return another column to indicate the position of the data values, so that you may put the values in the appropriate positions.

double[] values = dtTotalSold.getCol(0);    // your data values
double[] months = dtTotalSold.getCol(1);   // 1 - 12 representing the month of the value

//your data to ChartDirector - initialize to NoValue
double[] data = new double[12];
for (int i = 0; i < data.Length; ++i)
    data[i] = Chart.NoValue;

//put your values in the suitable array positions based on the month
for (int i = 0; i < values.Length; ++i)
    data[months[i] - 1] values[i];

Hope this can help.

Regards
Peter Kwan

  Re: data display in x-axis
Posted by April on Mar-08-2011 10:58
| Reply | Monitor
Hi

Thank you so much for help..i try importing the given code and i getting this error , can help?

data[months[i] - 1] = values[i];

Error 1 Cannot implicitly convert type 'double' to 'int'. An explicit conversion exists (are you missing a cast?)

I have one more question , i want to display month as Jan , Feb and so on..what i get the return data wil be like 1,2,3 ..How should i display Jan , feb ? Thank you
April wrote:

  Re: data display in x-axis
Posted by April on Mar-08-2011 11:38
| Reply | Monitor
Hi peter,

I solve it by editing following..Thank you so much for giving ideas.


  string[] labels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
        "Sept", "Oct", "Nov", "Dec"};
        double[] values = dtTotalSold.getCol(0);    // your data values
        double[] months = dtTotalSold.getCol(1);   // 1 - 12 representing the month of the value

        //your data to ChartDirector - initialize to NoValue
          double[] data = new double[12];
          for (int i = 0; i < data.Length; ++i)
          {
              data[i] = Chart.NoValue;

          }

        //put your values in the suitable array positions based on the month
          for (int i = 0; i < values.Length; ++i)
          {
              data[(int)months[i] - 1]= values[i];

          }

  Re: data display in x-axis
Posted by April on Mar-10-2011 17:03
| Reply | Monitor
hi Peter,

If i want to display correctly in year , how should i change the code the you provide me for month? I have amend and got the error..can help me see? many thanks.


  string[] labels = {"2010", "2011", "2012"};

        double[] barData = dtTotalSold.getCol(0);
        double[] markData = dtTotalSold.getCol(1);
        double[] year = dtTotalSold.getCol(2);


        double[] data = new double[3];
        for (int i = 0; i < data.Length; ++i)
        {
            data[i] = Chart.NoValue;

        }

        //put your values in the suitable array positions based on the month
        for (int i = 0; i < barData.Length; i++)
        {
            data[(int)year[i]- 1] = barData[i];
            data[(int)year[i]- 1] = markData[i];

        }

  Re: data display in x-axis
Posted by Peter Kwan on Mar-10-2011 22:53
| Reply | Monitor
Hi April,

According to your information, the first year (year with index 0) is year 2010. So the code is:

data[(int)year[i]- 2010] = barData[i];
data[(int)year[i]- 2010] = markData[i];

Hope this can help.

Regards
Peter Kwan

  Re: data display in x-axis
Posted by April on Mar-11-2011 09:21
| Reply | Monitor
Hi Peter,

You are rock..i got the graph that i want ..Thank you so much for ur quick help and fix the error exactly..

  Re: data display in x-axis
Posted by April on Mar-11-2011 10:39
| Reply | Monitor
Hi Peter,

I only left with one thing for my chart.Now i extract currency field from dataset and i want to display currency when mouse over on actual and current data..current data are showing..i dont know how to display currency field..can help me take a look my code? Many thx


string[] labels = {"2010", "2011", "2012"};

        double[] barData = dtTotalSold.getCol(0);
        double[] markData = dtTotalSold.getCol(1);
        double[] year = dtTotalSold.getCol(2);
        string[] currency = dtTotalSold.getColAsString(3);


        double[] data = new double[3];
        for (int i = 0; i < data.Length; ++i)
        {
            data[i] = Chart.NoValue;

        }

        //put your values in the suitable array positions based on the month
        for (int i = 0; i < barData.Length; ++i)
        {

            data[(int)year[i] - 2010] = barData[i];
            data[(int)year[i] - 2010] = markData[i];
           // data[(int)year[i]- 1] = markData[i];

        }
         // The labels for the bar chart


        // Create a XYChart object of size 480 x 360 pixels. Use a vertical gradient
        // color from pale blue (e8f0f8) to sky blue (aaccff) spanning half the chart
        // height as background. Set border to blue (88aaee). Use rounded corners. Enable
        // soft drop shadow.
        XYChart c = new XYChart(480, 360);
        c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8,
            0xaaccff), 0x88aaee);
        c.setRoundedFrame();
        c.setDropShadow();

        // Add a title to the chart using 15 points Arial Italic font. Set top/bottom
        // margins to 12 pixels.
        ChartDirector.TextBox title = c.addTitle("Dash Board - Budget Vs Sales Figure",
            "Arial Italic", 15);
        title.setMargin2(0, 0, 12, 12);

        // Tentatively set the plotarea to 50 pixels from the left edge to allow for the
        // y-axis, and to just under the title. Set the width to 65 pixels less than the
        // chart width, and the height to reserve 90 pixels at the bottom for the x-axis
        // and the legend box. Use pale blue (e8f0f8) background, transparent border, and
        // grey (888888) dotted horizontal grid lines.
        c.setPlotArea(50, title.getHeight(), c.getWidth() - 65, c.getHeight() -
            title.getHeight() - 90, 0xe8f0f8, -1, Chart.Transparent, c.dashLineColor(
            0x888888, Chart.DotLine));

        // Add a legend box where the bottom-center is anchored to the 15 pixels above
        // the bottom-center of the chart. Use horizontal layout and 8 points Arial font.
        LegendBox legendBox = c.addLegend(c.getWidth() / 2, c.getHeight() - 15, false,
            "Arial", 8);
        legendBox.setAlignment(Chart.BottomCenter);

        // Set the legend box background and border to pale blue (e8f0f8) and bluish grey
        // (445566)
        legendBox.setBackground(0xe8f0f8, 0x445566);

        // Use rounded corners of 5 pixel radius for the legend box
        legendBox.setRoundedCorners(5);

        // Use line style legend key
        legendBox.setLineStyleKey();

        c.yAxis().setTitle("Total SOLD & HOLD( Spaces + CMO )", "Arial Bold", 10);
        // Set axes to transparent
        c.xAxis().setColors(Chart.Transparent);
        c.yAxis().setColors(Chart.Transparent);

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

        // Add a box-whisker layer with just the middle mark visible for the marks. Use
        // red (ff0000) color for the mark, with a line width of 2 pixels and 10%
        // horizontal gap
        BoxWhiskerLayer markLayer = c.addBoxWhiskerLayer(null, null, null, null,
            markData, -1, 0xff0000);
        markLayer.setLineWidth(2);
        markLayer.setDataGap(0.1);

        // Add the legend key for the mark line
        legendBox.addKey("Target", 0xff0000, 2);

        // Tool tip for the mark layer
        markLayer.setHTMLImageMap("", "", "title='Target at {xLabel}: {med}'");

        // Add a blue (0066cc) bar layer using the given data.
        BarLayer barLayer = c.addBarLayer(barData, 0x0066cc, "Actual");

        // Use soft lighting effect for the bars with light direction from left.
        barLayer.setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Left));

        // Tool tip for the bar layer
        barLayer.setHTMLImageMap("", "", "title='{dataSetName} at {xLabel}: {value}'");

        // Adjust the plot area size, such that the bounding box (inclusive of axes) is
        // 10 pixels from the left edge, just below the title, 15 pixels from the right
        // edge, and 10 pixels above the legend box.
        c.packPlotArea(10, title.getHeight(), c.getWidth() - 15, c.layoutLegend(
            ).getTopY() - 10);

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

        // Include tool tip for the chart
        WebChartViewer1.ImageMap = c.getHTMLImageMap("");

  Re: data display in x-axis
Posted by Peter Kwan on Mar-11-2011 13:54
| Reply | Monitor
Hi April,

You may add the currency as an extra field to a layer. In this way, you may use it in the tooltips of the layer. For example:

markLayer.addExtraField(currency);
markLayer.setHTMLImageMap("", "", "title='Target at {xLabel}: {field0} {med}'");

The {field0} above represents the extra field that you have added.

Hope this can help.

Regards
Peter Kwan

  Re: data display in x-axis
Posted by April on Mar-11-2011 14:27
| Reply | Monitor
HI Peter,

I changed and display currency..Now i have some strange problem.For year 2010 and 2011 the currency show correctly for actual and target data but very strange for 2012, the currency didnt show for actual and taget data. can help me ? Many thanks

        string[] labels = {"2010", "2011", "2012"};

        double[] barData = dtTotalSold.getCol(0);
        double[] markData = dtTotalSold.getCol(1);
        double[] year = dtTotalSold.getCol(2);
        string[] currency = dtTotalSold.getColAsString(3);


        double[] data = new double[3];
        for (int i = 0; i < data.Length; ++i)
        {
            data[i] = Chart.NoValue;

        }
        double[] data1 = new double[3];
        for (int i = 0; i < data1.Length; ++i)
        {
            data1[i] = Chart.NoValue;

        }
        //put your values in the suitable array positions based on the month
        for (int i = 0; i < barData.Length; ++i)
        {

            data[(int)year[i] - 2010] = barData[i];
            data1[(int)year[i] - 2010] = markData[i];

        }


         //Create a XYChart object of size 480 x 360 pixels. Use a vertical gradient
         //color from pale blue (e8f0f8) to sky blue (aaccff) spanning half the chart
         //height as background. Set border to blue (88aaee). Use rounded corners. Enable
         //soft drop shadow.
        XYChart c = new XYChart(480, 360);
        c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8,
            0xaaccff), 0x88aaee);
        c.setRoundedFrame();
        c.setDropShadow();

        // Add a title to the chart using 15 points Arial Italic font. Set top/bottom
        // margins to 12 pixels.
        ChartDirector.TextBox title = c.addTitle("Dash Board - Budget Vs Sales Figure",
            "Arial Italic", 15);
        title.setMargin2(0, 0, 12, 12);

        // Tentatively set the plotarea to 50 pixels from the left edge to allow for the
        // y-axis, and to just under the title. Set the width to 65 pixels less than the
        // chart width, and the height to reserve 90 pixels at the bottom for the x-axis
        // and the legend box. Use pale blue (e8f0f8) background, transparent border, and
        // grey (888888) dotted horizontal grid lines.
        c.setPlotArea(50, title.getHeight(), c.getWidth() - 65, c.getHeight() -
            title.getHeight() - 90, 0xe8f0f8, -1, Chart.Transparent, c.dashLineColor(
            0x888888, Chart.DotLine));

        // Add a legend box where the bottom-center is anchored to the 15 pixels above
        // the bottom-center of the chart. Use horizontal layout and 8 points Arial font.
        LegendBox legendBox = c.addLegend(c.getWidth() / 2, c.getHeight() - 15, false,
            "Arial", 8);
        legendBox.setAlignment(Chart.BottomCenter);

        // Set the legend box background and border to pale blue (e8f0f8) and bluish grey
        // (445566)
        legendBox.setBackground(0xe8f0f8, 0x445566);

        // Use rounded corners of 5 pixel radius for the legend box
        legendBox.setRoundedCorners(5);

        // Use line style legend key
        legendBox.setLineStyleKey();

        c.yAxis().setTitle("Total SOLD & HOLD( Spaces + CMO )", "Arial Bold", 10);
        // Set axes to transparent
        c.xAxis().setColors(Chart.Transparent);
        c.yAxis().setColors(Chart.Transparent);

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

        // Add a box-whisker layer with just the middle mark visible for the marks. Use
        // red (ff0000) color for the mark, with a line width of 2 pixels and 10%
        // horizontal gap
        BoxWhiskerLayer markLayer = c.addBoxWhiskerLayer(null, null, null, null,
            data1, -1, 0xff0000);
        markLayer.setLineWidth(2);
        markLayer.setDataGap(0.1);

        // Add the legend key for the mark line
        legendBox.addKey("Target", 0xff0000, 2);

        // Tool tip for the mark layer
        markLayer.addExtraField(currency);
        markLayer.setHTMLImageMap("", "", "title='Target at {xLabel}: {field0} {med}'");

        // Add a blue (0066cc) bar layer using the given data.
        BarLayer barLayer = c.addBarLayer(data, 0x0066cc, "Actual");

        // Use soft lighting effect for the bars with light direction from left.
        barLayer.setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Left));

        // Tool tip for the bar layer
        barLayer.addExtraField(currency);
        barLayer.setHTMLImageMap("", "", "title='{dataSetName} at {xLabel}: {field0} {value}'");

        // Adjust the plot area size, such that the bounding box (inclusive of axes) is
        // 10 pixels from the left edge, just below the title, 15 pixels from the right
        // edge, and 10 pixels above the legend box.
        c.packPlotArea(10, title.getHeight(), c.getWidth() - 15, c.layoutLegend(
            ).getTopY() - 10);

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

        // Include tool tip for the chart
        WebChartViewer1.ImageMap = c.getHTMLImageMap("");

  Re: data display in x-axis
Posted by Peter Kwan on Mar-11-2011 18:34
| Reply | Monitor
Hi April,

Sorry, I forget that for your data structure,  you need to put the data values in the correct array positions, like:

        //put your values in the suitable array positions based on the month
        for (int i = 0; i < barData.Length; ++i)
        {

            data[(int)year[i] - 2010] = barData[i];
            data1[(int)year[i] - 2010] = markData[i];
            currency1[(int)year[i] - 2010] = currency[i];
        }

Then in addExtraField, you may use currency1 instead of currency.

Hope this can help.

Regards
Peter Kwan

  Re: data display in x-axis
Posted by April on Mar-17-2011 14:48
| Reply | Monitor
Hi Peter,

Thank, will try today as i am away last few days from office..Thank for always support whatever we are asking ..

  Re: data display in x-axis
Posted by April on Mar-18-2011 14:48
| Reply | Monitor
Hi Peter,

I got one error when i try to add currency1 filels . The return value for currency is 'String' but the array list is double. How can i do about that?

string[] currency = dtTotalSold.getColAsString(3);

string[] currency1 = new string[3];
        for (int i = 0; i < currency1.Length; ++i)
        {
           currency1[i] = Chart.NoValue.ToString;

        }


The error display

Error 1 Cannot convert method group 'ToString' to non-delegate type 'string'. Did you intend to invoke the method?

  Re: data display in x-axis
Posted by Peter Kwan on Mar-19-2011 01:44
| Reply | Monitor
Hi April,

I think there is no need to initialize currency1 to NoValue. The .NET system should automatically initialize the text strings to null.

For numbers, the .NET system would initialize the variables to 0. The 0 is just a normal number like any other number. For example, the temperature 0 degree is just a normal temperature like any other temperature. The 0 value therefore does not mean no value. This is why we need a special constant NoValue to represent no value for numbers. The NoValue is of type "double" so it is used for double values only.

For text strings, the null already means nothing, and nothing is displayed for this text string. So no more initialization is necessary.

Hope this can help.

Regards
Peter Kwan

  Re: data display in x-axis
Posted by April on Mar-22-2011 09:58
| Reply | Monitor
Oh..i see..Thank you for the clearly explanation..You are rock :)