whitespace COMPANY whitespace SERVICES whitespace PRODUCTS whitespace PURCHASE whitespace SUPPORT whitespace CONTACTS whitespace Home whitespace Contact Us whitespace Site Map whitespace
whitespace
SUPPORT
whitespace
FORUM
whitespace
FAQS
whitespace
SUBSCRIPTION
whitespace
REQUEST ON-LINE
whitespace
whitespace

Technical Support Forum

Welcome Guest Search | Active Topics | Log In | Register

How to make chart scaled to part of the screen without losing anything Options · View
whitecloud
#1 Posted : Friday, February 12, 2010 9:36:30 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Hello,

I just installed and tried the sample GettingStartedActivity, I tried to use 10 numbers to draw the column chart on a screen and it worked well. Then I tried to create a activity which has two component. The first component (textView) which occupy the half of the screen showed 10 numbers and related information, the second part (ChartView) showed the chart. It does show the chart, but it missed some information. First, the number on each column top only showed half part of the number, second, the x and y axis are missed. It looks like only the center of the chart showed on the screen. I guess the reason is that I only have half screen given to chart, right? I saw your screenshot samples and know that your application can make the chart showed completly on part of the screen in stead of the whole screen. But I do not know how to do that. Could you help on informing it. Thanks.

Tony
pturchenko
#2 Posted : Tuesday, February 16, 2010 5:38:58 PM
Rank: Guest

Groups:

Joined: 7/9/2009
Posts: 3,383
Hi. Please see this post http://www.artfulbits.co...m.aspx?g=posts&t=38 Attached sample uses the same approach.
whitecloud
#3 Posted : Tuesday, February 16, 2010 10:46:13 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Thank you pturchenko. I am new to this, so pls do not feel suprised about my problem. :) I did study the grid example:

Code:
ArrayAdapter adapter = new ArrayAdapter<Double>(this, R.layout.cell);
GridView gridView = (GridView)findViewById(R.id.dataGrid);
ChartView chartView = (ChartView)findViewById(R.id.chart);


Well, I do not understand why ArrayAdapter is needed here, for the same reason why cell.xml is useful. I think GridView and ChartView will do the job (which might be the reason of my problem). That is what I did in my application:

Code:
setContentView(R.layout.main);
// show ten lines in textView and each line show some string
textView = (TextView)findViewById(R.id.textView_record);

// show chart in chartView which draw a chart using your sample code
chartView = (ChartView)findViewById(R.id.chartView_record);   
ChartArea area = chartView.addArea();
ChartSeries series = new ChartSeries( "DemoSeries", ChartTypes.Column);
series.getPoints().setData(recordsArray);//recordsArray has ten numbers
series.setShowLabel( true );
chartView.getSeries().add( series );
series.setArea( area.getName() );


Also, I only have one xml in layout dir which is similar to main.xml in the Grid example. I could show textView and chartView on screen, but the problem is that chartView only show center part without x and y axis (as I described in the first post). Could you help to figure out the problem? Thanks for the help!
pturchenko
#4 Posted : Wednesday, February 17, 2010 12:12:26 PM
Rank: Guest

Groups:

Joined: 7/9/2009
Posts: 3,383
Perhaps if you'd attach your project you are working on, we could figure out why chart behaves this way. Please provide as detailed as possible description of desired output. You are also welcome to purchase aiCharts library along with a subscription. This way you will receive latest library updates and any kind of consulting you require.
whitecloud
#5 Posted : Thursday, February 18, 2010 7:33:14 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Thank you pturchenko. I am just doing a demo, if this works out as desired, it is quite possible that my boss will buy it. :)

I figured out the problem, because I set the main layout background to white color...

Now it can show the column chart well, the y axis shows the number corresponding to the actual numbers for each column, but for x axis, now it shows 0.0, 2.5, 5.0, 7.5 and 10.0. Since I have ten columns, I am wondering if the x axis could show 1,5,10 or 1 to 10 under the corresponding column. Now the code is as below:

