Datenqualität - SCATTER

by Jens Kühn

HTML

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

<div style="width:auto;min-width:690px;padding: 6px auto;margin:55px 45px 0 45px;">
    <div id="background" class="highchart_bar_example"></div>
    <div id="container" style="min-width:600px;height:52px;margin:-29px 0 0 0;"></div>
</div>

CSS

.highchart_bar_example{
    height: 29px;
    margin: 0 26px 0 4px;
    width:auto;
    min-width:600px;
    top:0;
    border: solid 1px #5f5f5f;
    -moz-box-shadow:inset -2px 2px 2px #666;
    -webkit-box-shadow:inset -2px 2px 2px #666;
    box-shadow:inset -2px 2px 2px #666;
    
    
    background-image: linear-gradient(left , #FF2003 10%, #7ABF30 90%);
    background-image: -o-linear-gradient(left , #FF2003 10%, #7ABF30 90%);
    background-image: -moz-linear-gradient(left , #FF2003 10%, #7ABF30 90%);
    background-image: -webkit-linear-gradient(left , #FF2003 10%, #7ABF30 90%);
    background-image: -ms-linear-gradient(left , #FF2003 10%, #7ABF30 90%);

    background-image: -webkit-gradient(
            linear,
            left top,
            right top,
            color-stop(0.1, #FF2003),
            color-stop(0.9, #7ABF30)
    );
}

JavaScript

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'scatter',
                borderWidth:1,
                borderRadius:1,
                borderColor:null,
                plotBorderWidth:1,
                plotBorderRadius:1,
                plotBorderColor:null,
                backgroundColor:null,
                margin:0,
                marginBottom:25,
                marginLeft: 6,
                marginRight: 30
                //inverted:true,
            },
            title: {text: null},
            legend: {enabled: false},
            credits: {enabled: false},
            tooltip: {enabled: false},
            yAxis: {
                gridLineWidth:0,
                title: {text:''},
                labels: {enabled: false},
                maxPadding:0.09,
                endOnTick:false
            },
            xAxis: {
                min: 0,
                max: 100,
                title: {text:''},
                labels: {
                    enabled: true,
                    style:{color:'#eaeaea'},
                    step: 20,
                    overflow: 'justify',
                    y: -16
                
                },
                minorTickPosition: 'inside',
                minorTickLength: 4,
                tickPosition: 'inside',
                lineColor: '#eaeaea',
                lineWidth: 2,
                tickWidth: 2,
                tickLength: 10,
                tickInterval: 5,
                tickColor:'#eaeaea',                
                minorTickColor:'#eaeaea',               
                gridLineWidth:0,
                lineWidth: 2,
                minorGridLineWidth: 0,
                minorTickInterval: 1,
                minorTickWidth: 2
            },
            plotOptions: {
                series: {
                    color:'#eaeaea',
        ...