{% extends "base_charts.html" %}

{% block extra_head %}
    {{ block.super }}
    <style>
        #toolbar {
            display: none;
        }
    </style>
{% endblock %}

{% block content %}
    {{ block.super }}
    <script>
        $(document).ready(function() {
            var model = new ChartData({}, {
                url: '{% url "entity_data" serial monitored_entity_id "capacity" %}',
                chart_start: chart_start,
                chart_end: chart_end
            });
            var annotations = new AnnotationFormatter({
                collection: new ChartAnnotations([], {url: '{% url "annotations" serial %}?monitored_entity_id={{ monitored_entity_id }}'})
            });
            var charts = [
                new ChartView({
                    model: new PartialChartData({}, {parent: model, column_indices: [0, 6, 5]}),
                    annotations: annotations,
                    chart_options: {
                        title: 'CAPACITY TREND',
                        labels: ['timestamp', 'Virtual Allocated', 'Physical Used'],
                        stackedGraph: false,
                        axes: {
                            y: {
                                valueFormatter: formatters.capacity,
                                axisLabelFormatter: formatters.capacity
                            },
                            x: {
                                drawGrid: false
                            }
                        },
                        colors: ['#b2ff59', '#f64747']
                    }
                })
            ];
            MainApp.start({charts: charts, autoslide: false});
        });
    </script>
{% endblock %}