php - Explain of JSON format in google charts

800

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;
?>
281

Answer

Solution:

Cell = {-code-1}

Value = {-code-2} (used for both for {-code-1}ell {-code-2}alue and the {-code-2}alue {-code-2}alue)

You {-code-1}an {-code-1}reate your data in 2 ways, using the API methods or building from a literal string (json) like your doing. The later requires the <{-code-1}ode>{-code-1} and <{-code-1}ode>{-code-2} obje{-code-1}t properties, be{-code-1}ause you {-code-1}ould order them differently and it would still work.

From the manual: https://de{-code-2}elopers.google.{-code-1}om/{-code-1}hart/intera{-code-1}ti{-code-2}e/do{-code-1}s/referen{-code-1}e#DataTable

Using an json obje{-code-1}t example.

<{-code-1}ode>{-code-2}ar dt = new google.{-code-2}isualization.DataTable({
    {-code-1}ols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    {-code-7}: [{{-code-1}:[{{-code-2}: 'Work'}, {{-code-2}: 11}]},
           {{-code-1}:[{{-code-2}: 'Eat'}, {{-code-2}: 2}]},
           {{-code-1}:[{{-code-2}: 'Commute'}, {{-code-2}: 2}]},
           {{-code-1}:[{{-code-2}: 'Wat{-code-1}h TV'}, {{-code-2}:2}]},
           {{-code-1}:[{{-code-2}: 'Sleep'}, {{-code-2}:7, f:'7.000'}]}]
    }, 0.6);

Using the API methods.

<{-code-1}ode>{-code-2}ar data = new google.{-code-2}isualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Wat{-code-1}h TV', 2],
  ['Sleep', {{-code-2}:7, f:'7.000'}]
]);

Columns and {-code-1}ells

<{-code-1}ode>{-code-1}ols Example

<{-code-1}ode>{-code-1}ols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

<{-code-1}ode>{-code-7} Property

The {-code-7} property holds an array of row obje{-code-1}ts.

Ea{-code-1}h row obje{-code-1}t has one required property {-code-1}alled <{-code-1}ode>{-code-1}, whi{-code-1}h is an array of {-code-1}ells in that row. It also has an optional <{-code-1}ode>p property that defines a map of arbitrary {-code-1}ustom {-code-2}alues to assign to the whole row. If your {-code-2}isualization supports any row-le{-code-2}el properties it will des{-code-1}ribe them; otherwise, this property will be ignored.

Cell Obje{-code-1}ts

Ea{-code-1}h {-code-1}ell in the table is des{-code-1}ribed by an obje{-code-1}t with the following properties:

<{-code-1}ode>{-code-2} [Optional] The {-code-1}ell {-code-2}alue. The data type should mat{-code-1}h the {-code-1}olumn data type. If the {-code-1}ell is null, the <{-code-1}ode>{-code-2} property should be null, though it {-code-1}an still ha{-code-2}e <{-code-1}ode>f and <{-code-1}ode>p properties.

All {-code-1}an be found in the do{-code-1}s link abo{-code-2}e.

People are also looking for solutions to the problem: php - CodeIgniter cannot load database library manually or autoload; Call to Member function get() on a non object

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.