Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
 <div id="idForeCaster" class="forecaster-chart-graph">
            <div class="ForecasterTitle">Forecaster Graph</div>
            <div class="CL">
            </div>
            <div class="graphzoom dvzoom FR" onclick="ZoomForecasterGraph(this)" id="dvZoom">
            </div>
            <div class="idView" onclick="showGraphTypes()" id="idViewButton">
            </div> 
            <div id="idGraphForecaster" class="idGraphForecaster">
            
            </div> 
        </div>

CSS

body
{
    font-family:Helvetica Neue,Helvetica;
    margin:0px;
    padding:0px;
    -webkit-tap-highlight-color: transparent;
}
@import url("common.css");
.gradientYF
{
    background: -webkit-gradient(linear, left top, left bottom, from(#F5F8FA), to(#EEF3F8));
}
.actionplan
{
    width: 1024px;
    height: 768px;
    margin:0px;
    padding:0px;    
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    margin-top: -1px;
}
.test {
    background-image: url("../images/actionplanImages/images/bg.png");
    background-repeat: repeat-y;
    width: 1024px;
    height: 427px;
    overflow-y: scroll;
    /*overflow-y: scroll; */
    /*margin-top: 228px;*/    
}
/*added by boobalan*/

#idSubTitle span{
    font-size: 14px;
}

.FL
{
    float:left;
}

.FR
{
    float:right;
}

.CL 
{
    clear:both;
}
.PDT25
{
    padding-top:25px;
}
.borderright
{
    border:none;
    border-right: 2px solid #A7C5D7;
    border-radius:0px;
}

.borderEmail
{
    border:none;
    border-radius:0px;
}

.WR
{
    word-wrap:break-word;
}

.FS
{
    font-size:1.1em;
}

.divmain
{
    /*background-image: url("../images/bgActionPlan1.png");*/
    /* background-position: left left;*/
    /*background-position: 0px 0px;*/
    /* background-repeat: no-repeat;*/
    /*margin-left:-6px;
     margin-top:-5px;*/
    /*margin:-8px;*/
    width: 1024px; /*same width  as that of image*/ 
    height: 228px; /*same height as that of image*/
    background-image: url("../images/actionplanImages/images/Header1.png");
    background-repeat: no-repeat;
}

.divmargin
{
    margin-left: 87px;
    margin-top: 0px;
    /*height:655px;
     width:980px;*/
}

.CheckedBox
{
    background-image: url("../images/actionplanImages/images/iconChecked.png");
    background-repeat: no-repeat;    `
    
    
}
.divtitle
{
    color: #DF2687;
    display: inline;
    font-size: 26px;
    font-weight: lighter;
    font-family: Helvetica Neue,Helvetica;
    margin-top: 114px;
    margin-left: 145px;
   ...

JavaScript

$(function() {
    function newRandomData(n) {
        // generate an array of random data
        var data = [],
            time = (new Date()).getTime(),
            i;

        for (i = -1 * n; i <= 0; i++) {
            data.push(Math.random() * 100 - 100);
            }
        return data;
    }
    var data = newRandomData(25);
    var chart = new Highcharts.Chart({
       chart: {
            id: 'assets',
            renderTo: "idGraphForecaster",
            animation: false,
            defaultSeriesType: 'column',
            width: 920,
            height: 600,
            zoomType: "x",
            marginRight: 15,
            reflow: true,
            spacingBottom: 20,
            style: {
                fontFamily: '"Helvetica Neue"',
                fontSize: "10px",
                zIndex: 100
            }
        },title: {
            text: "Example",
            margin: 5
        },
        xAxis: {
            maxZoom: 3600 * 1000 * 24 * 365 * 5,
            min: Date.UTC(2012, 1, 1),
            max: Date.UTC(2052, 1, 1),
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%Y'
            },
            title: {
                text: "Hello"
            },
            lineColor: '#7B7B7B',
            tickColor: '#7b7b7b',
            labels: {
                style: {
                    color: '#7b7b7b',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                }
            },

            gridLineWidth: 1,
            allowDecimals: false
        },    
  yAxis: {
            title: {
                text: "Yaxis"
            },
            minorTickInterval: null,
            labels: {
                formatter: function() {
                    return '£' + this.value;
                },
                style: {
                    color: '#7b7b7b',
                    fontSize: "10px",
                    fontFamily: 'Helvetica Neue'
                }
            }
     ...