Jugal | Coloring points based on values | Highchart & Highstock

http://stackoverflow.com/questions/12348917/different-colors-for-different-heights-in-spline-chart-in-highchart Jugal Thakkar http://jugal.me/

by H17737

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js" ></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js" ></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js" ></script>

<div id="container"></div>

CSS

#container{
    min-width:500px;
}

JavaScript

var data = jugalsLib.createSeries({
    minValue: 0,
    maxValue: 1,
    sampleCount: 20

}).data;
var chartingOptions = {
    series: [{
        name: 'series',
        data: groupDataByValue(data, 0.5, '#FF0000', '#00FF00')}]
};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
var chart = new Highcharts.Chart(chartingOptions);
    
    
    function groupDataByValue(data, threshold, aboveColor, belowColor) {
        var newData = [];
        $.each(data, function() {
            var dataPoint = {
                x: this[0],
                y: this[1],
                marker: {}
            };
            var color;
            if (dataPoint.y > threshold) {
                color = aboveColor;
            } else {
                color = belowColor;
            }
            dataPoint.color = color;
            dataPoint.marker.fillColor = color;
            newData.push(dataPoint);
        });
        return newData;
    }