@extends('layouts.guest')

@section('content')
    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-lg-8">

                <div class="page-header-title">
                    <div class="d-inline">
                        <h4>Data Availability</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page-header end -->

    @php $user = Auth::user(); @endphp

    <!-- Page-body start -->
    <section class="water_scenario">

        <div class="container">
            <div class="card mb-2">
                <div class="card-block pb-2">
                    <div class="row">
                        <div class="col-md-2 mb-0 ">
                            <label class="col-md-12" for="exampleSelect1">From Year </label>
                            <select class="form-control" name="fromYear" id="fromYear">
                                @for ($year = date('Y'); $year >= 1969; $year--)
                                    <option value="{{ $year }}">{{ $year }}</option>
                                @endfor
    
                            </select>
                        </div>
                        <div class="col-md-2 mb-0 ">
                            <label class="col-md-12" for="exampleSelect1">To Year </label>
                            <select class="form-control" name="toYear" id="toYear">
                                @for ($year = date('Y'); $year >= 1969; $year--)
                                    <option value="{{ $year }}">{{ $year }}</option>
                                @endfor
    
                            </select>
                        </div>
    
                        
                        <div class="col-md-6 col-lg-2">
                            <div class="form-group">
                                <label class="visibility-hidden">Filter</label>
                                <div class="d-flex">
                                    <button type="bttton" class="btn btn-sm btn-primary text-white filter_btn mr-2"
                                        name="Search" value="Filter">Filter</button>
                                    <input type="hidden" name="regionID" id="post_regionID">
                                    <input type="hidden" name="stateCode" id="post_stateCode">
                                    <input type="hidden" name="districtCode" id="post_districtCode">
                                    <input type="hidden" name="ProjectID" id="post_ProjectID">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    
    
            <div class="row">
    
                <div class="col-sm-12">
                    <!-- Zero config.table start -->
                    <div class="card">
                        <div class="card-block">
    
                            @include('common.error')
                            <div class="table-responsive" style="display:none">
                                <h6 id="tableHeaderCircle" style="display: block;">Regions</h6>
                                <table id="regionTbl" class="table table-striped table-bordered nowrap" style="width:50%">
                                    <thead>
                                        <tr>
                                            <th>Region</th>
                                            <th>Year</th>
                                            <th>No. of Stations</th>
                                            <!-- <th>Expected Readings</th> -->
                                            <th>Data Received</th>
                                            <!-- <th>Percentage</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>
    
                                    </tbody>
                                </table>
                            </div>
    
                            <div class="table-responsive" style="display:none">
                                <h6 id="tableHeaderCircle" style="display: block;"></h6>
                                <table id="stateTbl" class="table table-striped table-bordered nowrap" style="width:50%">
                                    <thead>
                                        <tr>
                                            <th>State</th>
                                            <th>Year</th>
                                            <th>No. of Stations</th>
                                            <!-- <th>Expected Readings</th> -->
                                            <th>Data Received</th>
                                            <!-- <th>Percentage</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>
    
                                    </tbody>
                                </table>
                            </div>
    
                            <div class="table-responsive" style="display:none">
                                <h6 id="tableHeaderCircle" style="display: block;"></h6>
                                <table id="districtTbl" class="table table-striped table-bordered nowrap" style="width:50%">
                                    <thead>
                                        <tr>
                                            <th>District</th>
                                            <th>Year</th>
                                            <th>No. of Stations</th>
                                            <!-- <th>Expected Readings</th> -->
                                            <th>Data Received</th>
                                            <!-- <th>Percentage</th> -->
                                        </tr>
                                    </thead>
                                    <tbody>
    
                                    </tbody>
                                </table>
                            </div>
    
                            <div class="table-responsive" id="simpletable_div" style="display:none">
                                <div id="legend" style="margin-top: 10px !important"><span
                                        class="legend-item green"></span>Complete Data<span
                                        class="legend-item yellow"></span>Partial Data<span class="legend-item red"></span>No
                                    Data</div>
                                <style>
                                    #legend {
                                        margin-bottom: 10px;
                                    }
    
                                    .legend-item {
                                        display: inline-block;
                                        width: 20px;
                                        height: 20px;
                                        margin-right: 10px;
                                    }
    
                                    .green {
                                        background-color: #8cab6d;
                                    }
    
                                    .yellow {
                                        background-color: #ebeb65;
                                    }
    
                                    .red {
                                        background-color: #f77676;
                                    }
                                </style>
                                <table id="simpletableDataAvailablity" class="table table-striped table-bordered nowrap">
                                    <thead>
    
                                        <tr>
                                            @if(in_array(Request::segment(2), ['WL','DWLR']))
                                                <th></th>
                                            @endif
                                            <th>WellNo</th>
                                            <th>WellType</th>
                                            <th>District</th>
                                            <th>Block</th>
                                            <th>Village</th>
                                            <th>Latitude</th>
                                            <th>Longitude</th>
                                            <th>Year</th>
                                            <!-- <th>Expected</th> -->
                                            <th>Jan</th>
                                            <th>Feb</th>
                                            <th>Mar</th>
                                            <th>Apr</th>
                                            <th>May</th>
                                            <th>Jun</th>
                                            <th>Jul</th>
                                            <th>Aug</th>
                                            <th>Sep</th>
                                            <th>Oct</th>
                                            <th>Nov</th>
                                            <th>Dec</th>
                                        </tr>
                                    </thead>
                                    <tbody>
    
                                    </tbody>
    
                                </table>
                            </div>
    
    
    
                            <div class="row mt-4" id="charthydro" style="display:none">
                                <div class="col-sm-12">
                                    <div class="card">
                                        <div class="card-block">
                                            <button type="button" class="btn btn-primary btn-list"> <i class="feather icon-menu"></i>
                                            </button>
                                            <div id="div_pdfcanvas">
                                                <canvas id="canvas" style="width:100%; height:500px"></canvas>
                                                <div id="dvgraph">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                
                                </div>
                            </div>
                
                            <input type="hidden" id="isDWLR" name="isDWLR" value="{{ Request::segment(2) }}">
    
    
    
    
    
                        </div>
                    </div>
                </div>
    
            </div>
        </div>
    </section>





    <link rel="stylesheet" href="{{ asset('bower_components\data_table\dataTables.dataTables.css') }}">
    <link rel="stylesheet" href="{{ asset('bower_components\data_table\fixedColumns.dataTables.css') }}">
    <link rel="stylesheet" href="{{ asset('bower_components\data_table\buttons.dataTables.css') }}">
    <script src="{{ asset('bower_components\data_table\dataTables.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\dataTables.fixedColumns.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\fixedColumns.dataTables.js') }}"></script>

    <script src="{{ asset('bower_components\data_table\dataTables.buttons.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\buttons.dataTables.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\buttons.colVis.min.js') }}"></script>

    <script src="{{ asset('bower_components/teechart/teechart.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/teechart/teechart-extras.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/teechart/date.format.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/teechart/teechart-maps.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/teechart/teechart-editor.js') }}" type="text/javascript"></script>
    <script src="{{ asset('assets\js\moment.min.js') }}"></script>

    <script>
        var datatype = '';
        $(function() {
            $('.filter_btn').click(function() {
                datatype = '{{ Request::segment(2) }}';
                let dt = $(this).val();
                $(".loaderpk").css("display", "block");
                getData(1, '', '', datatype);
                // getResults();
            });

            $('#dataType').change(function() {
                let dt = $(this).val();
                if (dt == 'DWLR') {
                    $('#ProjectID').removeAttr('disabled');
                } else {
                    $('#ProjectID').attr('disabled', true);

                }
            });

            $('.btn-list').click(function() {
                $('#simpletable_div').show();
                $('#charthydro').hide();
                $('#graph_toolbar').hide();
            });
        });

        function getData(type, ID, year) {
            $(".loaderpk").css("display", "block");
            if (type == 1) {
                $('#post_regionID').val(ID);
            } else if (type == 2) {
                $('#post_stateCode').val(ID);
            }


            region = $('#post_regionID').val();
            state = $('#post_stateCode').val();
            district = $('#post_districtCode').val();
            ProjectID = $('#ProjectID').val();

            var dataType = '{{ Request::segment(2) }}';


            block = '';
            // console.log("year"+year);
            if (year == '') {
                year1 = $('#fromYear').val();
                year2 = $('#toYear').val();
            } else {
                year1 = year2 = year;
            }

            $.get("{{ url('/Data') }}/" + dataType, {
                type: type,
                ProjectID: ProjectID,
                state: state,
                district: district,
                block: block,
                year1: year1,
                year2: year2,
                datatype: datatype
            }, function(data) {
                
                // console.log(data);
                var result = jQuery.parseJSON(data);
                // console.log(result.data);
                var trHTML = '';

                if (type == 1) {
                    $.each(result.data, function(i, item) {
                        
                        trHTML += '<tr><td><a href="javascript:;" onclick="javascript:getData(2,\'' + item
                            .ID + '\', \'' + item.Year + '\')" class="state' + item.ID + '">' + item
                            .Location + '</a></td><td>' + item.Year + '</td><td>' + item.TotalWells +
                            '</td><td>' + item.Readings + '</td></tr>';
                    });


                    $('#stateTbl tbody').html('').append(trHTML);
                    // alert($('.region'+region).html());
                    //$('#stateTbl').parent().find('#tableHeaderCircle').html('States of ' + $('.region' + region)
                        //.html());
                    $('#stateTbl').parent().show();
                    $('#districtTbl').parent().hide();
                    $('#simpletable_div').hide();
                    $('#charthydro').hide();
                    $(".loaderpk").css("display", "none");
                } else if (type == 2) {
                    $.each(result.data, function(i, item) {
                        trHTML += '<tr><td><a href="javascript:;" onclick="javascript:getResults(\'' + item
                            .ID + '\', \'' + item.Year + '\')" class="district' + item.ID + '">' + item
                            .Location + '</a></td><td>' + item.Year + '</td><td>' + item.TotalWells +
                            '</td><td>' + item.Readings + '</td></tr>';
                    });
                    $('#districtTbl tbody').html('').append(trHTML);
                    $('#districtTbl').parent().find('#tableHeaderCircle').html('Districts of ' + $('.state' + state)
                        .html());
                    $('#districtTbl').parent().show();
                    $('#simpletable_div').hide();
                    $('#charthydro').hide();
                    $(".loaderpk").css("display", "none");
                }
            });
        }


        function getResults(disrictID, year) {
            if ($.fn.DataTable.isDataTable('#simpletableDataAvailablity')) {
                $('#simpletableDataAvailablity').DataTable().destroy();
            }

            var data = {};
            ord = 1;
            // alert(ord);

            var regionID = $("#post_regionID").val();
            var stateCode = $("#post_stateCode").val();
            var ProjectID = $("#ProjectID").val();
            var districtCode = disrictID;
            var basin = '';
            var subBasin = '';
            var fromYear = year;
            var toYear = year;
            var WellType = '';
            var AqTap = '';



            data = {
                "ord": ord,
                "ProjectID": ProjectID,
                "regionID": regionID,
                "stateCode": stateCode,
                "districtCode": districtCode,
                "fromYear": fromYear,
                "toYear": toYear,
                "WellType": WellType,
                "AqTap": AqTap,
                datatype: datatype
            };

            $(".loaderpk").css("display", "block");
            var table = $('#simpletableDataAvailablity').DataTable({
                "processing": true, // for show progress bar,
                retrieve: true,
                "language": {
                    'processing': '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span>'
                },
                "serverSide": true,
                "bFilter": true,
                "bLengthChange": true,
                "ordering": false,
                "iDisplayLength": 10,
                "bDestroy": true,
                "responsive": true,
                "scrollX": true,
                /* "fixedColumns": {"leftColumns": 4},
                "dom": 'Bfrtip',
                "buttons": [{"extend": 'colvis'}], */

                "ajax": {
                    "url": "{{ route('Public_WaterLevelWellWiseYearlyDataAvail') }}",
                    "type": "GET",
                    "data": data,
                    "dataType": "json",
                    "dataSrc": function(jsonData) {
                        $('#simpletable_div').show();
                        $(".loaderpk").css("display", "none");
                        return jsonData.data;
                    }
                }
            });
            $('#simpletable_div').show();
            $('#charthydro').hide();
            $('#graph_toolbar').hide();
        }


        function GetGraph(type, wl,wt, fd, td) {

            var wqp = '';
            var wellType = wt;

            if (type == 'check') {
                WellNo = wl;
                fdate = fd;
                tdate = td;
                $('#simpletable_div').hide();
                $('#charthydro').show();
                $('#graph_toolbar').show();
            }

            wqp = $('#wqp').val();



            var isDWLR = $('#isDWLR').val();



            var data = {
                WellNo: WellNo,
                fdate: fdate,
                tdate: tdate,
                isDWLR: isDWLR
            };

            var fdateObj = new Date(fdate);
            var formattedFdate = ('0' + fdateObj.getDate()).slice(-2) + '-' + 
                        ('0' + (fdateObj.getMonth() + 1)).slice(-2) + '-' + 
                        fdateObj.getFullYear();

            var tdateObj = new Date(tdate);
            var formattedTdate = ('0' + tdateObj.getDate()).slice(-2) + '-' + 
                ('0' + (tdateObj.getMonth() + 1)).slice(-2) + '-' + 
                tdateObj.getFullYear();

            $.ajax({
                url: "{{ route('GetGraphGuest') }}",
                type: 'GET',
                data: data,
                contenttype: "application/x-www-form-urlencoded",
                datatype: "html",
                success: function(result) {
                    $('#charthydro').show();
                    result = jQuery.parseJSON(result);
                    // ShowGRPDownload('canvas', 'div_pdfcanvas', 'Hydrograph');

                    

                    Chart1 = new Tee.Chart('canvas');
                    Chart1.panel.margins.top = 8;
                    Chart1.panel.margins.bottom = 8;

                    Chart1.title.text = 'WellNo -'+WellNo+ ', '+wellType+' ('+ formattedFdate +' to '+formattedTdate+')';
                    Chart1.title.format.font.fill = 'rgb(0,0,0)';
                    Chart1.title.format.font.style = '18px calibri';
                    Chart1.title.format.font.shadow.visible = false;
                    var WL = new Tee.Line();
                    WL.pointer.height = 1;
                    WL.pointer.width = 1;
                    // eval("var WL" + i + "Values = [" + result.Data + "]");
                    // eval("var WL" + i + "_labels = [" + result.xAxis + "]; ");
                    // var WLValues = [-85.8000,-85.8500,-88.8500,-86.6600,-86.9000,-87.5000,-88.5500,-89.2000,-89.6500,-89.5000,-88.8200,-88.3200,-87.9500,-88.2000,-89.1500,-89.6500,-89.0500,-89.6000,-88.9500,-88.2500,-88.8500,-88.5500,-88.5000,-88.0500,-88.3500,-88.7000,-88.6000,-88.1000,-87.8500,-88.3500,-87.7500,-87.8500,-87.6000,-86.4500,-86.3500,-86.5000,-86.2500,-86.1500,-86.2500,-85.1500,-84.4500,-84.5500,-84.4500,-83.6500,-83.1500,-83.1000,-82.7500,-82.2500,-82.5500,-82.1500,-82.8500,-81.2500,-80.9500,-81.2500,-80.0500,-79.1000,-78.6500,-78.3500,-77.9500,-78.0500,-78.2000,-77.1000,-76.3500,-75.6000,-75.0500,-74.4000,-74.2500,-73.3500,-73.4500,-72.5000,-71.8500,-72.3500,-72.7500,-73.3500,-72.9500,-72.4000,-73.2500,-73.3000,-72.5500,-72.7500,-72.0500,-71.9000,-72.1500,-72.8000,-73.0500,-72.9500,-72.0500,-71.6500,-72.7500,-72.3500,-69.5500,-69.4500,-72.1500,-72.0500,-71.3500,-68.5500,-68.7500,-70.0500,-68.8000,-71.2000,-67.3500,-68.7500,-64.0500,-66.5500,-66.0500,-66.5500,-65.2500,-67.1500,-66.3500,-65.0500,-65.5500,-67.0500,-66.7500,-65.8500,-66.4500,-67.0500,-67.8500,-65.7500,-68.3500,-71.7100,-71.5200,-67.9100,-66.9800,-78.7000,-67.0700,-67.9500,null,-64.7800,-65.8400,-128.3500,-64.4000,-124.6500,-69.8500,-64.8500,-63.3500,-63.9500,-125.7500]; 
                    // var x_labels = ['12/11/2001 00:00' ,'02/05/2002 00:00' ,'05/01/2002 00:00' ,'07/29/2002 00:00' ,'08/14/2002 00:00' ,'10/01/2002 00:00' ,'01/08/2003 00:00' ,'03/10/2003 00:00' ,'05/01/2003 00:00' ,'07/08/2003 00:00' ,'08/13/2003 00:00' ,'09/11/2003 00:00' ,'10/01/2003 00:00' ,'12/01/2003 00:00' ,'01/09/2004 00:00' ,'02/25/2004 00:00' ,'03/24/2004 00:00' ,'05/01/2004 00:00' ,'07/26/2004 00:00' ,'09/01/2004 00:00' ,'10/01/2004 00:00' ,'12/07/2004 00:00' ,'02/04/2005 00:00' ,'02/23/2005 00:00' ,'03/24/2005 00:00' ,'04/26/2005 00:00' ,'05/01/2005 00:00' ,'06/30/2005 00:00' ,'07/25/2005 00:00' ,'08/18/2005 00:00' ,'09/26/2005 00:00' ,'10/01/2005 00:00' ,'11/30/2005 00:00' ,'12/26/2005 00:00' ,'01/25/2006 00:00' ,'02/23/2006 00:00' ,'03/27/2006 00:00' ,'04/29/2006 00:00' ,'05/01/2006 00:00' ,'07/11/2006 00:00' ,'08/21/2006 00:00' ,'09/23/2006 00:00' ,'10/01/2006 00:00' ,'11/28/2006 00:00' ,'12/17/2006 00:00' ,'01/11/2007 00:00' ,'02/21/2007 00:00' ,'03/19/2007 00:00' ,'04/23/2007 00:00' ,'05/01/2007 00:00' ,'06/22/2007 00:00' ,'07/26/2007 00:00' ,'08/25/2007 00:00' ,'09/26/2007 00:00' ,'10/01/2007 00:00' ,'11/26/2007 00:00' ,'12/25/2007 00:00' ,'01/24/2008 00:00' ,'02/20/2008 00:00' ,'03/25/2008 00:00' ,'04/15/2008 00:00' ,'05/01/2008 00:00' ,'06/21/2008 00:00' ,'07/25/2008 00:00' ,'08/12/2008 00:00' ,'09/17/2008 00:00' ,'10/01/2008 00:00' ,'11/21/2008 00:00' ,'12/26/2008 00:00' ,'01/21/2009 00:00' ,'02/27/2009 00:00' ,'03/22/2009 00:00' ,'04/15/2009 00:00' ,'05/01/2009 00:00' ,'06/23/2009 00:00' ,'07/20/2009 00:00' ,'08/21/2009 00:00' ,'09/20/2009 00:00' ,'10/01/2009 00:00' ,'11/01/2009 00:00' ,'12/01/2009 00:00' ,'01/01/2010 00:00' ,'02/01/2010 00:00' ,'03/01/2010 00:00' ,'04/01/2010 00:00' ,'05/01/2010 00:00' ,'08/01/2010 00:00' ,'10/01/2010 00:00' ,'01/01/2011 00:00' ,'05/01/2011 00:00' ,'08/01/2011 00:00' ,'10/01/2011 00:00' ,'01/01/2012 00:00' ,'05/01/2012 00:00' ,'08/01/2012 00:00' ,'10/01/2012 00:00' ,'01/01/2013 00:00' ,'05/01/2013 00:00' ,'10/01/2013 00:00' ,'05/01/2014 00:00' ,'08/01/2014 00:00' ,'10/01/2014 00:00' ,'01/01/2015 00:00' ,'05/01/2015 00:00' ,'08/01/2015 00:00' ,'10/01/2015 00:00' ,'01/01/2016 00:00' ,'05/01/2016 00:00' ,'08/01/2016 00:00' ,'10/01/2016 00:00' ,'01/01/2017 00:00' ,'05/01/2017 00:00' ,'08/01/2017 00:00' ,'10/01/2017 00:00' ,'01/01/2018 00:00' ,'05/01/2018 00:00' ,'08/01/2018 00:00' ,'10/01/2018 00:00' ,'01/01/2019 00:00' ,'05/01/2019 00:00' ,'08/01/2019 00:00' ,'10/01/2019 00:00' ,'01/01/2020 00:00' ,'05/01/2020 00:00' ,'08/01/2020 00:00' ,'10/01/2020 00:00' ,'10/15/2020 00:00' ,'01/01/2021 00:00' ,'05/01/2021 00:00' ,'08/01/2021 00:00' ,'10/01/2021 00:00' ,'01/01/2022 00:00' ,'05/01/2022 00:00' ,'08/01/2022 00:00' ,'10/01/2022 00:00' ,'01/01/2023 00:00' ,'05/01/2023 00:00' ]; 
                    WLValues = result.Data;
                    x_labels = result.xAxis;
                    // console.log(WLValues);
                    // console.log(x_labels);
                    var DWLR_labels = result.DWLRDates;
                    var x2_labels = result.SPRDates;
                    var x3_labels = result.SPSDates;
                    var x4_labels = result.TAllDates;
                    var x5_labels = result.TPRDates;
                    var x6_labels = result.TPSDates;
                    var x7_labels = [];
                    var x8_labels = [];
                    var x9_labels = result.WQDates;

                    if (result.DWLRValues.length > 0) {

                        var DWLR = new Tee.Line();
                        var DWLRValues = result.DWLRValues;
                        DWLR.data.values = [];
                        DWLR.data.x = [];

                        for (var i = 0; i < DWLRValues.length; i++) {
                            DWLR.data.values[i] = DWLRValues[i];
                            // DWLR.data.x[i] = new Date(DWLR_labels[i]);
                            DWLR.data.x[i] = new Date(Date.parse(DWLR_labels[i].replace(/'/g, '')));
                        }
                        DWLR.format.stroke.dash = [4, 4];
                        Chart1.addSeries(DWLR);
                    }

                    


                    WL.data.values = [];
                    WL.data.x = [];
                    for (var i = 0; i < WLValues.length; i++) {
                        WL.data.values[i] = WLValues[i];
                        WL.data.x[i] = new Date(x_labels[i]);
                    }
                    var axis1 = Chart1.axes.left;
                    axis1.title.text = 'Water Level in mbgl';
                    axis1.title.format.font.fill = 'rgb(0,0,0)';
                    axis1.title.format.font.style = '15px calibri';
                    Chart1.addSeries(WL).pointer.visible = false;
                    if (result.eqntxt != '') {
                        Chart1.axes.bottom.title.text = result.eqntxt;
                    }
                    Chart1.axes.bottom.labels.ongetlabel = function(value, s) {
                        this.format.font.fill = 'black';
                        this.rotation = 45;
                        return s;
                    }
                    Chart1.axes.bottom.labels.dateFormat = 'dd-mm-yyyy';
                    Chart1.axes.bottom.labels.Angle = 90;
                    Chart1.axes.bottom.labels.rotation = 45;
                    Chart1.panel.format.gradient.visible = false;
                    Chart1.panel.format.fill = '#FFF';
                    Chart1.axes.left.format.stroke.size = 0.5;

                    Chart1.axes.bottom.title.format.font.fill = 'rgb(0,0,0)';
                    Chart1.axes.bottom.labels.format.font.fill = 'rgb(0,0,0)';
                    Chart1.axes.left.inverted = true;
                    Chart1.axes.right.inverted = true;
                    Chart1.zoom.allow = true
                    Chart1.walls.visible = false;
                    Chart1.legend.visible = false;
                    Chart1.footer.transparent = true;
                    Chart1.panel.format.shadow.visible = false;
                    Chart1.panel.format.stroke.fill = 'rgba(255,255,255,1)';
                    Chart1.panel.format.round.x = 0;
                    Chart1.panel.format.round.y = 0;

                    ////Annotation ; 
                    // annotation (alternative title) ; 
                    a1 = new Tee.Annotation(Chart1);
                    a1.format.fill = 'rgba(0,0,0,0.0)';
                    a1.format.stroke.fill = 'rgba(0,0,0,0.0)';
                    a1.format.font.style = '16px Arial';
                    a1.format.font.fill = 'rgba(60, 179, 113)';
                    a1.text = '';
                    Chart1.draw();
                    //get position ; 
                    a1.position.x = 5 //Chart1.axes.bottom.calc(Chart1.axes.bottom.minimum) ; 
                    a1.position.y = 5;
                    Chart1.tools.add(a1);


                    ////tooltip 
                    tip = new Tee.ToolTip(Chart1);
                    tip.render = 'dom';
                    tip.autoHide = false;
                    tip.domStyle =
                        'padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:4px;margin-left:5px;margin-top:0px; ';
                    tip.domStyle = tip.domStyle + 'background-color:#FCFCFC;border-radius:4px 4px;color:#FFF;;';
                    tip.domStyle = tip.domStyle +
                        'border-style:solid;border-color:#A3A3AF;border-width:1px;z-index:1000; ';
                    Chart1.tools.add(tip);
                    tip.onhide = function() {
                        scaling = 0;
                        poindex = -1;
                    }
                    tip.ongettext = function(tool, text, series, index) {
                        var s = '';
                        var sTxt = text.split(' ');
                        var txtLbl = '';
                        if (sTxt.length > 1) {
                            for (var z = 1; z < sTxt.length; z++) {
                                txtLbl = txtLbl + sTxt[z] + ' ';
                            }
                            txtLbl = txtLbl.trim();
                        }
                        if (tool.chart.series.items[0].barStyle == 'bar') {
                            s = '<font face="verdana" color="' + series.format.fill +
                                '" size="1"><strong>' + txtLbl + '</strong></font> <br/>'
                        };
                        s = s + '<font face="verdana" color="' + series.format.fill + '" size="1">Date:' +
                            moment(series.data.x[index]).format('DD/MM/YYYY HH:mm') + ', Value:' + Math.abs(series
                            .data.values[index].toFixed(2)) + '</font>';
                        return s;
                    };
                    Chart1.draw();


                }

            });
        }
    </script>
@endsection