branded area

by jayhilwig

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="area" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $(document).ready(function() {
      Highcharts.setOptions({
        global: {
          useUTC: false
        }
      });
      
      var chart;
      $('#area').highcharts({
        chart: {
          type: 'area',
                    animation: Highcharts.svg, // don't animate in old IE
                    marginRight: 10,
                    backgroundColor: '#000000',
                    borderRadius: 0,
                    marginTop: 20,
                    events: {
                      load: function() {
                        
                            // set up the updating of the chart each second
                            var series = this.series[0];
                            setInterval(function() {
                                var x = (new Date()).getTime(), // current time
                                y = Math.random()*15+40;
                                series.addPoint([x, y], true, true);
                              }, 500);
                          }
                        }
                      },
                      credits: {
                       enabled: false
                     },
                     title: {
                      text: null
                    },
                    xAxis: {
                      type: 'datetime',
                      tickPixelInterval: 500,
                      labels: {
                        align: 'center',
                        x: 0,
                        y: 22,
                        formatter: function() {
                          return Highcharts.dateFormat('%l:%M:%S', this.value);
                        }
                      },
                    },
                    yAxis: {
                      min:0, 
                      max:100,
                      gridLineColor: '#4f4f4f',
                      gridLineWidth: 1,
                      gridLineDashStyle: 'Dot',
                      title: {
                        text: '%...