Code:
chartView = (ChartView)findViewById(R.id.chartView_record);
area = chartView.addArea(); //ChartArea
series = new ChartSeries( ChartTypes.Column); //ChartSeries
series.getPoints().setData(recordsArray);//10 numbers
series.setShowLabel( true );
chartView.getSeries().add( series );
series.setArea( area.getName());


Another problem is that when I press the chartViewButton, the above code will show the chart on the screen. If I press the button for second time, the screen will show two same charts, three charts for the third press...., how to make it to show only one chart and clear the previous chart somehow.

Thanks.
Baydalka Volodymyr
#6 Posted : Thursday, February 18, 2010 8:47:14 PM
Rank: Developers Team


Groups: Registered, Administrators

Joined: 7/28/2009
Posts: 447
1) Use this code to change labels generation mode. It will
show labels corresponding to X values of the points.
Code:
area.getDefaultXAxis().setLabelsMode(ChartAxis.LabelsMode.SeriesLabels);


2) Maybe you add chart elements (ChartArea, ChartSeries...) each time when you press the button. Try to reuse it or just remove before you add new one.

Regards,
Volodymyr Baydalka
Andriod development and support team
whitecloud
#7 Posted : Friday, February 19, 2010 7:48:00 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Thank you Baydalka for the help.

1.
Code:
area.getDefaultXAxis().setLabelsMode(ChartAxis.LabelsMode.SeriesLabels);
does work well. But x axis start from 0.0, it can not start from 1, right? Also, the number is double like 0.0, 1.0, 2.0... it can not be like 1, 2, 3,..., right?

2.
Code:
private TextView textView;
................
private ChartView chartView;
private ChartArea area;
private ChartSeries series;
........
textView = (TextView)findViewById(R.id.textView_record); 
chartView = (ChartView)findViewById(R.id.chartView_record);
..........
buttonTableView.setOnClickListener(new OnClickListener()
{
    public void onClick(View v)
    {    
         textView.setVisibility(View.GONE);
                            
         area = chartView.addArea();
         area.getDefaultXAxis().setLabelsMode(ChartAxis.LabelsMode.SeriesLabels);               
         series = new ChartSeries( ChartTypes.Column);
         series.getPoints().setData(recordsArray);
         series.setShowLabel( true );
         chartView.getSeries().add( series );
         series.setArea( area.getName());   
                        
          chartView.setVisibility(View.VISIBLE);
});


You are right, each time clicking the button will add a chartArea (hide the textView and show chartView which are in same activity), that is the reason if i click button twice, it will show two same charts on screen, but I do not know how to remove it or reuse it as you adviced, could you help to solve the problem? Thanks.
Baydalka Volodymyr
#8 Posted : Saturday, February 20, 2010 2:40:57 PM
Rank: Developers Team


Groups: Registered, Administrators

Joined: 7/28/2009
Posts: 447
1a) X axis start from 0.0 because X value of first point is zero. Try to use following snippet instead line series.getPoints().setData(recordsArray);
Code:
for(int i = 0; i < recordsArray.length; i++)
  series.getPoints().addXY(i+1, recordsArray[i]);


1b) Use following snippet to set labels format
Code:
area.getDefaultXAxis().setFormat("%.0f");

To everyone who has unreleased version - this code doesn't work in developer release.

