![]() ![]() Avoid: Do not use fixed sizes for horizontal dimensions. Guidelines Scale horizontally when panel or window size changes Best practice: Adjust all elements so that the visualization scales the whole width. Make sure that the custom visualization accommodates different display sizes. Position the tooltip pointer at the center of any tooltip edge. Use a 16x12px swatch for each item in a legend. Keep gridlines and axis lines muted to maintain user focus on the data. Set a 15px margin around the visualization panel. Follow the spacing and margin guidelines shown here. Proper spacing between tick marks, labels, and legends makes a visualization look clean and legible. Colors for values between the maximum and minimum are set according to the number of bins configured for results. Show minimum values using a lighter version of the base color.Įnsure that the minimum value appears in a visualization by using a value no lighter than 10% of the base color. ![]() The following hex values correspond to base colors for maximum values. Sequential colors emphasize high values in a results set. Shades for values between the maximum and minimum depend on the number of bins configured for results. For example, these colors can indicate value ranges in a results set.Ĭategorical colors show how results belong to different categories.ĭivergent colors emphasize high and low values in a results set. font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica Color #3C444D (Dark gray) Label settings Specify the CSS font-family property as shown here. For tooltip text guidelines, see Tooltips.įont Lucida Grande typeface. Use the following settings for all chart axis, label, and legend text. Key components Visualization component that adds meaning or emphasis Presentation How the visualization presents information or behavior Information or behavior What kinds of information or behavior the visualization shows What the user can do with the visualization You can use the following components and term suggestions to create a custom visualization description. Show physical asset locations in real time. Use a baseline to show positive and negative changes for multiple time series. Tell users what they can do with the visualization.īest practice: "Track a metric and trends over time."ĭo not describe what the visualization looks like.Īvoid: "This visualization has a circle with an arrow."įocus on a task that users can accomplish.īest practice: "Show how a metric varies across geographic regions."Īvoid technical descriptions of components.Īvoid: "This visualization has a map that can be used with searches that generate an aggregate value."īest practice: "Compare values or fields."Īvoid: "A color meter visualization shows a value in a range." Help users decide whether to use the visualization. Make sure that all strings in nf follow these character limits before publishing the app. List these attributes in the custom visualization nf stanza.ĭescription = Track a metric with context and trends. Provide a visualization label and description to display in the Visualization Picker. Make sure that the image fills the available space fully.ĭo not use a screenshot with gaps or borders. These visualization icons are difficult to understand. Use an appropriate detail level in the screenshot. If no screenshot is available, a generic image appears. Provide a preview.png file in the app directory. To create a user experience that is consistent with standard Splunk visualizations, follow these guidelines.Ĭustom visualization preview icons, labels, and descriptions appear in the Visualization Picker user interface.Ĭreate a custom visualization preview icon. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |