Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="chart-wrapper">
    <div class="chart-inner">
        <div id="stock-chart" style="width:100%; height: 100%;"></div>
    </div>
</div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
  <script src="http://www.highcharts.com/js/themes/gray.js"></script>
</body>
</html>
​
 
.chart-wrapper {
 position: relative;
    padding-bottom: 40%;
}
​
.chart-inner {
position: absolute;
    width: 100%; height: 100%;
}
 
$(function() {
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG', 'ADBE'],
        colors = Highcharts.getOptions().colors,
        defaultSeriesColors = ['rgba(111, 111, 111, 0.2)',
                                 'rgba(255, 111, 255, 0.2)',
                                 'rgba(111, 255, 111, 0.2)',
                                 'rgba(111, 111, 255, 0.2)'];
​
    $.each(names, function(i, name) {
​
        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',    function(data) {
​
            seriesOptions[i] = {
                name: name,
                data: data
            };
            
            Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });
​
            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;
​
            if (seriesCounter == names.length) {
                selectSeries(0);
                createChart();
            }
        });
    });
​
​
​
    // create the chart when all data is loaded
    function createChart() {
​
        chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'stock-chart',
                
                marginBottom: 25
            },
​
​
            rangeSelector: {
                selected: 4
            },
​
            credits: {
                enabled: false
            },
​
            exporting: {
                enabled: false
            },
​
            
​
            yAxis: {
                labels: {
                    formatter: function() {
                        return (this.value > 0 ? '+' : '') + this.value + '%';
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 2,
                    color: 'silver'
                }]
            },
            
            plotOptions: {
                series: {
                    compare: 'percent'
                }
            },
            
            tooltip: {
                pointFormat: '<span style="color:{series.color}">Price</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                valueDecimals: 2
            },
            
                                   
            series: seriesOptions
            
            
        });
    }
$("#seriesSelect").change(function(){
        var selectedIndex = $("#seriesSelect").val();
        selectSeries(selectedIndex);
            createChart();
});
​
function selectSeries(selectedIndex) {
​
    for (var i = 4 - 1; i >= 0; i--) {
        seriesOptions[i].color = defaultSeriesColors[i];
         };
​
    seriesOptions[selectedIndex].color = 'yellow';
​
};
​
});
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers