Daten-Visualisierung-mit-Google-Charts

Alles rund um die Webanalyse und Suchmaschienen Marketing

Daten-Visualisierung-mit-Google-Charts

Fragen Wer wie was

Daten mit Google Charts aufbereiten für Analytics und Machine Learning Teil 1

Google Charts ist eine super Möglichkeit Daten zu visualisieren. Sie können Quasi alle Daten damit auf Ihren eigenen Server visualisieren ohne die Daten mit dritten zu teilen. Dank der Api wird das quasi Zeichnen von Google übernommen. Sie müssen nur auf Ihren Server die Daten haben eine Bibliothek laden. Alles funktioniert mit HTML und Javascript. Es kann natürlich vorkommen wenn Sie bestimmte Daten von bestimmten Programmen wie Adwords haben wollen, das Sie dieses mit PHP ansteuern müssen.

Vorteil hierbei ist es, dass man mit den Daten vor der Visualisierung, alle Berechnungen anstellen kann die man möchte (Korellation, Metriken Multiplikation etc.). Bedeutet also ne menge Spaß.

So kommen wir nun zum Code:

<?php$rating_data = array(

array('Quelle', 'Herkunft'),


array('Yahoo',7),


array('Bing',20),


array('Google',71),


array('DuckDuckGo',2),


);


$encoded_data = json_encode($rating_data);


?>

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

function drawChart()
{
var data = google.visualization.arrayToDataTable(
<?php echo $encoded_data; ?>
);
var options = {
title: "Quelle Herkunft"
};
var chart = new google.visualization.PieChart(document.getElementById("piechart"));
chart.draw(data, options);
}
</script>
<style>
body
{
margin:0 auto;
padding:0px;
text-align:center;
width:100%;
font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
background-color:#FAFAFA;
}
#wrapper
{
margin:0 auto;
padding:0px;
text-align:center;
width:995px;
}
#wrapper h1
{
margin-top:50px;
font-size:45px;
color:#585858;
}
#wrapper h1 p
{
font-size:18px;
}
#employee_piechart
{
padding:0px;
width:600px;
height:400px;
margin-left:190px;
}
</style>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

In dem obigen Beispiel ist ein PHP Teil vorhanden. Dieser ist in der Regel erforderlich wenn Sie Daten via API abrufen. Wie die Daten genau abgerufen werden ist bei jedem System anders. Wir gehen jetzt nicht direkt darauf ein.

Sie können Den PHP Code auch gegen ein Javascript Code tauschen.

Wir benötigen ein Array mit daten bsp:

<?php$rating_data = array(

array('Quelle', 'Herkunft'),


array('Yahoo',7),


array('Bing',20),


array('Google',71),


array('DuckDuckGo',2),


);


$encoded_data = json_encode($rating_data);


?>

Die Zahlen, spiegeln die % Werte in der Regel wieder.

In Rot werden einmal die Bibliotheken geladen. Wenn jQuery schon geladen wird, benötigen Sie diesen Link nicht erneut.

Im Orangenen Teil, laden wir zu erst die richtige Bibliothek und nach dem diese geladen wurde, rufen wir die Funktion auf mit den Daten. Damit wird dann das Array vom PHP Teil mit der zu erstellenden Grafik verknüpft. Wenn Sie nur Javascript verwenden, können Sie <?php echo $encoded_data; ?>
durch eine var = Ihr Array ersetzen.

Der Titel (title) ist die Beschriftung der jeweiligen Grafik.

Endgültig erstellen Sie die Grafik mit folgendem Code:

var chart = new google.visualization.PieChart(document.getElementById("piechart"));
chart.draw(data, options);

In der obigen Variable wird ein Kreisdiagramm erstellt. Wenn man Pie durch Bar tauscht, wird dort wird ein Balkendiagramm eingetauscht. Die Grafik wird an dem Div mit der Id piechart angehängt. Bedeutet wenn man mehrere Grafiken auf einer Seite haben möchte, benötigt man einfach mehrere Elemente mit ID und passt diese mit CSS an.

Fazit

Mit der Cheats API, lassen sich Analzticsdaten aus allen möglichen resourcen Visualisieren. Auch in Abhängigkeit. Man kann diese auch vor der Visualisierung berechnen, verarbeiten etc. Man kann die Visualisierung auch für Machine Learning nutzen um den Stand des Lernens bzw den Status der Ki Abzufragen. Egal im welchen Feld, ist diese immer eine Schnelle Lösung mal eben Daten zu visualisieren.

Die Grafiken Sehen wie folgt aus (Grafiken im Iframe eingebunden):

 



 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.