Alternando entre barras, linhas e colunas nos gráficos do Highcharts


Pesquisei sobre as possibilidades de visualização de gráficos utilizando o Highcharts e consegui encontrar uma forma de alternar rapidamente entre barras, colunas e linhas (e pizza também!). Essa solução peguei no StackOverflow:

http://stackoverflow.com/questions/24693506/highcharts-change-chart-type-with-radio-buttons

As linhas de código abaixo criam o gráfico com jQuery:

$(function () {    


// Create the chart

var options = {
    chart: {
       events: {
            drilldown: function (e) {
                if (!e.seriesOptions) {

                    var chart = this;

                        

                    // Show the loading label
                    chart.showLoading('Loading ...');

                    setTimeout(function () {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, series);
                    }, 1000); 
                }

            }
        },
        plotBorderWidth: 0
    },

    title: {
        text: 'Chart Title',
    },
    //
    subtitle: {
            text: 'Subtitle'
    },
    //
    xAxis: {
            type: 'category',
    },
    //
    yAxis: {

            title: {
                margin: 10,
                text: 'No. of user'
            },      
    },
    //
    legend: {
        enabled: true,
    },
    //
    plotOptions: {
        series: {
            pointPadding: 0.2,
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        },
        pie: {
            plotBorderWidth: 0,
            allowPointSelect: true,
            cursor: 'pointer',
            size: '100%',
            dataLabels: {
                enabled: true,
                format: '{point.name}: <b>{point.y}</b>'
            }
        }
    },
    //
     series: [{
        name: 'Case',
        colorByPoint: true,
        data: [3, 2, 1, 3, 4]
    }],
    //
    drilldown: {
        series: []
    }
};

// Column chart
options.chart.renderTo = 'container';
options.chart.type = 'column';
var chart1 = new Highcharts.Chart(options);

chartfunc = function()
{
var column = document.getElementById('column');
var bar = document.getElementById('bar');
var pie = document.getElementById('pie');
var line = document.getElementById('line');

        
if(column.checked)
    {
        
        options.chart.renderTo = 'container';
        options.chart.type = 'column';
        var chart1 = new Highcharts.Chart(options);
    }
else if(bar.checked)
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'bar';
        var chart1 = new Highcharts.Chart(options);
    }
else if(pie.checked)
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'pie';
        var chart1 = new Highcharts.Chart(options);
    }
else
    {
        options.chart.renderTo = 'container';
        options.chart.type = 'line';
        var chart1 = new Highcharts.Chart(options);
    }

}

$('#change_chart_title').click(function(){
    var new_title = $('#chart_title').val();
    var chart = $('#container').highcharts();
    chart.setTitle({ text: new_title });
        
    alert('Chart title changed to '+new_title+' !');
    
});
});

Já as linhas abaixo são do HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<input type="radio" name="mychart" class="mychart" id= "column" value="column" onclick= "chartfunc()" checked>Column
<input type="radio" name="mychart" class="mychart" id= "bar" value="bar" onclick= "chartfunc()">Bar
<input type="radio" name="mychart" class="mychart" id= "pie" value="pie" onclick= "chartfunc()">Pie
<input type="radio" name="mychart" class="mychart" id= "line" value="line" onclick= "chartfunc()">Line
    
    <br>
        Chart title:
        <input type="text" id="chart_title" value="Chart Title">
        <input type="button" id="change_chart_title" value="Change">    

Veja o exemplo no JSFIDDLE: http://jsfiddle.net/phpdeveloperrahul/sSLnn/

Compatibilizando Highcharts com Bootstrap Tabs


Demorei um bom tempo para conseguir utilizar o Highcharts com as tabs do Bootstrap. Eis que alguém responde essa dúvida no seguinte fórum:

http://stackoverflow.com/questions/17206631/why-are-bootstrap-tabs-displaying-tab-pane-divs-with-incorrect-widths-when-using

Basta incluir o seguinte hack em seu CSS:

/* bootstrap hack: fix content width inside hidden tabs */
.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;     /* undo display:none          */
    height: 0;          /* height:0 is also invisible */
    overflow-y: hidden; /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
    height: auto;       /* let the content decide it  */
} /* bootstrap hack end */

 

Acessando o PicasaWeb sem o redirecionamento para o Google+


O Google+ não facilita o seu trabalho na hora de organizar suas fotos, apagá-las, copiá-las ou movê-las (esta última opção nem existe nele). Para fazer este trabalho recorrendo apenas aos serviços web o melhor é utilizar o já combalido PicasaWeb, pois ele ainda possui algumas funções bem melhores para tratar suas memórias fotográficas. O problema é que, depois de ingressar na rede do Google+ ele teima em redirecionar você para ele. Neste caso utilize o link abaixo e, pronto!, você voltará no tempo (repare na barra de serviços do Google):

http://picasaweb.google.com/lh/myphotos?noredirect=1

Captura de tela de 2015-02-22 08:28:19

Importar vídeos do Google Drive para o Youtube via Google+


Olá Pessoal,

Para aqueles que gostam de organizar seus vídeos no Google Drive e, só depois, publicá-los no Youtube, segue a dica de como fazer isso mais facilmente a partir da rede social Google+.

1. Marque a opção “Mostrar fotos e vídeos do Drive em sua biblioteca de fotos” nas configurações, como mostrado abaixo:Captura de tela de 2015-02-18 15:03:39

Isso permitirá que vídeos e imagens em seu Google Drive apareçam na opção Fotos da rede social Google+, tendo as suas referidas pastas como álbuns.

2. Entre na sua conta de Youtube, clique no botão “Carregar” e, logo após, na opção “IMPORTAR VÍDEOS: Importe seus vídeos do Google+” como mostrado abaixo:

Captura de tela de 2015-02-18 15:17:56

3. Escolha o vídeo e inicie o processo de importação.