google chart line karışık görünme sorunu

Merhabalar bugünkü konum beni uzun süre uğraştırıp aslında basit bir çözümü olan google chart line karışık görünme sorunu konusuna değinip sizlerede bunu yaşamanız halinde nasıl çözüldüğünü aktarmaya çalışacağım.

Başlamadan önce

Google chart elinizdeki dataları grafik ortamına aktarmak için kullanacağız bir tool. Güzel yanları olmasına rağmen sıkıntılı yönleride yok değil. Google kendisi buna; Google Grafikler, kullanıcı tarafından sağlanan bilgilerden grafik grafikler oluşturan etkileşimli bir Web hizmetidir. Kullanıcı, bir Web sayfasına katıştırılmış JavaScript ile ifade edilen verileri ve formatlama özelliklerini sağlar; yanıt olarak hizmet grafiğin bir görüntüsünü gönderir. diyor

Sorun nedir?

google chart line karışık görünme sorunu

Yukarıdaki paylaşmış olduğum grafik görünümü aşağıda belirtilen json dosyasının kısa bir özetidir. Bu grafikte json dataları çekip google chartType :’ComboChart’ özelliği ile yansıttığınız zaman yukarıdaki gibi line özelliğiniz karışık şekilde olacaktır. Bunun sebebi iki farklı özellik series type özelliğidir. Bu durumda izleyeceğimiz yöntem ise datalarımız sort ederek column özelliğini boş bırakmaktır.

Sort Özelliği olmadan Kodumuz;

new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'WeekChartcontainer',
    options: {
        // theme: 'material',
        isStacked: true,
        title: '',
        width: '100%',
        height: '500',
        is3D: true,
        pointSize: 9, // noktaların büyüklüğü
        legend: {
            position: 'in'
        },
        curveType: 'function',
        backgroundColor: 'transparent',
        axisFontSize: 0,
        hAxis: {
            format: 'yy-ww',
            textStyle: {
                color: '#1c160d',
                italic: false,
                bold: true,
                fontSize: 17,
                opacity: 1,
            },
            direction: -1,
            slantedText: true,
            slantedTextAngle: 90
        },
        vAxis: {
            gridlines: {
                count: 0,
                color: 'transparent'
            }
        },
        lineWidth: 2,
        explorer: {
            actions: ['dragToZoom', 'rightClickToReset'],
            axis: 'brightness',
            keepInBounds: true,
            maxZoomIn: 12.0
        },
        animation: {
            'duration': 400,
            'easing': 'out'
        },
        /**
         * tabloda yerleşen alanlarda index sıralaması ayarları
         */
        seriesType: 'bars',
        series: {
            0: {
                targetAxisIndex: 5,
                type: 'bars',
                dataOpacity: 0.2,
                color: '#1a48c8'
            },
            1: {
                targetAxisIndex: 0,
                color: '#f18585',
                dataOpacity: 0.3,
                type: 'line'
            }
        },
        aggregationTarget: 'category',
        focusTarget: 'category'

    },
    view: {
        'columns': [0, 2, 5]
    }
})
new google.visualization.DateFormat({
    pattern: "yyyy-ww"
});

yukarıdaki sort özelliğini eklemeden oluşacak karışık grafik kodun halidir. Buraya eklediğimiz sadece aslında

data.sort([{column: 0}])

Bu kodu ekledikten sonra grafiğimizin son hali ise şu şekilde olacaktır.

