Appboard/old/widgets/bar chart - Revision history

imported>Jason.nicholls at 14:31, 17 July 2014

2014-07-17T14:31:38Z

← Older revision		Revision as of 14:31, 17 July 2014
Line 1:		Line 1:
	A Bar Chart Widget is a graphical Widget that displays rectangular bars with lengths proportional to the values that they represent. The bars are plotted horizontally, as opposed to a [[~~Column_Chart_Widget~~\|Column Chart]], which plots vertical bars.		{{DISPLAYTITLE:Bar Chart Widget}}
			[[Category:AppBoard old]]
			A Bar Chart Widget is a graphical Widget that displays rectangular bars with lengths proportional to the values that they represent. The bars are plotted horizontally, as opposed to a [[appboard/old/widgets/column_chart\|Column Chart]], which plots vertical bars.

imported>Jason.nicholls: moved Bar Chart Widget to appboard/old/widgets/bar chart

2014-07-17T14:26:54Z

moved Bar Chart Widget to appboard/old/widgets/bar chart

← Older revision	Revision as of 14:26, 17 July 2014
(No difference)

imported>Jason.nicholls: /* How To Create a Bar Chart Widget */

2014-07-17T07:01:25Z

How To Create a Bar Chart Widget

← Older revision		Revision as of 07:01, 17 July 2014
Line 6:		Line 6:

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


	== How To Configure a Bar Chart Widget ==		== How To Configure a Bar Chart Widget ==

imported>Jason.nicholls: /* Additional Configuration Steps */

2014-07-17T06:59:03Z

Additional Configuration Steps

← Older revision		Revision as of 06:59, 17 July 2014
Line 66:		Line 66:

	=== Additional Configuration Steps ===		=== Additional Configuration Steps ===
	* Provide additional configuration, if needed, on the <b>Options</b> tab. For details on the available Options, see [[~~Options~~\|Options]].		* Provide additional configuration, if needed, on the <b>Options</b> tab. For details on the available Options, see [[appboard/old/options\|Options]].

imported>Jason.nicholls: /* Additional Configuration Steps */

2014-07-17T04:14:43Z

Additional Configuration Steps

← Older revision		Revision as of 04:14, 17 July 2014
Line 70:		Line 70:

	* Enter the following information on the <b>Actions</b> tab:		* 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 Bar Chart Widget. The action will apply to the current data record being displayed.		** Click <b>Add Event Action</b> to configure one or more [[appboard/old/actions\|Actions]] to be invoked when a user clicks on the Bar Chart Widget. The action will apply to the current data record being displayed.


	== Sample Data ==		== Sample Data ==

	Instructions for bringing sample chart data into AppBoard can be found here: [[Sample_Chart_Data\|Sample Chart Data]]		Instructions for bringing sample chart data into AppBoard can be found here: [[Sample_Chart_Data\|Sample Chart Data]]

imported>Jason.nicholls: /* Select a Data Collection */

2014-07-17T03:58:16Z

Select a Data Collection

← Older revision		Revision as of 03:58, 17 July 2014
Line 17:		Line 17:
	* Click the "Data Collection" pulldown, then select from the list of available Data Collections.		* 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 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\|Sample Chart Data]], or refer to [[~~Data_Collections~~\|Add/Edit/Remove a Data Collection]].		* 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 [[appboard/old/data_collections\|Add/Edit/Remove a Data Collection]].


	=== Configuring the Y-Axis Field ===		=== Configuring the Y-Axis Field ===

imported>Jason.nicholls at 15:30, 27 August 2013

2013-08-27T15:30:07Z

← Older revision		Revision as of 15:30, 27 August 2013
Line 2:		Line 2:


	[[Image:~~barChartExample~~.png\|thumb\|center\|500px\|Bar Chart Sample]]		[[Image:BarChartExample.png\|thumb\|center\|500px\|Bar Chart Sample]]


Line 38:		Line 38:
	* Fill style is purely aesthetic, and sets the rendering style that will be used for the series.		* 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.		* The available rendering styles are Solid, Gradient, and Cylinder.
	[[Image:~~barChart~~.png\|Sample Area Chart]]		[[Image:BarChart.png\|Sample Area Chart]]


