Proportional Y values

Asked

Viewed 75 times

1

inserir a descrição da imagem aqui

Hello, how do I leave the Y | values proportional without changing the values for better data visualization

$(function() {
    $(document).ready(function() {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        var socket = io();
        socket.emit('acc', 'operacoes');
        socket.on('operacoes', function(data) {
            var operacoes = data;
            $('#container').highcharts({
                chart: {
                    type: 'areaspline',
                    backgroundColor: 'none',
                    animation: Highcharts.svg, // don't animate in old IE
                    spacingBottom: 0,
                    spacingTop: 0,
                    spacingLeft: 0,
                    spacingRight: 0,
                    marginLeft: 0,
                    events: {
                        load: function() {
                            setInterval(function() {
                                socket.emit('acc', 'operacoes_ligacoes');
                            }, 1000);
                            var chart = this;
                            socket.on('qtd_ligacoes', function(data) {
                                var x = (new Date()).getTime();
                                for (var i in data) {
                                    chart.series[i].addPoint([x, data[i]], true)
                                };
                                // Update x-axis range
                                //chart.xAxis[0].setExtremes((new Date).getTime()-3600, (new Date).getTime());
                            });
                            setInterval(function() {
                                chart.xAxis[0].update({
                                    min: (new Date()).getTime() - 12000
                                });
                            }, 60000);
                        }
                    }
                },
                //categories: categorias,
                title: {
                    text: 'Entrada e saida de chamadas'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 150,
                    labels: {
                        enabled: false
                    }
                },
                yAxis: {
                    title: false,
                    opposite: true,
                    minTickInterval: 1,
                    min: 0,
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                        return '<b>' + this.series.name + '</b>  ' + Highcharts.numberFormat(this.y, 2); + '<br/>'
                    }
                },
                credits: false,
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 9,
                    y: 10,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.8)',
                    labelFormatter: function() {
                        return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div> <div style="width:40px; float:left;text-align:right;">' + '</div>';
                    }
                },
                exporting: {
                    enabled: false
                },
                plotOptions: {
                    areaspline: {
                        marker: {
                            enabled: false
                        }
                    },
                    dataLabels: {
                        enabled: false,
                        formatter: function() {
                            return this.y;
                        }
                    },
                    series: {
                        fillOpacity: 1,
                        background: 'none',
                        pointPadding: 0,
                        groupPadding: 0,
                    },
                },
                series: operacoes
            });
        });
    });
});
  • It would be good for you to show the logic you are using to generate the graph, if possible, so that we can help you better.

  • take a look now , I did not find any configuration in the api that suits me

  • What does it look like var operacoes = data;. That one data is an object? maybe you could convert the values into percentage?

  • it brings in array the operations that are in the caption ['GFK HI', 'BMG BANK', 'MONTREAL', ...] the points on the chart I update in the highcharts Events: load{} ; if I convert in percentage would not give in the same? since values are far apart

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.