2) You just need to move initialization code
Code:
private TextView textView;
................
private ChartView chartView;
private ChartArea area;
private ChartSeries series;
........
textView = (TextView)findViewById(R.id.textView_record);
chartView = (ChartView)findViewById(R.id.chartView_record);
area = chartView.addArea();
area.getDefaultXAxis().setLabelsMode(ChartAxis.LabelsMode.SeriesLabels);               
series = new ChartSeries( ChartTypes.Column);
series.setShowLabel( true );
chartView.getSeries().add( series );
series.setArea( area.getName());   
..........
buttonTableView.setOnClickListener(new OnClickListener()
{
    public void onClick(View v)
    {   
         textView.setVisibility(View.GONE);
                           
         series.getPoints().setData(recordsArray);
                       
          chartView.setVisibility(View.VISIBLE);
});
Volodymyr Baydalka
Andriod development and support team
whitecloud
#9 Posted : Monday, February 22, 2010 8:56:00 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Thank you Bayddlka, I really appreciate your help.

I showed the chart to my boss and he like it. Currently, I used two chart type from your lib, one is column and the other is line type. Both charts shows ten numbers which like 123, 223, 98, 166...I am wondering if the following two requirements is applicable.

First, is it possible to draw a horizontal line accoring to a value like 100, since 100 is a special value in my app.

Second, is it applicable to change the color to different one for the part that is above a value. For example, now the default column/chart color is red, for the column/chart that is above 100 on y axis, it is another color, in other words, one column could has two color, one color for lower part below 100, one color for upper part above 100.

I saw some of your samples in which a column has two or three colors, so I think the second requirement might be applicable, or both. If so, could you please provide details on how to make it happen? Thanks.
pturchenko
#10 Posted : Tuesday, February 23, 2010 12:52:53 PM
Rank: Guest

Groups:

Joined: 7/9/2009
Posts: 3,383
Hi. Please use striplines feature for the 1st requirement (I will ask Mr.Volodymyr to attach sample that demonstrates this issue).
Baydalka Volodymyr
#11 Posted : Tuesday, February 23, 2010 1:16:19 PM
Rank: Developers Team


Groups: Registered, Administrators

Joined: 7/28/2009
Posts: 447
Hi,

There is sample that demonstrates using of striplines with column color changing.

Best regards,
File Attachment(s):
aiChartStriplines.zip (13kb) downloaded 7 time(s).
Volodymyr Baydalka
Andriod development and support team
whitecloud
#12 Posted : Tuesday, February 23, 2010 6:27:09 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Hi Guys,

Thanks a lot for your kind help and support. I put your code into mine, and got the result as the attahed picture.

As it shows, the whole area that is above 100 has changed color, but the columns that above 100 value do not change the color which is what I wish to do. I need not area to change the color, just the column.

And the horizontal line of 100 has the same color as 200 and 300, I wish its color is special.

This is the code
Code:
area = new ChartArea();
area.getDefaultXAxis().setLabelsMode(ChartAxis.LabelsMode.SeriesLabels); 
area.getDefaultXAxis().setFormat("%.0f");
series = new ChartSeries( ChartTypes.Column);
for(int i = 0; i < recordsArray.length; i++)
{
    series.getPoints().addXY(i+1, recordsArray[i]);
}                          
series.setShowLabel( true );
processPoints(series); // same method as you provide
                            
// issue 2
ChartAxisStripLine stripLine = createStripLine(NORMAL_VALUE); //same method as you provide
area.getDefaultYAxis().getStripLines().add(stripLine);
chartView.getAreas().add(area);
chartView.getSeries().add( series );


I will look at code to see if I could figure out the problem, I am quite new on this, :) so it would be great if you could help to take a look.

By the way, the following two line code you provide do not work since there are not such methods.
Code:
//stripLine.setText("More than 100!");
//stripLine.getTextPaint().setColor(Color.WHITE);
whitecloud attached the following image(s):
screenShot_new.png (48kb) downloaded 104 time(s).
pturchenko
#13 Posted : Wednesday, February 24, 2010 1:35:21 PM
Rank: Guest

Groups:

Joined: 7/9/2009
Posts: 3,383
Hi. It would be great if you draw an image of chart you are trying to come up with. It's kind of hard to figure out from your code snippets what's exactly wrong. We'll try to create a sample that does what you need.
whitecloud
#14 Posted : Wednesday, February 24, 2010 6:21:13 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Thanks for help.

