iview google charts

iview-google-charts-readme.md

Como instalar

importa o arquivo iview-google-chart.min.js no seu projeto. Nao pense demais, pode por no HTML mesmo (especialmente se estiver usando projetos legados).

<script src="path/to/lib/iview-google-charts.min.js"></script>

Como usar

Essa lib tem uma unica tag: <google-chart>.

Exemplos de uso

O componente espera ate tres propriedades: config, data e type. A type eh opcional caso esta seja passada dentro de config. O parametro config tem que ser no formato esperado pelo google chart. O parametro data deve estar no formato esperado pelo google chart para graficos, ou seja:

<google-chart
    type="BubbleChart"
    data='[
      ["ID","Life Expectancy","Fertility Rate","Region","Population"],
      ["CAN",80.66,1.67,"North America",33739900],["DEU",79.84,1.36,"Europe",81902307],
      ["DNK",78.6,1.84,"Europe",5523095],["EGY",72.73,2.78,"Middle East",79716203],
      ["GBR",80.05,2,"Europe",61801570],["IRN",72.49,1.7,"Middle East",73137148],
      ["IRQ",68.09,4.77,"Middle East",31090763],["ISR",81.55,2.96,"Middle East",7485600],
      ["RUS",68.6,1.54,"Europe",141850000],["USA",78.09,2.05,"North America",307007000]
    ]'>
</google-chart>

Em outras palavras: deve seguir o modelo esperado de lista de listas: [[...], ...]

Para Table's, deve-se alterar um pouco do que eh esperado pelo google charts para que o componente iview possa renderizar corretamente as informacoes enquanto mantem uma API unica entre os outros graficos ja implementados. O modelo eh o seguinte:

<google-chart
    config='{"type": "Table"}'
    data='{
      "columns":[
        ["string","Name"],
        ["number","Salary"],
        ["boolean","Full Time Employee"]
      ],
      "rows":[
        ["Mike",{"v":10000,"f":"$10,000"},true],
        ["Jim",{"v":8000,"f":"$8,000"},false],
        ["Alice",{"v":12500,"f":"$12,500"},true],
        ["Bob",{"v":7000,"f":"$7,000"},true]
      ]
    }'>
  </google-chart>

<script>
  
  <!--
    --
    -- Exemplo de uso de Grafico normal mesmo
    --
    -->
  <google-chart
    type="BubbleChart"
    data='[["ID","Life Expectancy","Fertility Rate","Region","Population"],["CAN",80.66,1.67,"North America",33739900],["DEU",79.84,1.36,"Europe",81902307],["DNK",78.6,1.84,"Europe",5523095],["EGY",72.73,2.78,"Middle East",79716203],["GBR",80.05,2,"Europe",61801570],["IRN",72.49,1.7,"Middle East",73137148],["IRQ",68.09,4.77,"Middle East",31090763],["ISR",81.55,2.96,"Middle East",7485600],["RUS",68.6,1.54,"Europe",141850000],["USA",78.09,2.05,"North America",307007000]]'>
  </google-chart>
  
  
  <!--
    --
    -- Exemplo de uso de Table
    --
    -->
  <google-chart
    config='{"type": "Table"}'
    data='{"rows":[["Mike",{"v":10000,"f":"$10,000"},true],["Jim",{"v":8000,"f":"$8,000"},false],["Alice",{"v":12500,"f":"$12,500"},true],["Bob",{"v":7000,"f":"$7,000"},true]],"columns":[["string","Name"],["number","Salary"],["boolean","Full Time Employee"]]}'>
  </google-chart>
</script>