google chart line mix problems fixed
Örnek JSON dosyası
{
  "cols": [
    {
      "id": "haftalar",
      "label": "HAFTA",
      "type": "date"
    },
    {
      "id": "type",
      "label": "TYPE",
      "type": "string"
    },
    {
      "id": "girdi",
      "label": "STOPAJ",
      "type": "number"
    },
    {
      "id": "success",
      "label": "ONAYLI",
      "type": "number"
    },
    {
      "id": "stop",
      "label": "STOPLU",
      "type": "number"
    },
    {
      "id": "oran",
      "label": "ORAN",
      "type": "number"
    }
  ],
  "rows": [
    {
      "c": [
        {
          "v": "Date(2019, 10, 11)"
        },
        {
          "v": "CLIENT"
        },
        {
          "v": 32123
        },
        {
          "v": 32123
        },
        {
          "v": 0
        },
        {
          "v": 0
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2019, 10, 11)"
        },
        {
          "v": "ADMIN"
        },
        {
          "v": 4135
        },
        {
          "v": 4135
        },
        {
          "v": 0
        },
        {
          "v": 0
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 02, 23)"
        },
        {
          "v": "CLIENT"
        },
        {
          "v": 59110
        },
        {
          "v": 0
        },
        {
          "v": 5110
        },
        {
          "v": 1
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 02, 23)"
        },
        {
          "v": "ADMIN"
        },
        {
          "v": 32655
        },
        {
          "v": 53455
        },
        {
          "v": 0
        },
        {
          "v": 0
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 02, 09)"
        },
        {
          "v": "ADMIN"
        },
        {
          "v": 42152
        },
        {
          "v": 43452
        },
        {
          "v": 0
        },
        {
          "v": 0
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 02, 09)"
        },
        {
          "v": "CLIENT"
        },
        {
          "v": 33214
        },
        {
          "v": 13244
        },
        {
          "v": 0
        },
        {
          "v": 0
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 02, 30)"
        },
        {
          "v": "ADMIN"
        },
        {
          "v": 13534
        },
        {
          "v": 51263
        },
        {
          "v": 3141
        },
        {
          "v": 0.03786
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 02, 30)"
        },
        {
          "v": "CLIENT"
        },
        {
          "v": 11371
        },
        {
          "v": 18771
        },
        {
          "v": 0
        },
        {
          "v": 0
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 03, 20)"
        },
        {
          "v": "ADMIN"
        },
        {
          "v": 12528
        },
        {
          "v": 36073
        },
        {
          "v": 1415
        },
        {
          "v": 0.04473
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 03, 20)"
        },
        {
          "v": "CLIENT"
        },
        {
          "v": 11702
        },
        {
          "v": 13686
        },
        {
          "v": 1216
        },
        {
          "v": 0.05432
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 03, 13)"
        },
        {
          "v": "ADMIN"
        },
        {
          "v": 38233
        },
        {
          "v": 15664
        },
        {
          "v": 2469
        },
        {
          "v": 0.027341
        }
      ]
    },
    {
      "c": [
        {
          "v": "Date(2020, 03, 13)"
        },
        {
          "v": "CLIENT"
        },
        {
          "v": 15253
        },
        {
          "v": 4412
        },
        {
          "v": 6741
        },
        {
          "v": 0.11635
        }
      ]
    }
  ]
}

Yukarıdaki örnek json ile testlerimizi gerçekleştirip adımları sizler ile paylaştım. Örnek bir kod bloğu olarak sizinle alt kısımda Chart rapor örneğini paylaşacağım.

Bu yazımda google chart line karışık görünme sorunu ile ilgili çözümü sizlere aktarmaya çalıştım.

Mini Örnek
<div class="card">
   <div class="card-header">
      <div class="header-title">Haftalık Rapor</div>
   </div>
   <div class="card-body">
      <div class="panel" id="Dashboard">
          <div id="Datecontainer"></div>
          <div id="Clientcontrol"></div>
          <div id="Chartcontainer"></div>
          <div id="Tablecontainer"></div>
      </div>
 </div>
 <div class="card-footer"></div>
</div>

Yukarıda html tagları ile js ile oluşturacağımız grafik ve tablonun çıktılarını yerleştireceğimiz tabloyu hazırladık.

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
</script>

Projemize google loader.js çağırıyoruz ve hangi paketini kullanacağımızı belirttikten sonra, Callback ile oluşturduğumuz fonksiyonu tetikleme işlemine geçiyoruz.

Burada mini bir fonksiyonu sizler ile paylaşıyorum.

