Show graph data on a web page in the form of a line 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.
- Background Color
- The background color of the canvas.
- Line Width
- The width of the graph lines, in pixels.
- Fill Area Under Line
- If selected, the regions under the graph lines are filled with various solid colors (determined by Color Scheme), and the graph lines are all the same color (specified by Line Color). If not selected, the regions under the graph lines are not filled, and the graph lines have different colors, which are determined from Color Scheme.
- Line Color
- When Fill Area Under Line is selected, this is color used to draw all of the graph lines.
- Color Scheme
- The colors used to identify the different lines that are part of the graph. The exact interpretation depends on Fill Area Under Line. Set the value of this option to "Custom..." to select custom colors for each line.
- Color
- If 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 lines in the graph.
Options: Axis & Label Appearance
- 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.
- Y-Axis Label Format
- The numerical precision of label values on the y-axis. Values can be rounded to whole numbers, tenths, hundredths, or thousandths.
- Y-Axis Number of Ticks
- The number of ticks (and hence, the number of labels) that should appear on the y-axis.
- Y-Axis Use Default Min/Max
- Should the minimum and maximum values on the y-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.
- Y-Axis Min Value Tick
- If Y-Axis Use Default Min/Max is not selected, the minimum value represented on the y-axis.
- Y-Axis Max Value Tick
- If Y-Axis Use Default Min/Max is not selected, the maximum value represented on the y-axis.
- X-Axis Number of Ticks
- The number of ticks (and hence, the number of labels) that should appear on the x-axis.
- X-Axis Label Location
- The position of tick/label on the x-axis.
- X-Axis Label Text
- The text value of an x-axis label.
- Number of Lines
- Corresponds to the number of graph lines in the graph.
- Number of Values
- Corresponds to the number of data points on a particular graph line in the graph.
- X-Axis Value
- The x-axis numeric value for a data point on a graph line.
- Y-Axis Value
- The y-axis numeric value for a data point on a graph line.