Added info about the vertical lines to time series panels (#3623)

* Added vertical lines content

* Update docs/dashboards/panels/index.md

Co-authored-by: Kim <[email protected]>

* Update index.md

* crosshair info added

* Update docs/dashboards/panels/index.md

* added zoom in feature details

* minor fix

* minor fix

---------

Co-authored-by: Kim <[email protected]>
Co-authored-by: John Pipkin (Sumo Logic) <[email protected]>

Author: 3 people

docs/dashboards/panels/index.md

@@ -42,14 +42,24 @@ Available chart types:
 * [Box Plot](/docs/dashboards/panels/box-plot-charts)
 * [Heat Map](/docs/metrics/metrics-queries/heat-map)
 
+When you move the cursor over the Line, Column, Bar, Area, and Box Plot time series panels, you can see a crosshair line across the panel which displays the time-series data. If other time series panels are also configured with overlapping time range, then when you hover over one time panel, crosshair timestamp will be displayed on the other panels as well. A tooltip is used to display the time-series data along with the crosshair, which also displays information about the combination chart.
+
+:::note
+Crosshair timestamps are not available for Heatmap, Table, Categorical, and Honeycomb charts.
+:::
+
+<img src={useBaseUrl('/img/dashboards-new/panels/crosshair_1.png')} style={{border: '1px solid gray'}} alt="crosshair" width="500" /><br/><img src={useBaseUrl('/img/dashboards-new/panels/crosshair_2.png')} style={{border: '1px solid gray'}} alt="crosshair" width="500" />
+
+As a dashboard user, you are allowed to modify the time range for the selected panel or for the entire panels in the dashboard. To know more, refer to [Set Custom Time Ranges](/docs/dashboards/set-custom-time-ranges/#modify-time-ranges).
+
 ### What is the difference between a categorical and time series panel?
 
 The **categorical** panel type contains charts that graph data across categories. This includes:
 
 * Line Charts
 * Area Charts
 * Bar Charts over categories
-* Column charts over categories
+* Column Charts over categories
 * Pie Charts
 * Funnel Charts
 * Tables over categories
@@ -220,4 +230,4 @@ You can delete a panel that you no longer need.
 
 1. Go to the Dashboard in Sumo Logic that has the panel you want to delete.
 1. Hover the cursor over the **Details** icon to display the pop-up menu. <br/><img src={useBaseUrl('/img/dashboards-new/panels/delete-panel/details-option.png')} style={{border: '1px solid gray'}} alt="details option" width="800"/>
-1. Select **Delete**. <br/><img src={useBaseUrl('/img/dashboards-new/panels/delete-panel/delete-a-panel.png')} style={{border: '1px solid gray'}} alt="delete a panel" width="800"/>
+1. Select **Delete**. <br/><img src={useBaseUrl('/img/dashboards-new/panels/delete-panel/delete-a-panel.png')} style={{border: '1px solid gray'}} alt="delete a panel" width="800"/>

docs/dashboards/set-custom-time-ranges.md

@@ -22,35 +22,35 @@ Dashboard panels are limited to a 32-day maximum time range. This limitation doe
 
 To select a predefined time range:
 
-1. Click the time range shown near the upper right corner of a dashboard or dashboard panel.<br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/dashboard-setting-default.png')} alt="dash range" width="675"/>
-1. Select one of the time range options on the **Relative** tab.<br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/relative-ranges.png')} alt="relative ranges" width="300"/>
+1. Click the time range shown near the upper right corner of a dashboard or dashboard panel.<br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/dashboard-setting-default.png')} alt="dash range" style={{border: '1px solid gray'}} width="675"/>
+1. Select one of the time range options on the **Relative** tab.<br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/relative-ranges.png')} style={{border: '1px solid gray'}} alt="relative ranges" width="300"/>
 
 
 ### Choose a recently used time range
 
 To select a recently used time range:
 
 1. Click the time range shown near the upper right corner of a dashboard or dashboard panel.
-1. Click the **Recent** tab, and select a time range.<br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/recent-time-ranges.png')} alt="dash range" width="300"/>
+1. Click the **Recent** tab, and select a time range.<br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/recent-time-ranges.png')} style={{border: '1px solid gray'}} alt="dash range" width="300"/>
 
 ### Set a custom time range
 
 To set a custom time range:
 
 1. Click the time range shown near the upper right corner of a dashboard or dashboard panel.
-1. Click the **Custom** tab. <br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/custom-tab.png')} alt="custom range" width="300"/>
+1. Click the **Custom** tab. <br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/custom-tab.png')} alt="custom range" style={{border: '1px solid gray'}} width="300"/>
 1. Select start and stop dates on the calendar, and then enter start and stop times.
 1. Click **Apply**.
 
 ## Set default time ranges
 
-A dashboard has a default time range defined by its creator. The default time range is shown in the upper right of a dashboard. The default time range is displayed in gray font.<br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/dashboard-setting-default.png')} alt="dash range" width="675"/>
+A dashboard has a default time range defined by its creator. The default time range is shown in the upper right of a dashboard. The default time range is displayed in gray font.<br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/dashboard-setting-default.png')} alt="dash range" style={{border: '1px solid gray'}} width="675"/>
 
 ### Modify time ranges
 
-As a dashboard user, you can change the time range for the dashboard. After you do, the new time range is shown in blue, and a more options menu is available that allows you to revert back to the default, or make it the default time range. <br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/dashboard-setting-modified.png')} alt="dash modified" width="675"/>
+You can modify the time range in panel to zoom in for granular details, especially for charts with larger compliance periods. To do so, select and drag across date/time and click **Update dashboard time range** button to zoom in further. Now, this time range is considered as a temporary time range and all the time series panels in the dashboard will be zoomed in for the selected time range. <br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/update-dashboard-time-range.png')} alt="update-dashboard-time-range" style={{border: '1px solid gray'}} width="500"/>
 
-You can make the same time range changes to an individual panel on the dashboard—the behavior is identical. A modified panel time range appears in blue, and you can revert it to the default setting, or make it the new default time range for the panel.
+After you do, the new time range is shown in blue, and a more options menu is available that allows you to revert back to the default, or make it the default time range. <br/><img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/dashboard-setting-modified.png')} alt="dash modified" style={{border: '1px solid gray'}} width="675"/>
 
 ### Set default time ranges
 
@@ -60,6 +60,6 @@ When you make a modified time range the default, the time range appears in grey,
 
 When you change the default time range for the dashboard, the new time range will automatically be applied to all panels on the dashboard, unless you have set a new default time range default for one or more of the dashboard panels. In that case, you’ll be offered the option to **Override custom panel time ranges** with the dashboard default. If you don’t select that, the existing default time ranges for individual panels will be preserved.
 
-<img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/set-as-dashboard-default.png')} alt="dashboard default" width="400"/>
+<img src={useBaseUrl('img/dashboards-new/set-custom-time-ranges/set-as-dashboard-default.png')} alt="dashboard default" style={{border: '1px solid gray'}} width="400" />
 
 When a default time range is set for a panel, the panel won’t inherit the dashboard’s time range setting. You can change the panel back to inheriting the dashboard's time range by selecting **Inherit dashboard's time range** for the panel, or using the **Override custom panel time ranges** option, which causes every dashboard panel to inherit the dashboard's time range selection.