2022-06-17 12:06:51 +00:00
|
|
|
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(['#000']);
|
|
|
|
|
|
|
|
|
|
// 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(
|
2022-06-27 13:48:56 +00:00
|
|
|
'<h4>Most Frequent Key-Phrases</h4><br/>' +
|
2022-06-17 12:06:51 +00:00
|
|
|
'<span style="color: #575e64; font-size: 12px;">' +
|
|
|
|
|
'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(1)
|
|
|
|
|
// 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'));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
});
|
