JS Charting: Google Sheets

在这一条中,我们将从一个可公开获取的gogle电子表格中(通过JSON)数据,并使用

We will use this spreadsheet (Figure 1):

$.getJSON(
    "https://spreadsheets.google.com/feeds/pst/1D1vL8EI0uRzeiGM-A8hZLgUCexXrocw5B_qTGnCekNE/od6/pubpc/basic?alt=json",
    function(data){
    console.log(data);
}
    

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

它以一系列名称、x和加点ToSeries功能的价值通过每个条目开展工作。 如果该名称有一系列,就会产生新的系列,否则该系列就增加了一个点。 在处理所有条目后,将归还一系列的条目。

注:在平价内容财产时,确保将价值分成两部分,然后使用一个空间的 com。 这一点是必要的,因为数字数值可以包括1,20.00美元等 com,而日元值可在部分时间内包含殖民地,两者在平时都会造成问题。

Making your chart dashboard

现在,我们已经到了这个小点——对这些数据进行录像。 j 质量已经包括在内,因此我们只需要增加图表,以便开始。

<script src="JSC/JSCharting.js"></script>

其次,在海图本身添加了一个小部分:

<span id="mainChart"></span>

And the code to create a chart from the data we have so far:

$( #mainChart ).JSC({
	xAxisScaleType:  time ,
	yAxisScaleRangeMin: 0,
	series: seriesData
});
    

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

既然基本图表已经建立,我们将增加一些环境,以调整图表,并利用联合制图委员会提供的定制。

首先,描述本图中表述的价值观的有些轴心环境。

yAxis:{
    formatString: c ,
    labelText: Received ,
    scaleRangeMin: 0
},
    

说明:注意到这些选择群体如何成为“轴心”财产下的一个物体,而在前一个例子中,使用单一财产作为选项根基来设定类似的选择。 之所以能够做到这一点,是因为共同财产委员会的规划办法允许将财产等级名称合并为单一财产环境,以便于使用。

这里,我们把等值作为货币,并树立了轴心标签。 以这种方式提供数据,将传播到图表中利用和价值的所有其它部分。 例如,如果在工具箱或其他地方提及某种价值,就会自动作为货币。 通过给轴贴标签,还将帮助自动工具箱描述数据点。

接下来,我们用以下代码具体说明这一图表的标题:

titleLabelText:  2015 Accounts Receivable Total: %sum 

Notice the %sum token included in the title text. There are many tokens that can be used in the chart title. These tokens are all psted under the series collection section of this token reference.

Also, note how the sum takes on the currency format since it related to values on the y axis.

其次,请修改文字标签,以包括每一系列的总和:

legendDefaultEntryText: %name %sum ,

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

我们编制的下一个图表将以从第一个图表中提取的计算为基础,每个单位的月平均收入将作为一张纸张显示。 另有四舍五入到html。

<span id="avgChart"></span>

Then, in order to interact with the first chart’s data and use those calculations, the code for the average chart will be placed inside a callback of the first charts initiapzation method.

$( #mainChart ).JSC({/*options*/, function(chart){ /*callback code*/});

This chart will contain only one series with a bar representing the average monthly income of each series. To do this, the main chart’s series are iterated and a new point is created for each where the y value is the series sum spanided by 12 months.

通过为这一系列规定一个字塔,每个条条块将具有不同的颜色,与主要海图的颜色编码相匹配。

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

The final chart will be a pie chart using this original data to show the percentage of income each unit contributed to the total. Our current chart can be converted to a pie chart by simply adding a type: pie property. You can view a pst of JS charting chart types along with samples for each to experiment with other types. This setting causes the chart to show a pie where each series become a spce. If the goal was to have a pie represent each series, the setting would be defaultSeriesType: pie which would have each series be a pie type instead.

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

$( #pieChart ).JSC({
	type: pie ,
 	yAxisFormatString:  c ,
     defaultPointLabelText: <b>%name</b> %percentOfTotal% ,
	series: seriesData
  });

尽管没有轴心,但通知如何具体指明轴体。 这是因为轴心的设定描述的是自然价值而不是实际轴。

该表还使用以下代码规定了违约点标签:

defaultPointLabelText: <b>%name</b> %percentOfTotal% ,

再说一遍,我们利用了象征性的东西,但这次是从象征性的。

JS Charting Spreadsheet helper

It is worth mentioning an interesting feature of JS Charting that can be helpful in some spreadsheet cases. In the above chart, we use a time scale for the x axis, so the order and position of each data point is defined by the value itself. In some cases, such as three letter month abbreviations, x values are names or any arbitrary strings. Since some of these strings cannot be parsed into dates or any quantitative values that indicate a position along the x axis, the sort order of points may not be correct. That is, of course, if there are empty cells in a spreadsheet and the first few values of the first series are missing. Generally you would expect the first processed series to define the initial x axis values. Then any new x axis values encountered in subsequent series would be placed at the end of the x axis. JSCharting will automatically analyze the order of all the series points to determine what the intended order is even when some series have missing points. You can see an example of this here.

See the Pen by Arthur Puszynski (@jsblog) on CodePen.

Here, we assign the date values as point names and remove the x axis time scale setting. The result is that the chart looks the same as when using time scales and values.

Conclusion

谷歌电子表格提供了一些独一无二的存储云层数据的能力,并允许在任何网络信号中使用。 还有可能动态地更新这些电子表格,提供基于云层的数据库背后。 联合材料制图使这一数据难以预测,并贴上标注支持的标签,可以用很少的代码制作丰富和描述性的图表。 有许多,包括无额外费用与产品捆绑在一起的绘图。 全套图表类型和特征可以免费下载和试验,用于发展目的。 共同提交文件描述的是声明性反应,详尽无遗。