从 MYSQL 数据创建谷歌折线图

Posted 2023-02-24

【中文标题】从 MYSQL 数据创建谷歌折线图

【英文标题】：Creating a Google Line Chart from MYSQL data

【发布时间】：2017-01-08 16:02:06

【问题描述】：

我的目标是使用我从 mysql 数据库中提取的数据在同一个图表上创建多个折线图。

我有代码，但我错过了一个步骤，因此没有得到我期望的输出。这是我的代码：

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

<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>

这就是我的代码。这是从数据库传递到图表的 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]]

下面是输出的折线图：

line chart output from above code

这不是我想要的。我的最终目标是获得显示多个折线图的图表（取决于存在的年数），所有月份显示在 X 轴上，数量显示在 Y 轴上。这是我见过的最接近我想要实现的目标：

linechart

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

我对此有点困惑，希望获得有关如何完成此操作的指导

其他请求

SIDU 已尝试通过推荐我使用 svg 图表来提供帮助。赞赏，但不能使用谷歌图表来完成吗？

【问题讨论】：

试试：topnew.net/chart

好的。会看看

每年需要单独的列 -- 每列创建一个单独的行/系列 -- 如果列年份与行日期不匹配，则将 null 用于其他列值

好的。记住它必须动态完成

在这个问题上还需要帮助吗？

【参考方案1】：

使用 Topnew SVG 图表很容易：

http://topnew.net/cms/cms_chart.php?data=ymd,Hit,IP;2016-01-01,2000,1000;2016-02-05,3000,1800;2016-03-20,4000,3000&chart=line&fmt=str_xss&xFormat=date|M

如果你下载的是 9k topnew svg 图表，你可以改用以下方式调用它：

<?php
include 'topnew_svg_chart.php';
$data = [
    'Hit' => [
        '2016-01-01' => 12345,
        '2016-02-03' => 12345,
    ],
    'IP'  => [
        '2016-01-01' => 2345,
        '2016-02-03' => 2345,
    ]
];
$init = [
    'chart'   => 'line',
    'xFormat' => 'date|M',
];
cms_chart($data, $init);

【讨论】：

嘿西杜。一直在看 svg 图表。您能否指导我如何动态填充图表？