Show graph data on a web page in the form of a bar graph.
The graph is generated and drawn entirely on the web browser client. Using PHP or other server-side languages, one can populate the graph with customized data, by adjusting the JavaScript that is included in the web page with the component. After inserting the component, find the line of JavaScript code beginning with "layout.addDataset", and populate custom data from the server when generating the page.
Internet Explorer 7+, Firefox 3+, Safari 4+
Options: General Appearance
- Unique Element ID
- The value for the id attribute assigned to the inserted root HTML tag for the component. This value is used to uniquely identify the component.
- Canvas Width
- The width of the canvas on which the bar graph is drawn, in pixels.
- Canvas Height
- The height of the canvas on which the bar graph is drawn, in pixels.
- Bar Width
- The percentage of available space that is filled by the bars.
- Bar Orientation
- Indicates in the bars should appear vertically (the default option) or horizontally.
- Background Color
- The background color of the canvas.
- Bar Border Color
- The color of the border drawn around each bar.
- Bar Border Width
- The width of the border drawn around each bar, in pixels.
- Bar Color Scheme
- Specifies the color of bars in the graph. Note that bars are colored the same across data elements, so the colors will only vary when there are multiple values per data element. By default, there is only 1 value per data element, so all bars have the same color. See Options: Data for more information. Select "Custom..." for the color scheme to manually define the bar colors.
- Bar Color
- If Bar Color Scheme is set to "Custom...", this option is available to define the custom colors. The number of colors to select will correspond to the number of values per data element. See Options: Data for more information.
- Axis Line Color
- The color of both axes.
- Label Font Size
- The size of the text for labels on both axes, in pixels.
- Label Font Color
- The color of the text for labels on both axes.
- Label Width
- The maximum width of axis labels, in pixels. Note that label text will wrap onto additional lines if it exceeds the Label Width value.
- Left Padding
- The padding between the vertical axis and the left side of the canvas.
- Bottom Padding
- The padding between the horizontal axis the bottom of the canvas.
- Value Label Format
- The numerical precision of label values on the value axis. Values can be rounded to whole numbers, tenths, hundredths, or thousandths.
- Number of Value Ticks
- The number of ticks (and hence, the number of labels) that should appear on the value axis.
- Use Default Min/Max Value
- Should the minimum and maximum values on the value axis automatically be determined from the data? Note that if this option is enabled, the min/max values are computed in the web browser client when the page is loaded, so they will adapt to any changes made in the graph data after the component is inserted.
- Min Value Tick
- If Use Default Min/Max Value is not selected, the minimum value represented on the value axis.
- Max Value Tick
- If Use Default Min/Max Value is not selected, the maximum value represented on the value axis.
- Number of Bar Types
- Corresponds to the number of bars that will appear for each label. This option should be greater than 1 when you want to describe multiple aspects for a data element. For example, if each data element represents a product, you might specify 2 for Number of Bar Types: one value describing the price before tax and one describing the price after tax.
- Values per Bar Type
- The number of labels, i.e., the number of times each bar type will appear.
- Labels
- The text label to describe an individual data element.
- Values
- The data values for the selected bar type. The number of values corresponds to the value of Values per Bar Type.