@()

@main("Cat database","s") {
    <script src="@routes.Assets.at("js/Chart.min.js")"></script>
    <canvas id="myChart" width="400" height="400"></canvas>
    <script>var ctx = document.getElementById("myChart").getContext("2d");

    var canvas = document.getElementById("myChart");
    var ctx = canvas.getContext("2d");
    var width = document.getElementById("container").offsetWidth;
    canvas.setAttribute("width",width);
    var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [

    {
    label: "My Second dataset",
    fillColor: "rgba(151,187,205,0.2)",
    strokeColor: "rgba(151,187,205,1)",
    pointColor: "rgba(151,187,205,1)",
    pointStrokeColor: "#fff",
    pointHighlightFill: "#fff",
    pointHighlightStroke: "rgba(151,187,205,1)",
    data: [28, 48, 40, 19, 86, 27, 90]
    }
    ]
    };
    var myNewChart = new Chart(ctx).Line(data);
     canvas.onclick = function(evt){
    var activePoints = myNewChart.getPointsAtEvent(evt);
     var rect = canvas.getBoundingClientRect();

     var x = evt.clientX - rect.left;
     var y = evt.clientY - rect.top;

};

    </script>
}