Appboard/old/widgets/column chart: Difference between revisions

imported>Cmace
(created to remove appboard_builder)
 
imported>Cmace
(copied from internalwiki)
Line 1: Line 1:
== Adding a Column Chart Widget ==
A Column Chart Widget is a graphical Widget that displays rectangular bars with lengths proportional to the values that they represent.  The bars are plotted vertically, as opposed to a [[Bar_Chart_Widget|Bar Chart]], which plots horizontal bars.


The Column Chart Widget visualizes data with vertical (bottom to top) columns. This is a vertically-oriented bar chart.


Click "Add Widget" in the tool palette on the left.  If "Add Widget" is disabled, refer to the "Adding a Stack" section. For a general overview of adding a "Widget" refer to [[Widgets|Add/Edit/Remove a Widget]].
[[Image:columnChartSample.png|thumb|center|500px|Column Chart Sample]]


# Enter a name for the Widget
# Select "Column" under the "Chart" tab.
# Select the Board you'd like the Column Chart Widget to appear on.
# Click "Add Widget".


== How To Create a Column Chart Widget ==
For instructions on creating a Widget, see the general instructions in [[Widgets#Adding_Widgets|Adding Widgets]].  The <b>Column</b> Widget type is located under the <b>Charts</b> category on the Widget selection screen.


== Configuring a Column Chart Widget ==


# Select a Data Collection that contains the information you'd like to use for this widget. The Data Collection should contain one or more numeric fields to use as Y values (column heights) which will be plotted against the corresponding X value.  
== How To Configure a Column Chart Widget ==
#* Click the "Data Collection" pulldown, then select from the list of available Data Collections.
Follow the instructions above to create the basic "ColumnChart" Widget, and then perform the following steps to configure a Column Chart Widget:
#* If you do not see any Data Collections, refer to [[Data_Collections|Add/Edit/Remove a Data Collection]].
 
# Select the desired field for the Y-Field (this field will determine the height of each bar).
 
# Click "Add" for the Series.
=== Select a Data Collection ===
# Select the field using the drop down list.The values of this field determine the height of the corresponding column.
Select a '''Data Collection''' that contains the information you would like to use for this Widget.  
# Select the color for the columns via the color selector.
* Click the "Data Collection" pulldown, then select from the list of available Data Collections.
# Repeat for any additional series.
* If you're using the sample CSV data, select "Sample.Data.ChartData".
#* Series may be removed with the "Remove" button next to the "Add".
* If there are no Data Collections available in the pulldown, then click here for instructions on how to bring in some [[Sample_Chart_Data|Sample Chart Data]], or refer to [[Data_Collections|Add/Edit/Remove a Data Collection]].
# Check or uncheck "Show Legend" as desired to include a legend of the line color for each Series (by Y-Field name).
 
# Enable the X-Axis title and enter value as desired.
 
# Enable the X-Axis labels and rotate them as desired.
=== Configuring the X-Axis ===
# Enable the Y-Axis title and enter value as desired.
 
# Enable the Y-Axis labels and rotate them as desired.
# Select the desired '''X-Field''' to use for the X-Axis of the Chart.
#* Complete "Options" and "Actions" steps as described in [[Widgets|Add/Edit/Remove a Widget]].
#* The "rows" of this column of data will make up the X-Axis.
If you're using ''Sample.Data.ChartData'', then select "Month" to be the X-Field.
 
 
=== Type ===
Select an option for <b>Type</b> from the drop-down box.  This will be used to determine how the data is translated by AppBoard into the labels that are shown along the x-axis:
* '''CategoryAxis''': This is the default. The "rows" observed in the selected column of data will make up the X-Axis.
* '''DateTimeAxis''': X-axis values are determined as time-based values such as hours, days, weeks, or years.
 
 
=== Configuring a Series (Y-Axis) ===
* Click the "Add" button in the button toolbar of the Series DataGrid.
* Repeat for any additional series.
* Series may be removed with the "Remove" button next to the "Add" button.
* Values contained within the "Y-field" will determine the height of each column in the series.
If you're using ''Sample.Data.ChartData'', then select "Hardware" as the Y-field
 
 
=== Fill Style ===
* Fill style is purely aesthetic, and sets the rendering style that will be used for the series.
* The available rendering styles are Solid, Gradient, and Cylinder
[[Image:columnChart.png|Sample Area Chart]]
 
 
=== Color === 
* Color will work in conjunction with Fill Style to distinguish one series from another.
* You can select color by clicking on the color swatches in the color picker, or you can manually enter a hexadecimal color value.
 
 
=== Alpha ===
* Alpha sets the opacity of the series.
* Reducing the Alpha lets you see grid lines show through the columns.
[[Image:columnChart_Alpha.png|Sample Column Alphas]]
 
 
=== Series Type ===
To select a different Series Type, click the pulldown in the bottom toolbar of the Series Data Grid.  The examples below were created using 'Hardware' and 'Totals' from ''Sample.Data.ChartData''.
* '''clustered''':  Chart elements for each series are grouped by category. This is the default value for BarChart and ColumnChart controls.
* '''overlaid''': Chart elements for each series are rendered on top of each other, with the element corresponding to the last series on top. This is the default value for AreaChart controls.
* '''stacked''': Chart elements for each series are stacked on top of each other. Each element represents the cumulative value of the elements beneath it.
* '''100%''': Chart elements are stacked on top of each other, adding up to 100%. Each chart element represents the percentage that the value contributes to the sum of the values for that category. 
[[Image:columnChart_SeriesType.png|Sample Column Series]]
 
 
=== Additional Chart Options ===
* Check or uncheck "Show Legend" as desired to include a legend of the line color for each Series (by Y-Field name).
* Enable the X-Axis title and enter value as desired.
* Enable the X-Axis labels and rotate them as desired.
* Enable the Y-Axis title and enter value as desired.
* Enable the Y-Axis labels and rotate them as desired.
 
 
=== Additional Configuration Steps ===
* Enter the following information on the <b>Options</b> tab:
** [Optional] Configure the [[Option_Show_Search_Text|Show Search Text]] Option.
** [Optional] Configure the [[Option_Use_Filter|Use Filter]] Option.
** [Optional] Configure the [[Option_Configure_Alternative_Widget|Configure Alternative Widget]] Option.
** [Optional] Configure the [[Option_Help|Help]] Option.
 
 
* Enter the following information on the <b>Actions</b> tab:
** Click <b>Add Event Action</b> to configure one or more [[Actions|Actions]] to be invoked when a user clicks on the Column Chart Widget.  The action will apply to the current data record being displayed.
 
 
== Sample Data ==
Instructions for bringing sample chart data into AppBoard can be found here: [[Sample_Chart_Data|Sample Chart Data]]

Revision as of 16:22, 1 May 2012

A Column Chart Widget is a graphical Widget that displays rectangular bars with lengths proportional to the values that they represent. The bars are plotted vertically, as opposed to a Bar Chart, which plots horizontal bars.


Column Chart Sample


How To Create a Column Chart Widget

For instructions on creating a Widget, see the general instructions in Adding Widgets. The Column Widget type is located under the Charts category on the Widget selection screen.


How To Configure a Column Chart Widget

Follow the instructions above to create the basic "ColumnChart" Widget, and then perform the following steps to configure a Column Chart Widget:


Select a Data Collection

Select a Data Collection that contains the information you would like to use for this Widget.

  • Click the "Data Collection" pulldown, then select from the list of available Data Collections.
  • If you're using the sample CSV data, select "Sample.Data.ChartData".
  • If there are no Data Collections available in the pulldown, then click here for instructions on how to bring in some Sample Chart Data, or refer to Add/Edit/Remove a Data Collection.


Configuring the X-Axis

  1. Select the desired X-Field to use for the X-Axis of the Chart.
    • The "rows" of this column of data will make up the X-Axis.
If you're using Sample.Data.ChartData, then select "Month" to be the X-Field.


Type

Select an option for Type from the drop-down box. This will be used to determine how the data is translated by AppBoard into the labels that are shown along the x-axis:

  • CategoryAxis: This is the default. The "rows" observed in the selected column of data will make up the X-Axis.
  • DateTimeAxis: X-axis values are determined as time-based values such as hours, days, weeks, or years.


Configuring a Series (Y-Axis)

  • Click the "Add" button in the button toolbar of the Series DataGrid.
  • Repeat for any additional series.
  • Series may be removed with the "Remove" button next to the "Add" button.
  • Values contained within the "Y-field" will determine the height of each column in the series.
If you're using Sample.Data.ChartData, then select "Hardware" as the Y-field


Fill Style

  • Fill style is purely aesthetic, and sets the rendering style that will be used for the series.
  • The available rendering styles are Solid, Gradient, and Cylinder

Sample Area Chart


Color

  • Color will work in conjunction with Fill Style to distinguish one series from another.
  • You can select color by clicking on the color swatches in the color picker, or you can manually enter a hexadecimal color value.


Alpha

  • Alpha sets the opacity of the series.
  • Reducing the Alpha lets you see grid lines show through the columns.

Sample Column Alphas


Series Type

To select a different Series Type, click the pulldown in the bottom toolbar of the Series Data Grid. The examples below were created using 'Hardware' and 'Totals' from Sample.Data.ChartData.

  • clustered: Chart elements for each series are grouped by category. This is the default value for BarChart and ColumnChart controls.
  • overlaid: Chart elements for each series are rendered on top of each other, with the element corresponding to the last series on top. This is the default value for AreaChart controls.
  • stacked: Chart elements for each series are stacked on top of each other. Each element represents the cumulative value of the elements beneath it.
  • 100%: Chart elements are stacked on top of each other, adding up to 100%. Each chart element represents the percentage that the value contributes to the sum of the values for that category.

Sample Column Series


Additional Chart Options

  • Check or uncheck "Show Legend" as desired to include a legend of the line color for each Series (by Y-Field name).
  • Enable the X-Axis title and enter value as desired.
  • Enable the X-Axis labels and rotate them as desired.
  • Enable the Y-Axis title and enter value as desired.
  • Enable the Y-Axis labels and rotate them as desired.


Additional Configuration Steps


  • Enter the following information on the Actions tab:
    • Click Add Event Action to configure one or more Actions to be invoked when a user clicks on the Column Chart Widget. The action will apply to the current data record being displayed.


Sample Data

Instructions for bringing sample chart data into AppBoard can be found here: Sample Chart Data

Retrieved from "http://ab.edge-technologies.com/docs/index.php?title=Appboard/old/widgets/column_chart&oldid=1100"