Frequency Polygon

Frequency Polygon

by jlbriggs

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width:600px;height:400px;margin:1.5em 1em;"></div>

<script>
  var d = new Date();
  var pointStart = d.getTime();
  //-------------------------------------------------------
  //set a 'line' marker type for use in bullet charts 
  Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) {
    return ['M', x, y + width / 2, 'L', x + height, y + width / 2];
  };
  Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) {
    return ['M', x, y + height / 2, 'L', x + width, y + width / 2];
  };
  //-------------------------------------------------------
  Highcharts.setOptions({
    global: {
      useUTC: false
    },
    colors: [
      'rgba( 0,   154, 253, 0.9 )', //bright blue
      'rgba( 253, 99,  0,   0.9 )', //bright orange
      'rgba( 40,  40,  56,  0.9 )', //dark
      'rgba( 253, 0,   154, 0.9 )', //bright pink
      'rgba( 154, 253, 0,   0.9 )', //bright green
      'rgba( 145, 44,  138, 0.9 )', //mid purple
      'rgba( 45,  47,  238, 0.9 )', //mid blue
      'rgba( 177, 69,  0,   0.9 )', //dark orange
      'rgba( 140, 140, 156, 0.9 )', //mid
      'rgba( 238, 46,  47,  0.9 )', //mid red
      'rgba( 44,  145, 51,  0.9 )', //mid green
      'rgba( 103, 16,  192, 0.9 )' //dark purple
    ],
    chart: {
      alignTicks: false,
      type: '',
      margin: [60, 25, 100, 90],
      //borderRadius:10,
      //borderWidth:1,
      //borderColor:'rgba(156,156,156,.25)',
      //backgroundColor:'rgba(204,204,204,.25)',
      //plotBackgroundColor:'rgba(255,255,255,1)',
      style: {
        fontFamily: 'Abel,serif'
      },
      events: {
        load: function() {
          this.credits.element.onclick = function() {
            window.open(
             ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);
body {
  font-family: Abel, Calibri, Helvetica, sans-serif;
  font-size: 95%;
}

JavaScript

var chart,
  titleText = 'Frequency Polygon ',
  subTitleText = 'Alternative to a Histogram for comparing the distribution of multiple series',
  type = 'line',
  dataPoints = 25;
//var categories   = alphaCats(dataPoints);
//monthCats//dayCats5//dayCats7
	var categories = ['Bin 1-10', 'Bin 11-20', 'Bin 21-30', 'Bin 31-40', 'Bin 41-50'];

$(function() {
  $('#container').highcharts({
    chart: {
      type: type
    },
    title: {
      text: titleText
    },
    subtitle: {
      text: subTitleText
    },
    legend: {
      enabled: true
    },
    tooltip: {
      shared: true,
      crosshairs: true,
			borderColor: Highcharts.getOptions().colors[2]
    },
    plotOptions: {
      series: {}
    },
    xAxis: {
    	title: { text: 'Bins' },
      categories: categories,
      labels: { style: { fontWeight: 'bold' } }
    },
    yAxis: { 
    	title: { text: 'Some<br/>Measure' }
    },
    series: [{
    	name: 'Men',
      data: [5,4,7,8,3]
    }, {
			name: 'Women',
			data: [7,5,6,5,2]
    }]
  });
  chart = $('#container').highcharts();

});