function drawVisualization() {
    var jsonData = $.ajax({
        url: "source.php?date=google-week.json",
        dataType: "json",
        async: false
    }).responseText;
    var data = new google.visualization.DataTable(jsonData);
    var myFilter1 = new google.visualization.ControlWrapper({
        controlType: 'DateRangeFilter',
        containerId: 'Datecontainer',
        options: {
            filterColumnLabel: 'HAFTA', // filtre için kullanacağın alan
            ui: {
                format: {
                    'pattern': 'yyyy-ww'
                },
                label: 'HAFTA Aralığı'
            } // filtremele için formatımız
        }
    });
    var Charts = new google.visualization.ChartWrapper({
        chartType: 'ComboChart', // google chart tipleri
        // chartType: 'LineChart',        // google chart tipleri
        // chartType: 'ColumnChart',      // google chart tipleri
        containerId: 'Chartcontainer', // html alanında çıktıyı alacak olan div id'si
        options: {
            // theme: 'material',         // chart için bir tema belirtmek istersen
            isStacked: true,
            title: '', // chart başlığı
            width: '100%', // chart genişlik
            height: '500', // chart uzunluk
            is3D: true,
            pointSize: 9, // noktaların büyüklüğü
            legend: {
                position: 'in'
            }, // içeride olan sütun başlıkları nerede olacağı #in #bottom #top
            curveType: 'function',
            backgroundColor: 'transparent', // arka plan rengi
            axisFontSize: 0,
            hAxis: {
                format: 'yy-ww',
                textStyle: {
                    color: '#1c160d',
                    italic: false,
                    bold: true,
                    fontSize: 17,
                    opacity: 1,
                },
                direction: -1,
                slantedText: true,
                slantedTextAngle: 90
            },
            vAxis: {
                gridlines: {
                    count: 0,
                    color: 'transparent'
                }
            },
            lineWidth: 2, // line çizgisinin genişliği
            explorer: {
                actions: ['dragToZoom', 'rightClickToReset'],
                axis: 'brightness',
                keepInBounds: true,
                maxZoomIn: 12.0
            },
            animation: {
                'duration': 400,
                'easing': 'out'
            },
            /**
             * tabloda yerleşen alanlarda index sıralaması ayarları
             */
            seriesType: 'bars', //chart alanındaki değerlerin görünme tipi
            series: {
                0: {
                    targetAxisIndex: 5,
                    type: 'bars',
                    dataOpacity: 0.2,
                    color: '#1a48c8'
                }, //0 index görünecek tipi, rengi ve opacity değeri
                1: {
                    targetAxisIndex: 0,
                    color: '#f18585',
                    dataOpacity: 0.3,
                    type: 'line'
                } //1 index line şeklinde değerlerin targetAsIndex 0 değerinde görülmesi
            },
            aggregationTarget: 'category',
            focusTarget: 'category'

        },
        // from the 'data' DataTable.
        view: {
            'columns': [0, 2, 5]
        } //json içindeki hangi indexlerin chart alanında görüleceği
    });
    var Table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'Tablecontainer',
        options: {
            sortColumn: 0,
            sortAscending: false,
            width: '100%',
            height: '500'
        }
    });
    var initState = {
        selectedValues: ['CLIENT']
    }; // Filtrelemede varsayılan seçili değer
    initState.selectedValues.push(data.getColumnLabel(1));
    var myFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'Clientcontrol',
        filterColumnIndex: 1,
        state: initState,
        options: {
            filterColumnLabel: 'TYPE',
            matchType: 'any',
            ui: {
                label: 'TYPE',
                labelStacking: 'horizontal',
                allowNone: true,
                allowTyping: false,
                allowMultiple: true,
                selectedValuesLayout: 'belowWrapped',
            }
        },
    });
    var monthYearFormatter = new google.visualization.DateFormat({
        pattern: "yyyy-ww"
    });
    data.sort([{
        column: 0
    }])
    monthYearFormatter.format(data, 0);
    new google.visualization.Dashboard(document.getElementById('Dashboard')).bind([myFilter1, myFilter], [Charts, Table]).draw(data);
}

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir