javascriptweb-crawlerdojox.charting

Draw dojo spider chart without axis labels(ticks)


I have created a dojo spider chart with the default parameters. I need to hide the axis labels(data values on the ticks, not talking about the axis title).

I have tried the 'ticks: false', however it doesn't work with spider chart.

require(["dojo/_base/kernel", "dojo/dom", "dojo/dom-construct", "dojo/ready", "dojox/charting/Chart",
    "dojox/charting/plot2d/Spider", "dojo/fx/easing"
  ],
  function(kernel, dom, domConstruct, ready, Chart, Spider, easing) {
    var chart1;
    ready(function() {
      chart1 = new Chart("test1");
      chart1.addPlot("default", {
        type: Spider,
        labelOffset: -10,
        divisions: 7,
        axisColor: "lightgray",
        spiderColor: "silver",
        seriesFillAlpha: 0.2,
        spiderOrigin: 0.16,
        markerSize: 3,
        precision: 0,
        spiderType: "polygon"
      });
      chart1.addSeries("China", {
        data: {
          "GDP": 2,
          "area": 6,
          "population": 2000,
          "inflation": 15,
          "growth": 12
        }
      }, {
        fill: "blue"
      });
      chart1.addSeries("France", {
        data: {
          "GDP": 6,
          "area": 15,
          "population": 500,
          "inflation": 5,
          "growth": 6
        }
      }, {
        fill: "red"
      });
      chart1.addSeries("USA", {
        data: {
          "GDP": 3,
          "area": 20,
          "population": 1500,
          "inflation": 10,
          "growth": 3
        }
      }, {
        fill: "green"
      });
      chart1.addSeries("Japan", {
        data: {
          "GDP": 4,
          "area": 2,
          "population": 1000,
          "inflation": 20,
          "growth": 2
        }
      }, {
        fill: "yellow"
      });
      chart1.addSeries("Korean", {
        data: {
          "GDP": 10,
          "area": 10,
          "population": 800,
          "inflation": 2,
          "growth": 18
        }
      }, {
        fill: "orange"
      });
      chart1.addSeries("Canada", {
        data: {
          "GDP": 1,
          "area": 18,
          "population": 300,
          "inflation": 3,
          "growth": 15
        }
      }, {
        fill: "purple"
      });
      chart1.render();
    });
  });
<script src="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
<body>
<h1>Spider Chart</h1>
<div id="test1" style="width: 500px; height: 500px;"></div>
</body>

Thank you in advance!!!


Solution

  • Well, It seems like you just want to hide html labels(correct me if I am wrong).

    I have updated the running sample.

    require(["dojo/_base/kernel", "dojo/dom", "dojo/dom-construct", "dojo/ready", "dojox/charting/Chart",
        "dojox/charting/plot2d/Spider", "dojo/fx/easing"
      ],
      function(kernel, dom, domConstruct, ready, Chart, Spider, easing) {
        var chart1;
        ready(function() {
          chart1 = new Chart("test1");
          chart1.addPlot("default", {
            type: Spider,
            labelOffset: -10,
            divisions: 7,
            axisColor: "lightgray",
            spiderColor: "silver",
            seriesFillAlpha: 0.2,
            spiderOrigin: 0.16,
            markerSize: 3,
            precision: 0,
            spiderType: "polygon",
            htmlLabels: false      // hide html labels
          });
          chart1.addSeries("China", {
            data: {
              "GDP": 2,
              "area": 6,
              "population": 2000,
              "inflation": 15,
              "growth": 12
            }
          }, {
            fill: "blue"
          });
          chart1.addSeries("France", {
            data: {
              "GDP": 6,
              "area": 15,
              "population": 500,
              "inflation": 5,
              "growth": 6
            }
          }, {
            fill: "red"
          });
          chart1.addSeries("USA", {
            data: {
              "GDP": 3,
              "area": 20,
              "population": 1500,
              "inflation": 10,
              "growth": 3
            }
          }, {
            fill: "green"
          });
          chart1.addSeries("Japan", {
            data: {
              "GDP": 4,
              "area": 2,
              "population": 1000,
              "inflation": 20,
              "growth": 2
            }
          }, {
            fill: "yellow"
          });
          chart1.addSeries("Korean", {
            data: {
              "GDP": 10,
              "area": 10,
              "population": 800,
              "inflation": 2,
              "growth": 18
            }
          }, {
            fill: "orange"
          });
          chart1.addSeries("Canada", {
            data: {
              "GDP": 1,
              "area": 18,
              "population": 300,
              "inflation": 3,
              "growth": 15
            }
          }, {
            fill: "purple"
          });
          chart1.render();
        });
      });
    <script src="http://demos.dojotoolkit.org/dojo/dojo.js" data-dojo-config="isDebug: true"></script>
    <body>
    <h1>Spider Chart</h1>
    <div id="test1" style="width: 500px; height: 500px;"></div>
    </body>

    Hoping this will help you :)