使用JSON绘制包含多行的单个Google线图 [英] Drawing a Single Google Line Chart with multiple lines using JSON

问题描述

我试图从mysql数据库收到的数据中绘制折线图。从数据库中获得这些数据

我想绘制一个谷歌折线图，将x轴作为销售日期，将y轴作为product_name。但我想为每个产品多行，就像这样。

我可以绘制单个产品的图表。但无法想象如何为同一个图表中的多个产品做到这一点。我正在使用JSON获取图表的数据并使用MySQL数据库。任何帮助，教程将不胜感激。谢谢。

PS：我按照这个教程做了一个折线图。
http://www.kometschuh.de/GoogleChartToolswithJSON.html

解决方案

根据示例和文档 here ，您需要创建图表的数据部分，如下所示：

  var data = google.visualization.arrayToDataTable（[
 ['Year'，'Sales'，'Expenses']，
 ['2004'，1000，400]，
 ['' 2005''，1170,460]，
 ['2006'，660,1120]，
 ['2007'，1030,540] 
]）; 
  

['Year'，'Sales'，'Expenses'] [x轴，第1行，第2行，... lineX]

那么每个后续数组就是相应的数据。

在你链接的例子中，数据显示为['day'，'counts']，它对应于以上格式。

您可以在数据格式 此处

I'm trying to draw a line chart from data received from mysql database. From the database I have these data

I want to draw a google line chart getting the x-axis as the sales date and the y-axis as the product_name. But I want multiple lines for each product, like this.

I can draw the chart for a single product. But can't imagine how to do it for multiple products in the same chart. I'm using JSON to get data for the chart and using a MySQL database. Any help, tutorial would be appreciated. Thanks.

PS: I followed this tutorial for a single line chart. http://www.kometschuh.de/GoogleChartToolswithJSON.html

解决方案

According to the example and documentation here, you need to create the data portion of the charts like so:

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

['Year', 'Sales', 'Expenses'] is [x-axis, line 1, line 2, ... lineX]

then each subsequent array is the corresponding data.

In the example you've linked it shows the data as ['day', 'counts'], which corresponds to the above format.

You can see a representation of this right under the heading of Data Format here

这篇关于使用JSON绘制包含多行的单个Google线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！