This project is read-only.

Simpler Examples?

Topics: General
Oct 20, 2008 at 3:13 PM
 I'm looking at integrating in FoxCharts into an existing application and using the example app. as a guideline. What I'm finding is that the sample app., while very good at showing off all the various bells, whistles, and features, is really hard to follow when you just want to create a simple chart. The charts look great but it's just not clear (to me, at least) what is required to do that: do I need to create a cursor, is the format important, can it all be achieved programmatically, is there some significance to ChartCount and number of records in the table and the number of "ChartX" fields in the table or is that just a coincidence, etc?

Could someone put together a simple chart (pick a type, eg. a line chart) then do the bare minimum necessary to get it to display something. If there are multiple ways of achieving the end result, only show one of them (or break them up into two different examples). Another really helpful piece would just be a simple "definition of terms" - is there some naming convention for the "X" and "Y" coordinates on the chart, what is each element of the chart called (eg. I want to create a barchart with 7, so I know there are 7 data points, how do I refer to each element)?

It would also be nice if the "main" example used tool tips to display the actual properties and values that the controls were bound to. Then I could just hover over the setting to see which property I need to set instead of sifting through the code.

I'd happily pitch in do some of this if I could actually get something to work. All I've managed to do is display a blue square on my form ;-)


Oct 20, 2008 at 4:28 PM
Paul --

I've been heavily involved in the FoxCharts examples, and would be glad to help.

First of all, what example(s) did you look at?

I would suggest looking at JN_Sample1 or JN_Sample2.  In the Init of these two forms, you'll find code which creates the chart from scratch.  (This includes creating the underlying cursor as well.)

Your suggestion about tooltips is well-taken -- it's just that nobody has gotten to it yet.  The pageframe class used for the options in both of these examples is a result of considerable rework of Cesar's original (first) example, and is specifically intended for inclusion in actual applications.  Our intent is to keep it current with ongoing releases.

If you would like to take that pageframe class and add tooltips as you see fit, we'll be glad to include them (with possible additional modifications) in the released version.

Finally -- sorry it's so hard to get started, but I'm glad to have your input so that we can make this simpler from the outset.

Jim Nelson
Oct 20, 2008 at 4:56 PM
 Here's the main point that is a bit confusing - there isn't a good description of what ChartsCount does, and how it's related to the cursors FoxCharts uses to build the graph. Unfortunately, in the examples, you set ChartsCount = 5, and there are 5 records in the cursor. If you are just starting out it's not really clear if you have to set ChartsCount to the number of records in the cursor or what. After walking through the code I realize that the two aren't really related (eg. # of records in the cursor vs # of elements show on the graph). If you were to just do something like add another record or two in the example cursor, that would help eliminate that point of confusion.

There also isn't any comments in the examples regarding the relationship between the field names on my cursor vs. what properties need to be set on the chart (and how ChartsCount fits in - for example, do I need to explicitly set each FieldValueX to the correct field name or does it infer it from some naming convention).
Oct 20, 2008 at 5:10 PM
Edited Oct 20, 2008 at 5:11 PM
Paul --

A small part of your confusion  would be eliminated if you looked at the sample form JN_Sample2.  At least the confusion there between ChartsCount (the number of lines you would be drawing = the number of columns from the source cursor) and the record count of the cursor is eliminated.

