php - 使用来自 MYSQL 的数据动态填充 Google 折线图

标签 php mysql json google-visualization

我的最终目标是获得一个显示多个折线图(取决于存在的年数)的图表,其中所有月份显示在 X 轴上,金额显示在 Y 轴上。这是我见过的最接近我想要实现的东西:

google line chart

上图显示了我想要实现的目标。如前所述,X 轴上的月份与 Y 轴上的数量。那么“值”将是从查询中返回的年份,即每年都有自己的折线图

这是返回 json 的 php 位:

<?php
    $results = array('cols' => array (array('label' => 'Date', 'type' => date'),
               array('label' => 'Amount', 'type' => 'number')
               ),
               'rows' => array()
              );

    $query = $db->prepare('SELECT * FROM Claims GROUP BY EXTRACT(MONTH FROM ClaimDate ) , EXTRACT( YEAR FROM ClaimDate ) ');

    $query->execute();
    $rows1 = $query->fetchAll(PDO::FETCH_ASSOC);

    foreach($rows1 as $row)
    {
        $ClaimDate = DateTime::createFromFormat('Y-m-d H:i:s', $row['ClaimDate'])->format('Y-m-d');

        $dateArr = explode('-', $ClaimDate);
        $year = (int) $dateArr[0];
        $month = (int) $dateArr[1] - 1; 
        $day = (int) $dateArr[2];

        $results['rows'][] = array('c' => array(array('v' => "Date($year, $month, $day)"), array('v' => $row['amount'])
        ));
    }
    $json = json_encode($results, JSON_NUMERIC_CHECK);
    // print_r($json);exit;
?>

这是返回的 json:

{"cols":[{"label":"Date","type":"date"},{"label":"Amount","type":"number"}],"rows":[{"c":[{"v":"Date(2015, 5, 23)"},{"v":6000}]},{"c":[{"v":"Date(2016, 5, 23)"},{"v":16000}]},{"c":[{"v":"Date(2015, 6, 23)"},{"v":10000}]},{"c":[{"v":"Date(2016, 6, 23)"},{"v":10000}]},{"c":[{"v":"Date(2015, 7, 23)"},{"v":5000}]},{"c":[{"v":"Date(2016, 7, 23)"},{"v":60000}]}]}

最后,这是呈现图表的函数:

<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() 
{
   var data = new google.visualization.DataTable(<?php echo json_encode($json); ?>);
   var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
   chart.draw(data, {width: 400, height: 240});
}   
</script>
<div id="line_chart"></div>

所有这些的输出如下所示:

chart rendered by the above code

如上所示,我离实现我想要的还有一段距离。我坚持这一点,任何帮助将不胜感激

编辑

根据 Ram Kannan Raj 的回答,我已将 ORDER BY ClaimDate ASC 添加到我的查询中,折线图看起来更像样了:

improved linechart

但仍然不是我想要的输出。每一年都应该有自己的折线图,X轴为所有月份

最佳答案

尝试使用您的查询按升序排列 ClaimDate

$query = $db->prepare('SELECT * FROM Claims GROUP BY EXTRACT(MONTH FROM ClaimDate ) , EXTRACT( YEAR FROM ClaimDate ) ORDER BY ClaimDate ASC');

关于php - 使用来自 MYSQL 的数据动态填充 Google 折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39268272/

相关文章:

php - Mime/Base 64 编码

php - 在 PHP 中使用 PDO 动态构建多级菜单

php - 如何解码这种格式的 mysql 字段中的数据?

python - 如何从python中的JSON文件中选择数据?

php - 我有一个数组,不能使用implode()进行查询

Php 从 URL 获取哈希值

mysql - SonarQube 出现 MySql 设置错误

sql - 具有不同参数的 2 个相同的 sql 查询 - 只有一个需要临时表

python - 在获取 url python 中将数据帧列值作为参数传递

android - 如何在 android 中使用 Retrofit 2 发布 JSON?