PeopleSoft Create Chart Graph Example Part 2

In the previous part of this series, we discussed how to create a chart control through Application Designer in PeopleSoft and set its properties, so that it can be referred through PeopleCode to build a chart. If you have completed all the steps to create a chart control, you can go ahead with this part. In this blog post, we will discuss how to write PeopleCode and create a chart for us in PeopleSoft at runtime. Part 1 is a prerequisite for us to create a working example of chart, so make sure that you have done all the steps provided in that part.

6) We will have to get the chart object into scope by using the delivered "GetChart" built in function. We pass the recod field definition we associated in part 1 to this function and get the chart control to an object in PeopleCode. Refer below for an example on how to do this;

Local Chart &Create_PeopleCode_Chart;
&Create_PeopleCode_Chart = GetChart(MY_RECORD.CHARTFIELD);

Here, MYRECORD.CHARTFIELD is the record field definition to which the chart control was associated in Part 1. You will have to replace this with your own record field definition.

7) Now that we have got the chart control into scope, you need to define the data for your graph. We will define a table, TEST_RECORD. This table will hold three fields, PRODUCT_ID, PRODUCT_CATEGORY and COUNT_TOTAL. You can wish you use the insert script provided below for some test data;

INSERT INTO PS_TEST_RECORD VALUES ('Laptop','India',100)
INSERT INTO PS_TEST_RECORD VALUES ('Laptop','US',150)
INSERT INTO PS_TEST_RECORD VALUES ('Laptop','Japan',220)
INSERT INTO PS_TEST_RECORD VALUES ('GPS','India',130)
INSERT INTO PS_TEST_RECORD VALUES ('GPS','US',140)
INSERT INTO PS_TEST_RECORD VALUES ('GPS','Japan',230)
INSERT INTO PS_TEST_RECORD VALUES ('iPhone','India',110)
INSERT INTO PS_TEST_RECORD VALUES ('iPhone','US',550)
INSERT INTO PS_TEST_RECORD VALUES ('iPhone','Japan',270)

8) We use the "SetData" method of the chart object to point to the data source for our chart. We also use "setDataYAxis" and "setDataXAxis" to provide X and Y axis column details. I would like the chart to be grouped by country.. So, I will add a category using "SetDataSeries" method. PeopleCode example below

&Create_PeopleCode_Chart.SetData(Record.TEST_RECORD);
&Create_PeopleCode_Chart.SetDataYAxis(TEST_RECORD.COUNT_TOTAL);
&Create_PeopleCode_Chart.SetDataXAxis(TEST_RECORD.PRODUCT_ID);
&Create_PeopleCode_Chart.SetDataSeries(TEST_RECORD.PROD_CATEGORY);

9) I would like to set four more properties for my chart object;

a) Type of chart: We will specify %ChartType_2DStackedBar for this example;
b) Legend: I would like to have Legend information for my chart. So, this property can be set to true. If you don't want one, you can set it to False.
c) LegendPosition: Applicable only if Legend is set to true. I will align the Legend to the right using %ChartLegend_Right;
d) Orientation of lable in XAxis: I would like the label on XAxis to be set vertically. So, we will set this property accordingly. Refer to the PeopleCode below

&Create_PeopleCode_Chart.Type = %ChartType_2DStackedBar;
&Create_PeopleCode_Chart.HasLegend = True;
&Create_PeopleCode_Chart.LegendPosition = %ChartLegend_Right;
&Create_PeopleCode_Chart.XAxisLabelOrient = %ChartText_Vertical;

10) That is all you have to do to create a chart. In my case, the chart came out very well. Refer to the chart below that got created from PeopleCode;

Chart Created from PeopleCode

Now, if you get an "Invalid Chart Data Source" error when rendering your chart on the page, then it would mean the chart data is not avaialble in the component buffer. There may be cases, where you cannot make your chart data a part of component buffer. In such cases, you can solve the invalid chart data source problem by defining a stand alone rowset and conditionally fill your chart data. You can then use this rowset as the data source for your chart and render it on the page. An example solution to Invalid Chart Data Source problem for the same example we took is provided below;

Local Chart &Create_PeopleCode_Chart;
&Create_PeopleCode_Chart = GetChart(MYRECORD.CHARTFIELD);
Local Rowset &RsChartDataSource;
&RsChartDataSource = CreateRowset(Record.TEST_RECORD);
&RsChartDataSource.Fill();
&Create_PeopleCode_Chart.SetData(&RsChartDataSource);
&Create_PeopleCode_Chart.SetDataYAxis(TEST_RECORD.COUNT_TOTAL);
&Create_PeopleCode_Chart.SetDataXAxis(TEST_RECORD.PRODUCT_ID);
&Create_PeopleCode_Chart.SetDataSeries(TEST_RECORD.PROD_CATEGORY);
&Create_PeopleCode_Chart.Type = %ChartType_2DStackedBar;
&Create_PeopleCode_Chart.HasLegend = True;
&Create_PeopleCode_Chart.LegendPosition = %ChartLegend_Right;
&Create_PeopleCode_Chart.XAxisLabelOrient = %ChartText_Vertical;

More on PeopleSoft charts to follow..Also integrating with gRaphaël—JavaScript Library..