Simple example

bahar_Agi

HTML

<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>

JavaScript

$(function () {
    $('#container').highcharts('StockChart', {

        chart: {},

        tooltip: {
            formatter: function () {
                var s = '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>';

                $.each(this.points, function (i, point) {
                    s += '<br/>1 USD = ' + point.y + ' EUR';
                });

                return s;
            }
        },

        plotOptions: {
            series: {
                lineWidth: 2,
                states: {
                    hover: {
                        enabled: true,
                        lineWidth: 2
                    }
                }
            }
        },

        rangeSelector: {
            buttonTheme: {
                width: 80,
                style: {
                    fontFamily: 'Tahoma'
                }
            },

            buttons: [{
                type: 'month',
                count: 1,
                text: '1 month'
            }, {
                type: 'month',
                count: 3,
                text: '3 month'
            }, {
                type: 'month',
                count: 6,
                text: '6 month'
            }, {
                type: 'year',
                count: 1,
                text: '1 year'
            }, {
                type: 'all',
                text: 'all'
            }],
            inputEnabled: false,

            selected: 1
        },

        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });
});