Anychart tagCloud scale

165 views Asked by At

I'm developing a simple website in HTML and I need to add a tagCloud chart. I can't understand how to set the scale method. In the documentation it is explained to use anychart.scales.log() but I need a chart where you can see if a unit has a higher frequency, but at the same time I need that the units with the lower frequencies are not invisible. The logarithmic method puts all the data almost at the same size in my case.

    anychart.onDocumentReady(function() {

      var data = [
        {"x": "CompanyNameLTD", "value": 10000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 100, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 5000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 8000, category: "Seller"},
        {"x": "CompanyNameLTD", "value": 4000, category: "Seller"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Phone"},
        {"x": "CompanyNameLTD", "value": 10000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 100, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 5000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 4000, category: "Seller"},
        {"x": "CompanyNameLTD", "value": 4000, category: "Seller"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Phone"},
        {"x": "CompanyNameLTD", "value": 10000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 100, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 5000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 8000, category: "Seller"},
        {"x": "CompanyNameLTD", "value": 4000, category: "Seller"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Phone"},
        {"x": "CompanyNameLTD", "value": 10000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 5000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Technology"},
        {"x": "CompanyNameLTD", "value": 4000, category: "Seller"},
        {"x": "CompanyNameLTD", "value": 4000, category: "Seller"},
        {"x": "CompanyNameLTD", "value": 1000, category: "Phone"}
      ];

      var chart = anychart.tagCloud(data);
      
      var tooltip = chart.tooltip();
      
      chart.tooltip().useHtml(true);
      
      tooltip.positionMode("point");
      
      tooltip.format("Goal: <b>{%value}");
      
      chart.angles([0])
      
      chart.container("wordCloudChart");
      
      chart.listen("pointClick", function(e){
         var url = "https://en.wikipedia.org/wiki/" + e.point.get("x");
         window.open(url, "_blank");
      });

      chart.background().fill({
      keys: ["#2a2a2a", "#2a2a2a", "#2a2a2a"],
      angle: 130,
      });

      chart.scale(anychart.scales.log());

      chart.draw();
    });

And this is the with and without

With

Without

Does anyone know if there is a better way?

1

There are 1 answers

4
AnyChart Support On

For the data you provided we recommend using the default linear scale (simply not apply the log scale). The log scale is suitable when max value is greater than min by x1000 or even more. Your data range is between 100 and 10 000, in this case log scale compresses the data range to much.