Cats - породы

by kaatula

HTML

<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<script src="http://cdn3.devexpress.com/jslib/13.1.5/js/dx.chartjs.js"></script>
<div id="chartContainer" style="width:100%;height: 600px"></div>
<div id="catInfo">
    <img id="catImage" alt=""/>
    <br /><span id="catName"></span>
    <br /><span id="catNumber"></span> шт.
</div>

CSS

#catInfo {
    display:none;
    position: absolute;
    text-align: center;
    background-color: white;
    border: 1px solid #D4D1C8;
    padding: 9px;
    margin: 40px 40px;
    box-shadow: rgba(128, 128, 128, 0.1) 0px 2px 2px, rgba(128, 128, 128, 0.1) 0px 2px 2px;
    font-family: 'Segoe UI Light', 'Segoe UI', 'Helvetica Neue Light', 'Helvetica Neue', 'Trebuchet MS', Verdana;
    font-weight: 200;
    font-size: 24px;
}
#catInfo img {   
    width: 260px;
    height: 200px;
}

JavaScript

var dataSource = [
    { breed: "Беспородная", number: 34, photo: "http://habrastorage.org/storage2/90e/284/632/90e2846328f747b025a154ff38e2d465.jpg" },
    { breed: "Британец", number: 7, photo: "http://habrastorage.org/storage2/298/47a/a61/29847aa61fdeb493c52da7c869cd8a20.jpg" },
    { breed: "Персидская", number: 4, photo: "http://habrastorage.org/storage2/606/1ef/827/6061ef827554129fa0bc34113f2d1e49.jpg" },
    { breed: "Сиамская", number: 3, photo: "http://habrastorage.org/storage2/b1f/e1f/a10/b1fe1fa10fce984499de28ea5af8a54a.jpg" },
    { breed: "Мейн-кун", number: 3, photo: "http://habrastorage.org/storage2/dc6/da7/908/dc6da790856b1deef00a2abfe9beda20.jpg" },
    { breed: "Шотландская", number: 2, photo: "http://habrastorage.org/storage2/81d/92c/c56/81d92cc56a6f9195c9586cf7e7efb7f7.jpg" },
    { breed: "Манчкин", number: 1, photo: "http://habrastorage.org/storage2/fb4/87a/c00/fb487ac0076e0c7fb49ba25857c25820.jpg" },
    { breed: "Русская", number: 1, photo: "http://habrastorage.org/storage2/235/3b4/799/2353b479907c48b841352320e8001157.jpg" },
    { breed: "Ангорская", number: 1, photo: "http://habrastorage.org/storage2/e4b/59d/366/e4b59d366ffa361540efc1ad3cc433d4.jpg" },
    { breed: "Тайская", number: 1, photo: "http://habrastorage.org/storage2/174/665/e2c/174665e2cd77a3e99f0d7caf3ebadfcf.jpg" }
]; 

var showCat = function (point) {
    var $catInfo = $("#catInfo"),
        $img = $("#catImage"),
        $chartContainer = $("#chartContainer"),
        offset = $chartContainer.offset();
    point.select();
    
    $img.attr("src", point.tag);
    $img.attr("alt", point.argument);
    $("#catName").html(point.argument);
    $("#catNumber").text(point.value);
    $catInfo.show();
    $catInfo.offset({
        left: offset.left + $chartContainer.width() - $img.width() - 40,
        top: offset.top + 80
    });
};

$("#chartContainer").dxChart({
    dataSource: dataSource,
    title: "Породы кошек DevExpress",
    series: {
        name: "Породы",
       ...