CODEWITHSUNDEEP
phpjsoncharts
Ck2513
Ck2513

Reputation: 107

Explain of JSON format in google charts

I made a google bar chart with json data. But i do not understand wht the "c" and "v" do.

Would be very happy, if someone could give me a short explaination for what they are and why I have to use them. 

<?php
//Balkendiagramm
$query_barchart = "SELECT COUNT(CASE WHEN name_Gleitzeitrahmen = 'Ja' THEN 1 END) as Ja,COUNT(CASE WHEN name_Gleitzeitrahmen = 'Nein' THEN 1 END)as Nein,quarter(datum) as quartal FROM landrat_dashboard GROUP BY quartal";
$result_barchart = mysqli_query($con,$query_barchart);

$rows_barchart = array();
$table_barchart = array();
$table_barchart['cols'] = array(

// Hier werden die Namen für die Spalten festgelegt
// Eine Spalte muss vom Typ String sein, sie repräsentiert den Spalten Titel, 
// die anderen sind vom Typ number, da google-chart Zahlen braucht, um Prozentangaben oder andere Formate untereinander zu vergleichen
array('label' => 'Quartal', 'type' => 'string'),
array('label' => 'Anzahl Ja', 'type' => 'number'),
array('label' => 'Anzahl Nein', 'type' => 'number')
);

$rows_barchart = array();
while($r = mysqli_fetch_assoc($result_barchart)) {
    $temp = array();
    // Folgende Zeile wird benötigt, um das Diagramm in Teilstücke aufzuteilen. Quasi die erste Zeile einer Tabelle
    $temp[] = array('v' => (string) $r['quartal']); 

    // Hier werden Werte für jedes Teistück vergeben. Quasi die Zeilen einer Tabelle
    $temp[] = array('v' => (int) $r['Ja'] ); 
    $temp[] = array('v' => (int) $r['Nein'] );
    $rows_barchart[] = array('c' => $temp); 
}

$table_barchart['rows'] = $rows_barchart;
$jsonTable_barchart = json_encode($table_barchart);// Das Array wird in JSON Format umgewandelt, welches vom google-chart akzeptiert wird.
//echo $jsonTable_barchart;
?>

Upvotes: 2

Views: 1832

Answers (1)

Lawrence Cherone
Lawrence Cherone

Reputation: 46602

Cell = c

Value = v (used for both for cell value and the value value)

You can create your data in 2 ways, using the API methods or building from a literal string (json) like your doing. The later requires the c and v object properties, because you could order them differently and it would still work.

From the manual: https://developers.google.com/chart/interactive/docs/reference#DataTable

Using an json object example.

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

Using the API methods.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);

Columns and cells

cols Example

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows Property

The rows property holds an array of row objects.

Each row object has one required property called c, which is an array of cells in that row. It also has an optional p property that defines a map of arbitrary custom values to assign to the whole row. If your visualization supports any row-level properties it will describe them; otherwise, this property will be ignored.

Cell Objects

Each cell in the table is described by an object with the following properties:

v [Optional] The cell value. The data type should match the column data type. If the cell is null, the v property should be null, though it can still have f and p properties.

All can be found in the docs link above.

Upvotes: 2

Related Questions