anychart.onDocumentReady(function () {
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/samples/tag-cloud/programming-languages-and-libraries-by-age/data.json
    anychart.data.loadJsonFile(
        '/static/json/keyphrase.json',
        function (data) {

            // add age for each library
            for (var i = 0; i < data.length; i++) {
                data[i].value = data[i]['rank'];
            }

            var dataSet = anychart.data.set(data);
            var colors = anychart.scales
                .linearColor()
                .colors(['#1c4966']);

            // create tag cloud
            var chart = anychart.tagCloud();

            // set the mode of the tag cloud
            chart.mode("spiral");

            // chart.normal().fill("#1fadad");
            chart.hovered().fill("#93bfec");
            // chart.selected().fill("#1f66ad");
            // chart.normal().stroke("#0f5757");
            // chart.hovered().stroke("#0f3357");
            // chart.selected().stroke("#0f3357");
            // chart.normal().fontWeight(600);
            // chart.normal().fontSize(12)

            // set chart title
            chart
                .title()
                .enabled(true)
                .useHtml(true)
                .text(
                    '<span style="color: #000; font-size: 22px;">Most Frequent Key-Phrases</span><br/>' +
                    '<span style="color: #575e64; font-size: 16px;">' +
                    'Click on words to get results' +
                    '</span>'
                );

            // set data with settings
            chart
                .data(dataSet)
                // set color scale
                // additional empty space in all directions from the text, only in pixels
                .colorScale(colors)
                .textSpacing(5)
                // set array of angles, by which words will be placed
                .angles([-0, 0]);

            // get the color range
            var colorRange = chart.colorRange();
            // enabled color range
            colorRange
                .enabled(false)
                // sets color line size
                .colorLineSize(15);

            // format tooltip
            var tooltip = chart.tooltip();
            tooltip.format('Age: {%Value}');
            tooltip.enabled(false);

            // set container id for the chart
            chart.container('wordCloud');
            // initiate chart drawing
            chart.draw();

            // event for point click
            chart.listen('pointClick', function (e) {
                // open link in new tab
                window.open('?phrase='+e.point.get('x'));
            });
        }
    );
});