Line 54:		Line 54:
	* Alpha sets the opacity of the series and can be adjusted for both Color and Pattern.		* Alpha sets the opacity of the series and can be adjusted for both Color and Pattern.
	* Reducing the Alpha lets you see grid lines show through the bars.		* Reducing the Alpha lets you see grid lines show through the bars.
	[[Image:~~barChart_Alpha~~.png\|Sample Column Alphas]]		[[Image:BarChart_Alpha.png\|Sample Column Alphas]]


Line 63:		Line 63:
	* '''stacked''': Chart elements for each series are stacked on top of each other. Each element represents the cumulative value of the elements beneath it.		* '''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.		* '''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:~~barChart_SeriesType~~.png\|Sample Column Series]]		[[Image:BarChart_SeriesType.png\|Sample Column Series]]

imported>Cmace: copied from internal

2013-01-02T14:24:18Z

copied from internal

← Older revision		Revision as of 14:24, 2 January 2013
Line 30:		Line 30:
	* Repeat for any additional series.		* Repeat for any additional series.
	* Series may be removed with the "Remove" button next to the "Add" button.		* Series may be removed with the "Remove" button next to the "Add" button.
			* Series may be reordered in the Series DataGrid by clicking the upper-right corner of a row and dragging the Series up or down the grid.
	* Values contained within the "Y-field" will determine the width of each bar in the series.		* Values contained within the "Y-field" will determine the width of each bar in the series.
	If you're using ''Sample.Data.ChartData'', select "Hardware" as the X-field.		If you're using ''Sample.Data.ChartData'', select "Hardware" as the X-field.
Line 43:		Line 44:
	* Color will work in conjunction with Fill Style to distinguish one series from another.		* 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.		* You can select color by clicking on the color swatches in the color picker, or you can manually enter a hexadecimal color value.


			==== Pattern ====
			* In addition to Color, different Pattern options will help users distinguish one series from another
			* Click on the Pattern button to view and select from numerous pattern options.


	=== Alpha ===		=== Alpha ===
	* Alpha sets the opacity of the series.		* Alpha sets the opacity of the series and can be adjusted for both Color and Pattern.
	* Reducing the Alpha lets you see grid lines show through the bars.		* Reducing the Alpha lets you see grid lines show through the bars.
	[[Image:barChart_Alpha.png\|Sample Column Alphas]]		[[Image:barChart_Alpha.png\|Sample Column Alphas]]

imported>Cmace: changed options section

2012-05-03T16:14:55Z

changed options section

← Older revision		Revision as of 16:14, 3 May 2012
Line 61:		Line 61:

	=== Additional Configuration Steps ===		=== Additional Configuration Steps ===
	* ~~Enter the following information~~ on the <b>Options</b> tab:		* Provide additional configuration, if needed, on the <b>Options</b> tab. For details on the available Options, see [[Options\|Options]].
	** [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~~.

imported>Cmace: copied from internalwiki

2012-05-01T16:15:24Z

copied from internalwiki

@@ Line 1: / Line 1: @@
-== Adding a Bar Chart Widget ==
+A Bar Chart Widget is a graphical Widget that displays rectangular bars with lengths proportional to the values that they represent.  The bars are plotted horizontally, as opposed to a [[Column_Chart_Widget|Column Chart]], which plots vertical bars.
-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:barChartExample.png|thumb|center|500px|Bar Chart Sample]]
-# 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 X values (bar lengths) which will be plotted against the corresponding Y value.
+== How To Configure a Bar Chart Widget ==
-#* Click the "Data Collection" pulldown, then select from the list of available Data Collections.
+Follow the instructions above to create the basic "Bar Chart" Widget, and then perform the following steps to configure a Bar 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-Axis.
-# Click "Add" for the Series.
+=== Select a Data Collection ===
-# Select the a numeric field using the drop down list. The values of this field determine the length of the corresponding bar.
+Select a '''Data Collection''' that contains the information you would like to use for this Widget.
-# Select the color for this set of bars 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 color of the bars in each Series (by X-Field name).
-# Enable the X-Axis title and enter value as desired.
-# Enable the X-Axis labels and rotate them as desired.
+=== Configuring the Y-Axis Field ===
-# Enable the Y-Axis title and enter value as desired.
+* Select the desired '''Y-Field''' to use for the Y-Axis of the Chart.
-# Enable the Y-Axis labels and rotate them as desired.
+** The "rows" of data from this column will make up the Y-Axis.
-#* Complete "Options" and "Actions" steps as described in [[Widgets|Add/Edit/Remove a Widget]].
+ If you're using ''Sample.Data.ChartData'', then select "Month" to be the Y-Field.