added js to auto

technovangelist · technovangelist · commit 32654c5765a2 · 2016-03-08T13:47:58.000-05:00
diff --git a/content/graphing.md b/content/graphing.md
@@ -3,6 +3,32 @@ title: Graphing Primer
 kind: documentation
 has_snippets: True
 ---
+<script type="text/javascript">
+ $(document).ready(function () {
+  location.hash && $(location.hash + '.collapse').collapse('show');
+});
+  $(document).ready(function () {
+    var targetloc = window.location.hash;
+    if ($(targetloc).is(":hidden"))
+    {
+      var collapseparent = $(targetloc).closest('div[class^="collapse"]');
+      // $('#section').html(collapseparent);
+      $(collapseparent).show();
+      $('#'+collapseparent.attr('id')+'Open').hide();
+      $('#'+collapseparent.attr('id')+'Close').hide();
+      window.location.hash = targetloc;
+
+  };
+});
+ $(function(){
+  $(document).on('click', 'a[href^="#"]', function(ev){
+    var targetId = $(ev.target).attr('href'),
+      $target = $(targetId);
+
+      $target.parents('.collapse').addClass('in').css({height: ''});
+  });
+})
+</script>
 
 ## Find the Graph Editor
 {: #editor}
@@ -347,14 +373,15 @@ jQuery(function(){
 <div class="collapse" id="collapseJSON" markdown="1">
 
 ## Graphing with the JSON editor
+{: #jgraphing}
 
 
 [Close JSON tab details](#collapseJSON){: role="button" data-toggle="collapse" aria-controls="collapseJSON" id="collapseJSONClose"}
 
 ![JSON Editor](/static/images/references-graphing-jsoneditor.png)
 
 ### Grammar
-{: #grammar}
+{: #jgrammar}
 
 
 The graph definition language is well-formed JSON and is structured in four parts:
@@ -393,6 +420,7 @@ In other words at the highest level the JSON structure is a dictionary with two,
 \* *only requests and viz are required.*
 
 ## Requests
+{: #jrequests}
 
 The general format for a series is:
 
@@ -409,6 +437,7 @@ A Series can be further combined together via binary operators (+, -, /, *):
     metric{scope} [by {group}] operator metric{scope} [by {group}]
 
 #### Functions
+{: #jfunctions}
 
 You can apply functions to the result of each query. <a href="/examples/graphing functions/">Examples</a>
 
@@ -630,14 +659,17 @@ future. For more on <code>.as_count()</code> please see our blog post
 <a target="_blank" href="https://www.datadoghq.com/2014/05/visualize-statsd-metrics-counts-graphing/">here</a>.
 
 #### Aggregation Method
+{: #jaggregation}
 
 In most cases, the number of data points available outnumbers the maximum number that can be shown on screen. To overcome this, the data is aggregated using one of 4 available methods: average,  max, min, and sum.
 
 #### Metrics
+{: #jmetrics}
 
 The metric is the main focus of the graph. You can find the list of metrics available to you in the [Metrics Summary](https://app.datadoghq.com/metric/summary). Click on any metric to see more detail about that metric, including the type of data collected, units, tags, hosts, and more.
 
 #### Scope
+{: #jscope}
 
 A scope lets you filter a Series. It can be a host, a device on a host
 or any arbitrary tag you can think of that contains only alphanumeric
@@ -653,10 +685,12 @@ Examples of scope (meaning in parentheses):
     *                                 (wildcard for everything)
 
 #### Groups
+{: #jgroups}
 
 For any given metric, data may come from a number of hosts. The data will normally be aggregated from all these hosts to a single value for each time slot. If you wish to split this out, you can by any tag. To include a data point seperated out by each host,  use {host} for your group.
 
 #### Arithmetic
+{: #jmath}
 
 You can apply simple arithmetic to a Series (+, -, * and /). In this
 example we graph 5-minute load and its double:
@@ -688,6 +722,7 @@ apples by oranges.
 
 
 ### Events
+{: #jevents}
 
 You can overlay any event from Datadog. The general format is:
 
@@ -715,6 +750,7 @@ or if you're looking to display all errors:
 
 
 ### Visualization
+{: #jviz}
 
 Data can be visualized in a few different ways:
 
@@ -733,6 +769,7 @@ The Time Series can be further broken down to:
 4. as bar charts
 
 #### Line Charts
+{: #jlinecharts}
 
 <img src="/static/images/multi-lines.png" style="width:100%; border:1px solid #777777"/>
 
@@ -751,6 +788,7 @@ The representation is automatically derived from having multiple `requests` valu
       ]
 
 #### Stacked Series
+{: #jstacked}
 
 <img src="/static/images/slice-n-stack.png" style="width:100%; border:1px solid #777777"/>
 
@@ -765,6 +803,7 @@ In the case of related Time Series, you can easily draw them as stacked areas by
 Instead of one query per chart you can aggregate all queries into one and simply concatenate the queries.
 
 #### Slice-n-Stack
+{: #jslice}
 
 A useful visualization is to represent a metric shared across
 hosts and stack the results. For instance, when selecting a tag that
@@ -794,7 +833,7 @@ to get traffic for all the tagged hosts, split by host and network device.
 
 
 ### Y-Axis Controls
-{: #yaxis}
+{: #jyaxis}
 
 The Datadog y-axis controls (currently just via the JSON editor) allow you to:
 <ul>
@@ -841,6 +880,7 @@ Examples:
     }
 
 #### Filtering
+{: #jfilter}
 
 Filter configuration allows you to automatically change y-axis bounds based on a
 threshold. Thresholds can be a percentage or an absolute value, and it can apply to
@@ -915,6 +955,7 @@ Here is a full JSON example:
 
 
 #### Examples
+{: #jexamples}
 
 Here is an example using the <code>rate()</code> function, which takes only a single metric as a parameter.  Other functions, with the exception of <code>top()</code> and <code>top_offset()</code>, have identical syntax.
 
