html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data   

    var data = [

      {x: "learning", value: 80},

      {x: "includes", value: 56},

      {x: "lists", value: 44},

      {x: "meaning", value: 40},

      {x: "useful", value: 36},

      {x: "different", value: 32},

      {x: "grammar", value: 28},

      {x: "teaching", value: 24},

      {x: "example", value: 20},

      {x: "thing", value: 12}

    ];

​

    // create a chart and set the data

    var chart = anychart.tagCloud(data);

​

    // create and configure a color scale.

    var customColorScale = anychart.scales.ordinalColor();

    customColorScale.ranges([

      {less: 50},

      {from: 50, to: 60},

      {greater: 60}

    ]);

    customColorScale.colors(["lightgray", "#ffcc00", "#00ccff"]);

​

    // set the color scale as the color scale of the chart

    chart.colorScale(customColorScale);

​

    // add and configure a color range

    chart.colorRange().enabled(true);

    chart.colorRange().length("90%");

​

    // set the chart title

    chart.title("Tag Cloud Chart: Color Scale (Ordinal)");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

});