AnyChart tag map

Toggle class name on click in jQuery

by andypotanin

HTML

<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.12.0/js/anychart-tag-cloud.min.js"></script>



<label><input onclick="tagCloudMode('spiral')" type="radio" name="type" checked>Spiral Mode</label>
<label><input onclick="tagCloudMode('rect')" type="radio" name="type">Rectangle Mode</label>
<div id="container"></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
label {
    display: inline-block;
    margin: 10px 0 0 10px;
}
#container {
    position: absolute;
    width: 100%;
    top: 35px;
    bottom: 0;
}

JavaScript

anychart.onDocumentReady(function () {

    // create data
    var data = "Tyger, tyger, burning bright " +
               "In the forests of the night, " +
               "What immortal hand or eye " +
               "Could frame thy fearful symmetry? " +
               "In what distant deeps or skies " +
               "Burnt the fire of thine eyes? " +
               "On what wings dare he aspire? " +
               "What the hand dare seize the fire? " +
               "And what shoulder and what art " +
               "Could twist the sinews of thy heart? " +
               "And, when thy heart began to beat, " +
               "What dread hand and what dread feet? " +
               "What the hammer? what the chain? " +
               "In what furnace was thy brain? " +
               "What the anvil? what dread grasp " +
               "Dare its deadly terrors clasp? " +
               "When the stars threw down their spears, " +
               "And watered heaven with their tears, " +
               "Did He smile His work to see? " +
               "Did He who made the lamb make thee? " +
               "Tyger, tyger, burning bright " +
               "In the forests of the night, " +
               "What immortal hand or eye " +
               "Dare frame thy fearful symmetry? ";

    // create a chart
    chart = anychart.tagCloud();

    // configure angles
    chart.angles([0]);

    // set the parsing mode
    chart.data(data, {mode: "by-word"});

    // set the chart title
    chart.listen("chartDraw", function () {
      chart.title("Tag Cloud Chart: Mode = " +  chart.mode());
    });

    // set the container id
    chart.container("container");

    // initiate drawing the chart
    chart.draw();
});
    
// set the mode of the tag cloud
function tagCloudMode(mode) {
  chart.mode(mode);
}