javascript - google - graficas en html bootstrap

Eje de gráfico de área de Google y configuración de ancho completo

Question

Estoy tratando de diseñar y agregar otro eje de 2 x a un gráfico del área de Google (ayb en la imagen). Por ejemplo, el eje a debe establecerse en 900 y b : 700.

También intenté extender el gráfico al ancho completo del div que lo contiene (960px) pero mi solución parece no hacer nada.

Este es el efecto deseado.

Js actuales

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      [''Year'', ''Sales'', ''Expenses''],
            [''November'',  1000,      400],
            [''December'',  1170,      460],
            [''January'',  660,       1120],
            [''February'',  690,       1120],
            [''March'',  780,       1120],
            [''April'',  820,       1120],
            [''May'',  660,       1120],
            [''June'',  1030,      540]
    ]);

    var options = {
      title: '''',
      backgroundColor: ''none'',
      width:''960'',
      legend: {position: ''none''},
      hAxis: {title: ''Year'',  titleTextStyle: {color: ''grey''},
      }
    };

    var chart = new google.visualization.AreaChart(document.getElementById(''chart_div''));
    chart.draw(data, options);
  }

Answer 1

Para obtener el ancho del gráfico correcto, agregue una definición chartArea a su objeto de options . La configuración de chartArea se encuentra en la documentación de AreaChart en "Opciones de configuración":

chartArea: {
    left: 40,
    top: 10,
    width: 900,
    height: 350
}

Demostración: http://jsfiddle.net/2H7sp/

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        [''Year'', ''Sales'', ''Expenses''],
        [''November'', 1000, 400],
        [''December'', 1170, 460],
        [''January'', 660, 1120],
        [''February'', 690, 1120],
        [''March'', 780, 1120],
        [''April'', 820, 1120],
        [''May'', 660, 1120],
        [''June'', 1030, 540]
    ]);

    var options = {
        title: '''',
        backgroundColor: ''none'',
        legend: { position: ''none'' },
        hAxis: {
            title: ''Year'',
            titleTextStyle: {
                color: ''grey''
            }
        },
        chartArea: {
            left: 40,
            top: 10,
            width: 600,
            height: 150
        }
    };

    var chart = new google.visualization.AreaChart(document.getElementById(''chart_div''));
    chart.draw(data, options);
}

body { margin: 0; }
#chart_div {
    background-color: #f5f5f5;
    width: 660px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}

<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>

Tendrás que jugar un poco con los números. chartArea refiere a la parte gráfica del gráfico, excluyendo los ejes, el título y la leyenda. Así que necesitas agregar relleno a tus valores para dejar espacio.

Edición: para obtener las líneas horizontales, deberá agregar dos series adicionales con valores de 900 y 700 para cada fila en las columnas respectivas:

var data = google.visualization.arrayToDataTable([   
    [ ''Year'',     ''Sales'',  ''Expenses'',  ''a'',   ''b''  ],
    [ ''November'',  1000,     400,         900,   700 ],   
    [ ''December'',  1170,     460,         900,   700 ],   
    [ ''January'',   660,      1120,        900,   700 ],
    ...

Para obtener los colores correctos, especifique una definición para la opción de series que establezca el área invisible y el color de línea negro para las dos nuevas series.

var options = {
    ...
    series: {
        2: { areaOpacity: 0, color: "#000" },
        3: { areaOpacity: 0, color: "#000" }
    },
    ...

Esto está cerca, pero las líneas serán sólidas en lugar de discontinuas, y no habrá etiquetas. Puede obtener estos efectos agregando columnas con roles a su tabla de datos. No podrá usar .arrayToDataTable() para esto, pero tendrá que usar la sintaxis más detallada:

var data = new google.visualization.DataTable();
data.addColumn("string", "Year");
data.addColumn("number", "Sales");
data.addColumn("number", "Expenses");
data.addColumn("number", "a");
data.addColumn("number", "b");
data.addRows([
    [''November'', 1000, 400,  900, 700],
    [''December'', 1170, 460,  900, 700],
    [''January'',  660,  1120, 900, 700],
    ...

Para las líneas discontinuas, agregue una columna de rol de certeza después de cada una de sus columnas "a" y "b":

data.addColumn({ type: "boolean", role: "certainty" });

Para obtener las etiquetas "a" y "b", agregue una columna de rol de anotación después de cada una de sus columnas de certeza:

data.addColumn({ type: "string", role: "annotation" });

Los valores de la columna de certeza deben ser todos false . Todos los valores de la columna de anotación deben ser nulos, excepto la última fila en la que desea que aparezca la etiqueta. La anotación se alinea sobre el punto de datos en lugar de a la derecha donde lo desea, pero eso es lo mejor que puede obtener.

Sus filas de datos con las nuevas columnas agregadas se verán así:

data.addRows([
    [''November'', 1000, 400,  900, false, null, 700, false, null],
    [''December'', 1170, 460,  900, false, null, 700, false, null],
    ...
    [''May'',      660,  1120, 900, false, null, 700, false, null],
    [''June'',     1030, 540,  900, false, "a",  700, false, "b"]
]);

Y, aquí está el resultado final: http://jsfiddle.net/2H7sp/2/

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn("string","Year");
    data.addColumn("number","Sales");
    data.addColumn("number","Expenses");
    data.addColumn("number","a");
    data.addColumn({type:"boolean",role:"certainty"});
    data.addColumn({type:"string",role:"annotation"});
    data.addColumn("number","b");
    data.addColumn({type:"boolean",role:"certainty"});
    data.addColumn({type:"string",role:"annotation"});
    data.addRows([
        [''November'', 1000, 400,  900, false, null, 700, false, null],
        [''December'', 1170, 460,  900, false, null, 700, false, null],
        [''January'',  660,  1120, 900, false, null, 700, false, null],
        [''February'', 690,  1120, 900, false, null, 700, false, null],
        [''March'',    780,  1120, 900, false, null, 700, false, null],
        [''April'',    820,  1120, 900, false, null, 700, false, null],
        [''May'',      660,  1120, 900, false, null, 700, false, null],
        [''June'',     1030, 540,  900, false, "a",  700, false, "b"]
    ]);

    var options = {
        title: '''',
        backgroundColor: ''none'',
        legend: { position: ''none'' },
        hAxis: {
            title: ''Year'',
            titleTextStyle: { color: ''grey'' }
        },
        series:{
            2:{areaOpacity:0,color:"#000"},
            3:{areaOpacity:0,color:"#000"}
        },
        chartArea: {
            left: 40,
            top: 10,
            width: 600,
            height: 150
        }
    };

    var chart = new google.visualization.AreaChart(document.getElementById(''chart_div''));
    chart.draw(data, options);
}

body { margin: 0; }
#chart_div {
    background-color: #f5f5f5;
    width: 660px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}

<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>