Cats - tail and scratches

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>
<button id="rangesButton">Показать коридоры значений</button>

CSS

button {
    margin-top: 40px;
}

JavaScript

var data = [
    { language: "C++", number: 2, maxTail: 50, minTail: 40, minScratches: 3, maxScratches: 10, avgTail: 45, avgScratches: 6 },
    { language: "Delphi", number: 1, maxTail: 40, minTail: 40, minScratches: 4, maxScratches: 4, avgTail: 40, avgScratches: 4 },
    { language: "Photoshop<br/>Action Script", number: 1, maxTail: 35, minTail: 35, minScratches: 13, maxScratches: 13, avgTail: 35, avgScratches: 13 },
    { language: "PHP", number: 1, maxTail: 30, minTail: 30, minScratches: 10, maxScratches: 10, avgTail: 30, avgScratches: 10 },
    { language: "python", number: 2, maxTail: 30, minTail: 30, minScratches: 0, maxScratches: 3, avgTail: 30, avgScratches: 1 },
    { language: "C#", number: 41, maxTail: 50, minTail: 10, minScratches: 0, maxScratches: 1729, avgTail: 25, avgScratches: 64 },
    { language: "JavaScript", number: 9, maxTail: 40, minTail: 10, minScratches: 0, maxScratches: 50, avgTail: 21, avgScratches: 8 }
];


$("#chartContainer").dxChart({
    dataSource: data,
    title: "Кошковитость по языкам",
    equalBarWidth: false,
    commonAxisSettings: {
        grid: { visible: true }
    },
    commonPaneSettings: {
        border: { visible: true }
    },
    commonSeriesSettings: { 
        argumentField: "language",
        point: {
            hoverMode: "allArgumentPoints",
            selectionMode: "allArgumentPoints"
        }
    },
    series: [{
        valueField: "avgTail",
        name: "Длина хвоста",
        color: "#5F8B95"
    }, {
        valueField: "avgScratches",
        name: "Количество царапин",
        axis: "scratches",
        color: "#BA4D51"
    }],
    argumentAxis: { hoverMode: "allArgumentPoints" },
    valueAxis: [{
        title: {
            text: "Длина хвоста, см",
            font: {
                color: "#5F8B95"
            }
        },
        label: {
            font: {
                color: "#5F8B95"
            }
        }
        
    }, {
        name: "scratches",
        position:...