{% extends "base.html" %}

{% block includes %}
<!--link type="text/css" rel="stylesheet" href="/static/jqw/styles/jqx.base.css" /-->
<script type="text/javascript" src="/static/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/static/jqw/jqxcore.js"></script>
<script type="text/javascript" src="/static/jqw/jqxdata.js"></script>
<script type="text/javascript" src="/static/jqw/jqxchart.js"></script>
<script type="text/javascript" src="/static/jqw/jqxgauge.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

    $('#gaugeContainer0').jqxGauge({
      min: 0,
      max: 100,
      ranges: [{ startValue: 0,  endValue: 60,  style: {fill: '#00dd00', stroke: '#00dd00'}, startWidth: 1,  endWidth: 5 },
               { startValue: 60, endValue: 80,  style: {fill: '#dddd00', stroke: '#dddd00'}, startWidth: 5,  endWidth: 10 },
               { startValue: 80, endValue: 100, style: {fill: '#dd0000', stroke: '#dd0000'}, startWidth: 10, endWidth: 15 }],
      ticksMinor: { interval: 5,  size: '5%' },
      ticksMajor: { interval: 10, size: '9%' },
      value: 0,
      colorScheme: 'scheme03',
      animationDuration: 500
    });

    $('#gaugeContainer1').jqxGauge({
      min: 0,
      max: 100,
      ranges: [{ startValue: 0,  endValue: 60,  style: {fill: '#00dd00', stroke: '#00dd00'}, startWidth: 1,  endWidth: 5 },
               { startValue: 60, endValue: 80,  style: {fill: '#dddd00', stroke: '#dddd00'}, startWidth: 5,  endWidth: 10 },
               { startValue: 80, endValue: 100, style: {fill: '#dd0000', stroke: '#dd0000'}, startWidth: 10, endWidth: 15 }],
      ticksMinor: { interval: 5,  size: '5%' },
      ticksMajor: { interval: 10, size: '9%' },
      value: 0,
      colorScheme: 'scheme03',
      animationDuration: 500
    });

    $('#gaugeContainer2').jqxGauge({
      min: 0,
      max: 100,
      ranges: [{ startValue: 0,  endValue: 60,  style: {fill: '#00dd00', stroke: '#00dd00'}, startWidth: 1,  endWidth: 5 },
               { startValue: 60, endValue: 80,  style: {fill: '#dddd00', stroke: '#dddd00'}, startWidth: 5,  endWidth: 10 },
               { startValue: 80, endValue: 100, style: {fill: '#dd0000', stroke: '#dd0000'}, startWidth: 10, endWidth: 15 }],
      ticksMinor: { interval: 5,  size: '5%' },
      ticksMajor: { interval: 10, size: '9%' },
      value: 0,
      colorScheme: 'scheme03',
      animationDuration: 500
    });

    $('#gaugeLinear0').jqxLinearGauge({
      max: 70,
      min: 0,
      pointer: { size: '5%' },
      colorScheme: 'scheme02',
      ticksMajor: { size: '10%', interval: 10 },
      ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa'} },
      ranges: [{ startValue: 20, endValue: 45, style: { fill: '#FFA200', stroke: '#FFA200'} },
               { startValue: 45, endValue: 70, style: { fill: '#FF4800', stroke: '#FF4800'}}],
      value: 0
    });

    $('#gaugeLinear1').jqxLinearGauge({
      max: 70,
      min: 0,
      pointer: { size: '5%' },
      colorScheme: 'scheme02',
      ticksMajor: { size: '10%', interval: 10 },
      ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
      ranges: [ { startValue: 20, endValue: 45, style: { fill: '#FFA200', stroke: '#FFA200' } },
                { startValue: 45, endValue: 70, style: { fill: '#FF4800', stroke: '#FF4800' } } ],
      value: 0
    });

    $('#gaugeLinear2').jqxLinearGauge({
      max: 70,
      min: 0,
      pointer: { size: '5%' },
      colorScheme: 'scheme02',
      ticksMajor: { size: '10%', interval: 10 },
      ticksMinor: { size: '5%', interval: 2.5, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
      ranges: [ { startValue: 20, endValue: 45, style: { fill: '#FFA200', stroke: '#FFA200' } },
                { startValue: 45, endValue: 70, style: { fill: '#FF4800', stroke: '#FF4800' } } ],
      value: 0
    });

    var  sampleData = [ { Day:'Montag',     Klaus: 20, Dieter:  5 },
                        { Day:'Dienstag',   Klaus: 25, Dieter: 10 },
                        { Day:'Mittwoch',   Klaus: 40, Dieter: 10 },
                        { Day:'Donnerstag', Klaus: 35, Dieter: 15 },
                        { Day:'Freitag',    Klaus: 40, Dieter: 10 },
                        { Day:'Samstag',    Klaus: 45, Dieter:  5 },
                        { Day:'Sonntag',    Klaus: 40, Dieter: 15 }
    ];				
    var settings = {
      title: "Scorecard Effizienz",
      description: "",
      padding: { left: 5, top: 5, right: 5, bottom: 5 },
      titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
      source: sampleData,
      xAxis: { dataField: 'Day',
               gridLines: {visible: false}
      },
      colorScheme: 'scheme01',
      seriesGroups:[{ type: 'column', 
                      columnsGapPercent: 30, 
                      seriesGapPercent: 0, 
                      valueAxis:  { minValue: 0,
                                    maxValue: 50,
                                    unitInterval: 10,
                                    description: 'Zeit in Minuten'
                      },
                      series: [{ dataField: 'Klaus', displayText: 'Klaus'},
                               { dataField: 'Dieter',   displayText: 'Dieter'}
                      ]}
    ]};
  
    // select the chartContainer DIV element and render the chart.
    $('#chartContainer').jqxChart(settings);
   
    $('#gaugeContainer0').jqxGauge('value', 73);
    $('#gaugeContainer1').jqxGauge('value', 23);
    $('#gaugeContainer2').jqxGauge('value', 91);
    $('#gaugeLinear0').jqxLinearGauge('value', 23);
    $('#gaugeLinear1').jqxLinearGauge('value', 31);
    $('#gaugeLinear2').jqxLinearGauge('value', 64);
  });
</script>
{% endblock%}


{% block content %}
<center>
  <table id="instrumentContainer">
    <tr>
      <td><center><div id="gaugeContainer0"></div>Instr</center></td>
      <td><center><div id="gaugeContainer1"></div></center></td>
      <td><center><div id="gaugeContainer2"></div></center></td>
    </tr>
    <tr>
      <td>
	<center>
	  <table>
	    <tr>
	      <td><center><div id="gaugeLinear0"></div></center></td>
	      <td><center><div id="gaugeLinear1"></div></center></td>
	      <td><center><div id="gaugeLinear2"></div></center></td>
	    </tr>
	  </table>
	</center>
      </td>
      <td colspan="2">
	<center>
	  <div id="chartContainer" style="width:600px; height: 300px" ></div>
	</center>
      </td>
    </tr>
  </table>
</center>
{% endblock %}