I worked out the stripline (green one) as attached pic showed, the left problem is to show column that has different color for the part above the stripline. Now, those columns in blue are expected to show two colors, red color below the stripline and blue color above the stripline. Please give some help on it at your convenience. Thanks!

Code:

area = new ChartArea();
area.getDefaultXAxis().setLabelsMode(ChartAxis.LabelsMode.SeriesLabels); 
area.getDefaultXAxis().setFormat("%.0f");
series = new ChartSeries( ChartTypes.Column);
for(int i = 0; i < recordsArray.length; i++)
{
    series.getPoints().addXY(i+1, recordsArray[i]);
}                          
series.setShowLabel( true );
                            
// set color to different one for the part above normal value
processPoints(series);
                            
// set special color for the stripLine that is equal to normal value
ChartAxisStripLine stripLine = createStripLine(NORMAL_VALUE);
area.getDefaultYAxis().getStripLines().add(stripLine);
chartView.getAreas().add(area);
chartView.getSeries().add( series );

Code:
private void processPoints(ChartSeries series)
{
    ShapeDrawable shapeDrawable = new ShapeDrawable();
    shapeDrawable.getPaint().setColor(Color.BLUE);
        
    for (ChartPoint chartPoint : series.getPoints())
    {
         if(chartPoint.getY(0) > NORMAL_VALUE)
        chartPoint.setBackDrawable(shapeDrawable);
    }
}
whitecloud attached the following image(s):
screenShot_new_01.png (16kb) downloaded 93 time(s).
Baydalka Volodymyr
#15 Posted : Thursday, February 25, 2010 5:53:17 PM
Rank: Developers Team


Groups: Registered, Administrators

Joined: 7/28/2009
Posts: 447
Hi,

Unfortunately, aiCharts library doesn't support this feature. There's is a woraround to use 2 series (stacking columns), but we can't guaranty that is will help you. Please see the attached sample.
File Attachment(s):
aiChartsColoredColumn.zip (13kb) downloaded 4 time(s).
Volodymyr Baydalka
Andriod development and support team
whitecloud
#16 Posted : Thursday, February 25, 2010 10:16:11 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Baydalka Volodymyr wrote:
Hi,

Unfortunately, aiCharts library doesn't support this feature. There's is a woraround to use 2 series (stacking columns), but we can't guaranty that is will help you. Please see the attached sample.


Actually your attached code works as I expected!! Thank you Baydalka for the wonderful help!
whitecloud
#17 Posted : Friday, February 26, 2010 12:29:42 AM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Baydalka Volodymyr wrote:
Hi,

Unfortunately, aiCharts library doesn't support this feature. There's is a woraround to use 2 series (stacking columns), but we can't guaranty that is will help you. Please see the attached sample.


Hi Baydalka, one more question, is there a way to set those two stacking columns with the color as I wish? I did not find it. Thanks.

Regards,
Baydalka Volodymyr
#18 Posted : Friday, February 26, 2010 12:24:56 PM
Rank: Developers Team


Groups: Registered, Administrators

Joined: 7/28/2009
Posts: 447
Use next code snippet to set column color.

Code:

setColumnColor(seriesLess100, Color.RED);
setColumnColor(seriesMore100, Color.BLUE);

....

private static void setColumnColor(ChartSeries series, int color)
{
    ShapeDrawable drawable = new ShapeDrawable();
    drawable.getPaint().setColor(color);
    series.setBackDrawable(drawable);    
}


P.S. There is ChartSeries.setBackColor method that isn't work in version 1.0. It will be fixed in the next release.
Volodymyr Baydalka
Andriod development and support team
whitecloud
#19 Posted : Friday, February 26, 2010 7:58:31 PM
Rank: Member

Groups: Registered

Joined: 2/12/2010
Posts: 14
Location: Toronto
Great! Thank you very much Baydalka!
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Company | Services | Practices | Technologies | Career | Contacts | Privacy
© 2005-2016 ArtfulBits. All rights reserved.