Google Chart

---

Google Chart galereyasi oddiy chiziqli grafiklardan tortib murakkab ierarxik daraxt xaritalarigacha (tree maps) juda ko'plab tayyor diagramma turlarini taqdim etadi:

• Sochma grafik (Scatter Chart)
• Chiziqli grafik (Line Chart)
• Ustunli diagramma (Bar / Column Chart)
• Maydonli grafik (Area Chart)
• Doiraviy diagramma (Pie Chart)
• Halqasimon diagramma (Donut Chart)
• Tashkiliy diagramma (Org Chart)
• Xarita / Geografik diagramma (Map / Geo Chart)

---

Google Chart-dan qanday foydalanish kerak?

1. HTML-da diagrammani ko'rsatmoqchi bo'lgan joyingizga <div> elementi (noyob ID bilan) qo'shing:

<div id="myChart" style="max-width:700px; height:400px"></div>

2. Google Charts yuklagichiga havola qo'shing:

<script src="https://www.gstatic.com/charts/loader.js"></script>

3. Grafik API-sini yuklang va API yuklanganda bajariladigan funksiyani belgilang:

<script setup>
  import { onMounted } from 'vue'

  onMounted(() => {
    // Dinamik ravishda yuklash yoki mavjudligini tekshirish
    if (typeof google !== 'undefined') {
      google.charts.load('current', { packages: ['corechart'] })
      google.charts.setOnLoadCallback(drawCharts)
    } else {
      // Agar skript hali yuklanmagan bo'lsa, yuklanishini kutish
      const script = document.querySelector(
        'script[src*="gstatic.com/charts/loader.js"]'
      )
      if (script) {
        script.addEventListener('load', () => {
          google.charts.load('current', { packages: ['corechart'] })
          google.charts.setOnLoadCallback(drawCharts)
        })
      }
    }

    function drawCharts() {
      // Har bir diagramma uchun chizish funksiyalarini bu yerda chaqirish mumkin
      // Masalan: drawBarChart(), drawPieChart() va h.k.

      // Ustunli diagramma misoli
      const barEl = document.getElementById('myChart21')
      if (barEl) {
        const data = google.visualization.arrayToDataTable([
          ['Davlat', 'Mhl'],
          ['Italiya', 55],
          ['Fransiya', 49],
          ['Ispaniya', 44],
          ['AQSH', 24],
          ['Argentina', 15]
        ])
        const options = { title: "Dunyo bo'ylab sharob ishlab chiqarish" }
        const chart = new google.visualization.BarChart(barEl)
        chart.draw(data, options)
      }

      // Chiziqli grafik misoli
      const lineEl = document.getElementById('myChart12')
      if (lineEl) {
        const data = google.visualization.arrayToDataTable([
          ['Narx', 'Hajmi'],
          [50, 7],
          [60, 8],
          [70, 8],
          [80, 9],
          [90, 9],
          [100, 9],
          [110, 10],
          [120, 11],
          [130, 14],
          [140, 14],
          [150, 15]
        ])
        const options = {
          title: 'Uy narxlari va ularning hajmi',
          hAxis: { title: 'Kvadrat metr' },
          vAxis: { title: 'Narx (millionlarda)' },
          legend: 'none'
        }
        const chart = new google.visualization.LineChart(lineEl)
        chart.draw(data, options)
      }
    }
  })
</script>

---

Ustunli diagrammalar (Bar Charts)

Manba kodi

function drawChart() {
  // Ma'lumotlarni o'rnatish
  const data = google.visualization.arrayToDataTable([
    ['Davlat', 'Mhl'],
    ['Italiya', 55],
    ['Fransiya', 49],
    ['Ispaniya', 44],
    ['AQSH', 24],
    ['Argentina', 15]
  ])

  // Variantlarni (Options) o'rnatish
  const options = {
    title: "Dunyo bo'ylab sharob ishlab chiqarish"
  }

  // Chizish
  const chart = new google.visualization.BarChart(
    document.getElementById('myChart')
  )
  chart.draw(data, options)
}

---

Doiraviy diagrammalar (Pie Charts)

Ustunli diagrammani doiraviy diagrammaga aylantirish uchun shunchaki BarChart-ni PieChart-ga almashtiring:

const chart = new google.visualization.PieChart(
  document.getElementById('myChart')
)

3D Doira

Diagrammani 3D formatda ko'rsatish uchun variantlar (options) ichiga is3D: true ni qo'shing:

const options = {
  title: "Dunyo bo'ylab sharob ishlab chiqarish",
  is3D: true
}

---

Chiziqli grafiklar (Line Graphs)

Manba kodi

function drawChart() {
  // Ma'lumotlarni o'rnatish
  const data = google.visualization.arrayToDataTable([
    ['Narx', 'Hajmi'],
    [50, 7],
    [60, 8],
    [70, 8],
    [80, 9],
    [90, 9],
    [100, 9],
    [110, 10],
    [120, 11],
    [130, 14],
    [140, 14],
    [150, 15]
  ])

  // Variantlarni o'rnatish
  const options = {
    title: 'Uy narxlari va ularning hajmi',
    hAxis: { title: 'Kvadrat metr' },
    vAxis: { title: 'Narx (millionlarda)' },
    legend: 'none'
  }

  // Diagrammani chizish
  const chart = new google.visualization.LineChart(
    document.getElementById('myChart')
  )
  chart.draw(data, options)
}

---

Sochma nuqtali grafiklar (Scatter Plots)

Xuddi shu ma'lumotlarni sochma grafik sifatida ko'rsatish uchun LineChart-ni ScatterChart-ga o'zgartiring:

const chart = new google.visualization.ScatterChart(
  document.getElementById('myChart')
)