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?
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.
Ö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);
}
