Highcharts Demo

author(s): Jon Arild Nygård

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/wordcloud.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  margin: 0 auto
}

JavaScript

var startTime = new Date().getTime();
var data = [{
  "name": "A",
  "weight": 80,
  "color": "#3599B8"
}, {
  "name": "THE",
  "weight": 74,
  "color": "#28738A"
}, {
  "name": "OF",
  "weight": 30,
  "color": "#FD625E"
}, {
  "name": "AMERICAN",
  "weight": 21,
  "color": "#BFDFDF"
}, {
  "name": "TO",
  "weight": 18,
  "color": "#BB4A4A"
}, {
  "name": "AND",
  "weight": 16,
  "color": "#BB824A"
}, {
  "name": "ALL",
  "weight": 15,
  "color": "#523B34"
}, {
  "name": "IN",
  "weight": 14,
  "color": "#3599B8"
}, {
  "name": "DAYS",
  "weight": 11,
  "color": "#FD625E"
}, {
  "name": "ON",
  "weight": 10,
  "color": "#B687AC"
}, {
  "name": "AN",
  "weight": 10,
  "color": "#28428A"
}, {
  "name": "STREET",
  "weight": 9,
  "color": "#373D49"
}, {
  "name": "",
  "weight": 9,
  "color": "#165889"
}, {
  "name": "2",
  "weight": 8,
  "color": "#1B4D5C"
}, {
  "name": "BAD",
  "weight": 8,
  "color": "#5DFDB1"
}, {
  "name": "ABOUT",
  "weight": 7,
  "color": "#DFBFBF"
}, {
  "name": "&",
  "weight": 7,
  "color": "#5F6B6D"
}, {
  "name": "MAN",
  "weight": 7,
  "color": "#697E36"
}, {
  "name": "CHRISTMAS",
  "weight": 6,
  "color": "#CEFE66"
}, {
  "name": "GOOD",
  "weight": 6,
  "color": "#B69087"
}, {
  "name": "PART",
  "weight": 6,
  "color": "#9535B8"
}, {
  "name": "2:",
  "weight": 6,
  "color": "#9535B8"
}, {
  "name": "BATMAN",
  "weight": 6,
  "color": "#155C0F"
}, {
  "name": "BEYOND",
  "weight": 6,
  "color": "#3599B8"
}, {
  "name": "3",
  "weight": 5,
  "color": "#DFCFBF"
}, {
  "name": "13",
  "weight": 5,
  "color": "#B687AC"
}, {
  "name": "BACK",
  "weight": 5,
  "color": "#5F646D"
}, {
  "name": "DAY",
  "weight": 5,
  "color": "#161F89"
}, {
  "name": "YEAR",
  "weight": 5,
  "color": "#2A2937"
}, {
  "name": "LOVE",
  "weight": 5,
  "color": "#2D7918"
}, {
  "name": "FOR",
  "weight": 5,
  "color": "#523B34"
}, {
  "name": "NIGHTMARE",
  "weight": 5,
  "color": "#675F6D"
}, {
  "name": "ELM",
  "weight": 5,
  "color": "#675F6D"
}, {
 ...