extends base html block extra_js script src MEDIA_URL amcharts amchart

{% extends 'base.html' %}

{% block extra_js %}
<script src="{{ MEDIA_URL }}amcharts/amcharts.js" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
function buildChart(data, label, divId) {
    var chart = new AmCharts.AmSerialChart();
    chart.dataProvider = data;
    chart.categoryField = 'day';
    chart.dataDateFormat = 'YYYY-MM-DD';

    var legend = new AmCharts.AmLegend();
    legend.useGraphSettings = true;
    chart.addLegend(legend);

    var cAxis = chart.categoryAxis;
    cAxis.parseDates = true;
    cAxis.minPeriod = 'DD';

    var graph = new AmCharts.AmGraph();
    graph.valueField = 'value';
    graph.type = 'line';
    graph.balloonText = '[[value]]';
    graph.bullet = 'round';
    graph.title = label;

    chart.addGraph(graph);
    chart.write(divId);
};
</script>
<script>
var dataReg = eval('({{ data_reg|escapejs }})');
var dataSearch = eval('({{ data_search|escapejs }})');
$(function() {
    buildChart(dataReg, 'New users', 'chart-reg');
    buildChart(dataSearch, 'Searches', 'chart-search');
});
</script>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-5">
        <div id="chart-reg" style="width: 100%; height: 300px;"></div>
    </div>
    <div class="col-md-5">
        <div id="chart-search" style="width: 100%; height: 300px;"></div>
    </div>
</div>
{% endblock %}