Loading...

RE: ple Charts Configuration

RE: ple Charts Configuration

#5377
Anonymous
Anonymous
Participant

Hi Heather

The sample chart you indicated seems to be a 2D Single Y Combination Chart and I can walk through quickly here how to configure a chart like that. I will also explain the approach so you may apply the technique to other chart types you may be interested in building.

First, QuickApps chart web part (qChartView and qSIChartView) use 3rd party FusionCharts to render the SharePoint data into chart (Flash or JavaScript rendering on the client side), so it helps to reference FusionCharts documentation for more details. For this particular chart type, you can find more help on FusionChart's demo page.

Next visit the FusionChart's demo page and locate the 2D Single Y Combination Chart (first in the 3rd row in the charting grid on that demo page) and you notice that there were two chart series (combination of column and area chart) being rendered, which is slightly different than the chart you referenced from QuickApps help file where 4 chart types were combined.

If you click on the View data in XML link (as shown in the screen shot below), it shows you the XML configuration data used for rendering. The first set of data is the Category that describes the X axis (make a note so you would use that field in the X axis configuration in qChartView), then there were two data series that pulls set of numeric data for Revenue and Profit (make a note here that you would need to add two data series in qChartView, one pull a set of data for Revenue by using one of the aggregate functions available in qChartView and another for Profit).

chart.png

For this exercise, I created a simple Custom List and I named it Sales. I added three columns: Category (of Choice type with pre-defined value A, B, C and etc.), Revenue (currency field that stores revenue for each category) and Profit (currency field that stores profit for each category).

After entering some quick sample data, we are ready to configure it. This should be straightforward now that we understand how FusionCharts renders the data and how QuickApps configuration correspond to the set of data.

First, you need to pick the right chart type to begin with and since we want 2D Single Y Combination chart, you want to pick the right one as shown in the screen shot below.

chart2.png

Next is defining X axis and multiple data series, here we only add 2 data series of column and area type. To achieve the chart shown in QuickApps' help file, you need another Column type data series. At the minimal , the following illustrates the configuration.

chart3.png

The final chart rendered by qChartView looks similar to that of the FusionCharts demo page and the chart in the QuickApps' help file.

chart4.png

I can also quickly add another column "Projected Profit" and a data series by summing on this column to create something more like the help file provided.

chart5.png

Finally I created a calculated field "Cost" and used expression [Revenue] – [Profit] to get the calculated currency value for the field so I can add a Line chart to the data series to make the chart that is shown in our QuickApps' help file.

chart6.png

You could play with Chart Appearance tab in ezEdit to change the size (width, height), color, and other configurable parameters to adjust the look and feel of the chart or to make it look exactly like the one shown in the help file but I will leave that out in this walkthrough.

Hope this helps.