In that form, there is a separate cursor which describes the each of the data columns (five).  There is also a method SetColumnDefinitions which takes that cursor and sets the various FoxCharts properties from it.  (You'll note that the code would need modification to fit the field names you had chosen).  You'll see that there is no naming convention at all for the columns at all, other than what is used in that method.

If interested, please feel free to add comments to the INIT of that form (and any othe methods) and send them on.  
Oct 20, 2008 at 9:28 PM
Edited Oct 20, 2008 at 9:32 PM
Hi Paul,

I'm glad you're trying FoxCharts

>>Here's the main point that is a bit confusing - there isn't a good description of what ChartsCount does, and how it's related to the cursors FoxCharts uses to build the graph. Unfortunately, in the examples, you set ChartsCount = 5, and there are 5 records in the cursor. If you are just starting out it's not really clear if you have to set ChartsCount to the number of records in the cursor or what. After walking through the code I realize that the two aren't really related (eg. # of records in the cursor vs # of elements show on the graph). If you were to just do something like add another record or two in the example cursor, that would help eliminate that point of confusion.

Yes, you're absolutely correct with this.
I'll change the samples as soon as possible in order to adress this.

The main problem is that we still did not have enough time to document things.

But this is being solved right now.
Till the end of this week we'll have a HELP.chm file, with the descriptions of the main properties.

I promise to take an additional care with "ChartsCount". In fact, this is one of the most important properties.




>>There also isn't any comments in the examples regarding the relationship between the field names on my cursor vs. what properties need to be set on >>the chart (and how ChartsCount fits in - for example, do I need to explicitly set each FieldValueX
 
Supposing you want to create a lines chart, containing 3 distinct lines.
Think of a toys shop that sells for "Babies",  "Infants" and "Teenagers"

Each line will be created based on 12 months data.
For this case, you need to have a cursor with 3 columns
Each column will have the values needed for each line. So, for our case, the cursor will have 12 rows.

Then, we'll have a cursor with 3 columns of data, called "Babies", "Infants" and "Teens".

Please follow the instructions below
Just paste the code below to the INIT() of FoxCharts.
I tried to include comments on each step in order to provide a better understanding.


I hope the answer to your questions are there !
Please let me know how it goes.

Regards
Cesar


* Create a new empty form
* Drom an instance of FoxCharts to it
* Put the following code in the Init() event of the form

* Make sure the form and foxcharts are big enough so that the chart
* will appear well

* Create main cursor
CREATE CURSOR sales (Babies n(8,2), Infants n(8,2), Teens n(8,2))

* Populate cursor with data each column with the sales amount for each month
* this will have 12 rows, one for each month

INSERT INTO sales VALUES(10, 25, 40)
INSERT INTO sales VALUES(19, 15, 30)
INSERT INTO sales VALUES(10, 25, 40)
INSERT INTO sales VALUES(20, 22, 45)
INSERT INTO sales VALUES(10, 25, 40)
INSERT INTO sales VALUES(16, 15, 50)
INSERT INTO sales VALUES(22, 25, 88)
INSERT INTO sales VALUES(10, 25, 40)
INSERT INTO sales VALUES(31, 05, 77)
INSERT INTO sales VALUES(10, 25, 40)
INSERT INTO sales VALUES(19, 45, 64)
INSERT INTO sales VALUES(41, 56, 76)

* Next step is to Setup FoxCharts
* Supposing you already dropped an instance of FoxCharts to any form
LOCAL loChart
loChart = Thisform.FoxCharts1

WITH loChart as FoxCharts of FoxCharts.Vcx

.ChartType = 5 && Line

* Then, we need to tell the class that it will receive 3 fields of data
* Each field will represent one line
* Later you can try changing the value of the property "ChartType" with values from 1 to 14
* Be careful because we don't have Charttype #3 available yet :-)

.ChartsCount = 3

* Then we tell FoxCharts the name of the cursor that contains the data needed
.SourceAlias = "Sales"

* Next step is to populate the collection object that will receive the information from the cursor

* Start with the first column - BABIES
.Fields(1).FieldValue = "Babies" && This is the name of the 1st column of the cursor
.Fields(1).Legend = "Babies Products"
.Fields(1).Color  = RGB(100,175,213) && Blue

* Start with the first column - INFANTS
.Fields(2).FieldValue = "Infants" && This is the name of the 2st column of the cursor
.Fields(2).Legend = "Children Products"
.Fields(2).Color  = RGB(255,20,80) && Red

* Start with the first column - TEENS
.Fields(3).FieldValue = "Teens" && This is the name of the 3st column of the cursor
.Fields(3).Legend = "Teenagers Products"
.Fields(3).Color  = RGB(90,250,50) && Green

* Setting the title and subtitle
.Title.Caption = "Super Toys"
.SubTitle.Caption = "Sales by month"
.FontName = "Tahoma"

* Setting the Chart Depth ( 3d effect )
.Depth = 10

.DrawChart()

ENDWITH

Oct 20, 2008 at 10:04 PM
 Thanks, that's a good example. I've gotten most of this to work already, but I wanted to provide feedback as I was working through this for the first time. It's hard to put yourself in another developer's shoes as they work through something the first time (and I know I'd forget about them the second I had it working).

One issue I noticed - I had some weird compilation issues with it when I first started. I had to force the class to be recompiled before it started working. I ran into an error, "Data type is invalid for this property" when it was trying to set the mouse pointer. I had to set _OrigMousePointer = 0 (instead of empty).
Oct 21, 2008 at 3:44 AM
Paul --

And I'll be inserting comments and such into my samples, particularly JN_Sample2, which is the best sample out there I think.

Hope to be able to provide that to you within a few days.

Jim
Oct 21, 2008 at 4:34 AM
Edited Oct 21, 2008 at 5:23 AM
Here's what I've documented so far in JN_Sample2.  See if this is of any assistance.

*  Create sample cursor 'Sales'
*  Five data Columns, 'Chart1' thru 'Chart5' (descriptions for these in the cursor 'Columns' below)
*          plus three additional optional columns that apply only to chart types 1, 2, 7, and 12

*  Note that the column names in these cursors will be saved into FoxCharts properties, so
*       any names can be used.
Create Cursor Sales (Chart1 N(8,2) Null, Chart2 N(8,2) Null, Chart3 N(8,2) Null, Chart4 N(8,2) Null, Chart5 N(8,2) Null, ;
    Legenda c(30), Detach l, Color i, Hide_Slice l)

Insert Into Sales Values (110, 100,  180,  155, 144 ,"JAN", .F., Rgb(64,64,255) ,  .F.)
Insert Into Sales Values (120, 260,  144,  188, 255 ,"FEB", .F., Rgb(32,160,64) , .F.)
Insert Into Sales Values (Null, 100,  175,  115, 135 ,"MAR", .F., Rgb(255,160,60), .F.)
Insert Into Sales Values ( 160,  170, 200, 110, 177 ,"APR", .T., Rgb(0,164,128) , .F.)
Insert Into Sales Values ( 150,  190,  160,  188, 188 ,"MAY", .F., Rgb(255,0,0)   , .F.)
Insert Into Sales Values ( 40, 100, 200, 130, 99 ,"JUN", .F., Rgb(96,96,96)  , .F.)
Insert Into Sales Values ( 30, 100, 200, 130, 77 ,"JUL", .F., Rgb(164,0,164) , .F.)
Insert Into Sales Values ( 30, 100, 200, 130, 88 ,"AUG", .F., Rgb(255,255,0) , .F.)
Insert Into Sales Values (109, 100,  80,  55, 99 ,"SEPT", .T., Rgb(64,64,255) , .F.)
Insert Into Sales Values (110,  60,  44,  88, 100,"OCT", .F., Rgb(32,160,64) , .F.)
Insert Into Sales Values (111, 100,  75,  43, 110,"NOV", .F., Rgb(255,160,60), .F.)
Insert Into Sales Values (112,  50, 100, 110, 120,"DEC", .F., Rgb(255,164,128), .F.)


*    Create cursor 'Columns' which describes the five data columns in the data cursor (above)
*        Column        = name of the column in the data cursor
*        Legend        = the legend that will be used in FoxCharts for the column
*        Color        = the color for this column if custom colors are used
Create Cursor Columns (Column c(8), Legend c(10), Color i)
Insert Into Columns Values ("Chart1", "Apples", Rgb(100,175,213))  && Azul
Insert Into Columns Values ("Chart2", "Oranges", Rgb(162,169,167)) && Cinza
Insert Into Columns Values ("Chart3", "Peaches", Rgb(192,251,74)) && Verde
Insert Into Columns Values ("Chart4", "Bananas", Rgb(152,51,238)) && Roxo
Insert Into Columns Values ("Chart5", "Grapes", Rgb(255,255,0)) && Roxo
Goto Top

*  Sets the properties for cursor 'Columns' into FoxCharts properties.
Thisform.SetColumnDefinitions()

With Thisform.FoxCharts1 As FoxCharts Of "FoxCharts.vcx"

    *  Following only applies to types 1, 2, 7, and 12 -- single items (pie chart, for example)
    .FieldHideSlice = "Hide_Slice" && only applies to types 1, 2, 7, 12
    .FieldColor = "Color" && only applies to types 1, 2, 7, 12
    .FieldDetachSlice = "Detach" && only applies to types 1, 2, 7, 12
    .FieldLegend = "Legenda" && only applies to types 1, 2, 7, 12

    * Initial Settings
    .Title.Caption = 'JN Sample 2'
    .SubTitle.Caption = 'Slightly enhanced version of JN Sample 1 -- descriptions for Columns in a separate grid, allowing clearer column selection for pie charts, etc.'
    .FontName = "Verdana"
    .PIECOMPENSATEANGLES = .T.

    .DrawChart()

    .SaveChartProperties()

Endwith


Procedure SetColumnDefinitions
With Thisform.FoxCharts1 As FoxCharts Of "FoxCharts.vcx"

    Select Columns
    lnRecno = Recno()

    .ChartsCount = Reccount()
    .SourceAlias = "Sales"
    .FieldAxis2  = "LegendA"

    Scan
        lnColumn = Recno()
        With .Fields(lnColumn)
            .FieldValue     = Column
            .Legend        = Trim (Legend)
            .Color        = Color
        Endwith
    Endscan

    Goto (lnRecno)

Endwith