Tilgjengelig diagram

author(s): Øystein Moseng

by oysteinmoseng

HTML

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

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Diagram viser utvikling i regnskapet sammenlignet med fjoråret og årets budsjett.
    </p>
</figure>

CSS

#container {
    height: 450px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
    font-family: Verdana, sans-serif;
}

.highcharts-data-table table {
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column',
    spacingBottom: 25
  },
  title: {
    text: 'Akkumulert utvikling i regnskap og budsjett',
    align: 'left'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
    accessibility: {
      description: 'Months'
    }
  },
  yAxis: {
    title: {
      text: null
    },
    accessibility: {
      description: 'Revenue'
    }
  },
  tooltip: {
  	stickOnContact: true
  },
  accessibility: {
    keyboardNavigation: {
      order: ['legend', 'chartMenu', 'series']
    }
  },
  legend: {
    verticalAlign: 'top',
    margin: 30,
    symbolRadius: 0,
    squareSymbol: false,
    backgroundColor: '#F7FAFF',
    width: '100%',
    padding: 15,
    itemStyle: {
      fontWeight: 'normal',
      textDecoration: 'none'
    },
    itemHiddenStyle: {
      color: '#737373',
      textDecoration: 'line-through'
    }
  },
  series: [{
    name: 'Regnskap i fjor',
    color: '#5B9F8F',
    data: [580000000, 578000000, 440000000, 570000000, 588000000, -96000000, 612000000, 1040000000, 590000000, 598000000, 585000000, 210000000]
  }, {
    name: 'Regnskap i perioden',
    color: '#AA53C0',
    data: [590000000, 565000000, 599000000, 590000000, 640000000, 634000000, 592000000, 624000000, 588000000, 76000000, null, null]
  }, {
    name: 'Budsjett i perioden',
    type: 'line',
    color: '#111',
    data: [610000000, 600000000, 630000000, 610000000, 710000000, 300000000, 615000000, 1100000000, 610000000, 610000000, 600000000, 610000000]
  }]
});