为Google Charting API构建数组和格式化JSON [英] Building array and formatting JSON for Google Charting API

问题描述

我正在使用Google Charting API的项目中工作，我想使用json填充图表以构建数据表.

I am working on a project where I am making use of the Google Charting API and I want to populate the chart using json to build the data table.

作为测试，我尝试先构建一个简单的数组，然后再尝试使用数据库中的动态数据进行处理，但是在以正确的格式获取json时遇到了问题.

As a test I am trying to build a simple array before I try and do it with dynamic data from a database but I am having a problem getting the json in the correct format.

在google文档中，它表示json内容应位于以下内容中:

In the google documentation it says the json content should be in the following:

{
  "cols": [
        {"id":"","label":"Topping","pattern":"","type":"string"},
        {"id":"","label":"Slices","pattern":"","type":"number"}
      ],
  "rows": [
        {"c":[{"v":"Mushrooms","f":null},{"v":3,"f":null}]},
        {"c":[{"v":"Onions","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Olives","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Zucchini","f":null},{"v":1,"f":null}]},
        {"c":[{"v":"Pepperoni","f":null},{"v":2,"f":null}]}
      ]
}

我正在调用一个返回json代码的函数.

I am calling a function which returns the json code.

下面是该函数的调用方式

Below is how the function is called

print json_encode(test());

，测试功能为

function test()
{
    $array = array();
    $array['cols'][] = "20-01-13";
    $array['cols'][] = "21-01-13";
    $array['cols'][] = "22-01-13";
    $array['rows'][] = 22;
    $array['rows'][] = 26;
    $array['rows'][] = 12;

    return $array;
}

生成图表的javascript如下

The javascript that generates the chart is as follows

<script>
            google.load('visualization', '1', {'packages':['corechart']});

            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(drawChart);

            function drawChart() {
                 var jsonData = $.ajax({
                 url: "loadGraph.php",
                 dataType:"json",
                 async: false
                }).responseText;

                var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('lineGraph'));
      chart.draw(data, {width: 400, height: 240});
            }
        </script>

当我回显json时，它将以以下格式返回

When I echo the json it is being returned in the following format

{"cols":["20-01-13","21-01-13","22-01-13"],"rows":[22,26,12]}

如果我尝试将其用于Google图表的数据集，则会收到以下消息

and if I try and use this for the datasetfor the google chart I get the following message

Cannot read property of '1' of undefined

我只是在构建一个简单的折线图，该折线图仅包含沿x轴的日期和沿y轴的日期在该日期发生了多少次计数.

I am only building a simple line chart which will just contain a date along the x axis and a count of how many times something happened on that date along the y axis.

我该如何构建数组以使其以正确的格式显示Google api图表.

How do I nee to build up the array to get it in the correct format for the google api chart.

感谢您可以提供的任何帮助.

Thanks for any help you can provide.

推荐答案

您需要为cols指定参数 type .请参阅 Google图表JSON格式

You need to specify the parameter type for cols. Refer to Google Charts JSON Format

您的PHP代码应类似于:

Your PHP code should look similar to:

function test()
{
    $array['cols'][] = array('type' => 'string');
    $array['cols'][] = array('type' => 'string');
    $array['cols'][] = array('type' => 'string');

    $array['rows'][] = array('c' => array( array('v'=>'20-01-13'), array('v'=>22)) );
    $array['rows'][] = array('c' => array( array('v'=>'21-01-13'), array('v'=>26)));
    $array['rows'][] = array('c' => array( array('v'=>'22-01-13'), array('v'=>12)));

    return $array;
}

print json_encode(test());

您的json代码看起来更像:

Your json code would look more like:

{
  "cols": [
    {"type": "string"},
    {"type": "string"},
    {"type": "string"}
    ],
  "rows": [
    {"c":[{"v":"20-01-13"}, {"v":22} ]},
    {"c":[{"v":"21-01-13"}, {"v":26} ]},
    {"c":[{"v":"22-01-13"}, {"v":12} ]}
  ]
}

这篇关于为Google Charting API构建数组和格式化JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！