{% if fb_interval_results %}
<h4> Frame Blasting Flows: Results Over Time</h4>
    <script>
        function no_conversion(a) {return a;}
    
        function conversion_function(unit) {
            // base units: bps or ns
            let conversion = no_conversion
            if(unit == "kbps" || unit == "MICRO") {
                 conversion = function(val) {return val==null?null:val / 1e3;}
            } else if(unit == "Mbps" || unit == "MILLI") {
                 conversion = function(val) {return val==null?null:val / 1e6;}
            } else if(unit == "Gbps") {
                 conversion = function(val) {return val==null?null:val / 1e9;}
            }
            return conversion;
        }
        
	    function get_latency_unit_name(unit) {
	        if (unit == "NANO") {
	            return "ns"
	        } else if (unit == "MICRO") {
	            return "us"
	        } else if (unit == "MILLI") {
	            return "ms"
	        }
	        
	        return "unit"    
	    }

        throughput_unit = "{{initial_throughput_unit}}";
        latency_unit = "{{initial_latency_unit}}";
        max_time = "{{max_time}}";
    
        // Does the actual rendering
        function render_fb_graph(div_id, values) {
            require(["gurufb"], function(render) {
                let instanceData = {
                    "parameter_data_rate_unit":throughput_unit, 
                    "parameter_time_unit": get_latency_unit_name(latency_unit),
                    "throughput_conversion": conversion_function(throughput_unit),
                    "latency_conversion": conversion_function(latency_unit),
                    "series": [values],
                    "id":div_id,
                    "height":300,
                    "parameter_max_time":max_time
                };
                render(instanceData);
            });
        };          
        
        // Helper function to create the Frameblasting graph
        // Ties this HTML element into the other fields on this page.
        function create_fb_graph(div_id, values) {
            function select_new_throughput_for_graph() {
                throughput_unit = this.value
                render_fb_graph(div_id, values)
            }
            $(".throughput_speed_select").change(select_new_throughput_for_graph);

            function select_new_latency_unit_for_graph() {
                latency_unit = this.value
                render_fb_graph(div_id, values)
            }
            $(".latency_unit_select").change(select_new_latency_unit_for_graph);

            render_fb_graph(div_id, values)
        }
    </script>

    {% for fb_result in fb_interval_results %}
         {% set pid = "fb_overtime"|uniqueId %}
        <div id="{{pid}}" style="height: 300px;">
              <script>

                  create_fb_graph("{{pid}}", {{fb_result|tojson}});
              </script>
        </div>
    {% endfor %}
{% endif %}

{% if ccdf_vals %}
    <h4> Frame Blasting Flows: Latency CCDF and CDF</h4>
    
    
        <script>
        function no_conversion(a) {return a;}
    
        function conversion_function(unit) {
            // base units: bps or ns
            let conversion = no_conversion
            if(unit == "kbps" || unit == "MICRO") {
                 conversion = function(val) {return val==null?null:val / 1e3;}
            } else if(unit == "Mbps" || unit == "MILLI") {
                 conversion = function(val) {return val==null?null:val / 1e6;}
            } else if(unit == "Gbps") {
                 conversion = function(val) {return val==null?null:val / 1e9;}
            }
            return conversion;
        }
        
	    function get_latency_unit_name(unit) {
	        if (unit == "NANO") {
	            return "ns"
	        } else if (unit == "MICRO") {
	            return "us"
	        } else if (unit == "MILLI") {
	            return "ms"
	        }
	        
	        return "unit"    
	    }

        throughput_unit = "{{initial_throughput_unit}}";
        latency_unit = "{{initial_latency_unit}}";
    
        // Does the actual rendering
        function render_ccdf_graph(div_id, values) {
            require(["guruccdf"], function(render) {
                let instanceData = {
                    "parameter_data_rate_unit":"packets",
                    "parameter_time_unit":get_latency_unit_name(latency_unit),
                    "latency_conversion": conversion_function(latency_unit),
                    "series": [{{ccdf_result |tojson}}],
                    "id":{{ccdf_pid}},
                    "height":300
                };
                render(instanceData);
            });
        };          
        
        // Helper function to create the Frameblasting graph
        // Ties this HTML element into the other fields on this page.
        function add_to_ccdf_graph(div_id, values) {
            function select_new_latency_unit_for_graph() {
                latency_unit = this.value
                render_ccdf_graph(div_id, values)
            }
            $(".latency_unit_select").change(select_new_latency_unit_for_graph);

            render_ccdf_graph(div_id, values)
        }
    </script>
    
    {% set ccdf_pid = "ccdf_element"|uniqueId %}
    <div id="{{ccdf_pid }}" style="height: 1px;">
        {% for ccdf_result in ccdf_vals %}
        <script>
            add_to_ccdf_graph("{{pid}}", {{fb_result|tojson}});
        </script>
    </div>
    {% endfor %}
{% endif %}