[英]Formatting the data to populate google charts
I am trying to display Line charts using Google API. 我正在尝试使用Google API显示折线图。 For the same I tried to format the data from ASP.net Webmethod like
同样,我试图格式化来自ASP.net Webmethod的数据,例如
[WebMethod]
public static List<object> GetChartData()
{
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"DateTime", "Bugs"
});
chartData.Add(new object[]
{
"2011", "12",
"2014","45",
"2015","40",
"2016","98"
});
return chartData;
}
and here is my Client side code. 这是我的客户端代码。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Bug Tracker'
};
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.LineChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
On running the above code I am getting an error like 0x800a139e - JavaScript runtime error: Row 0 has 8 columns, but must have 2
What is wrong and how to resolve that ? 在运行上面的代码时,我收到类似
0x800a139e - JavaScript runtime error: Row 0 has 8 columns, but must have 2
的错误0x800a139e - JavaScript runtime error: Row 0 has 8 columns, but must have 2
什么是错误的,以及如何解决这个问题?
any column after the first, should be a number 第一列之后的任何列,应为数字
unless given a specific role, such as tooltip
除非赋予特定角色,例如
tooltip
try this... 尝试这个...
chartData.Add(new object[] {"DateTime", "Bugs"});
chartData.Add(new object[] {"2011", 12});
chartData.Add(new object[] {"2014", 45});
chartData.Add(new object[] {"2015", 40});
chartData.Add(new object[] {"2016", 98});
or on the client, adjusting the code in the comment... 或在客户端上,调整注释中的代码...
var charData = r.d;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');
for (var i = 0; i < charData.length; i++) {
data.addRow([charData[i].DateTime, pareseInt(charData[i].Bugs)]);
}
EDIT 编辑
with data as follows... 数据如下...
[["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]]
then only need arrayToDataTable
to create DataTable 然后只需要
arrayToDataTable
来创建DataTable
see following working snippet... 请参阅以下工作片段...
google.charts.load('current', { callback: function () { var r = {}; rd = [["DateTime","Bugs"],["2011",12],["2014",45],["2015",40],["2016",98]]; var data = google.visualization.arrayToDataTable(rd); var options = { title: "Bug Tracker", pointSize: 5 }; var lineChart = new google.visualization.LineChart(document.getElementById('chart')); lineChart.draw(data, options); }, packages:['corechart'] });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart"></div>
To answer your question: 要回答您的问题:
"On running the above code I am getting an error like 0x800a139e - JavaScript runtime error: Row 0 has 8 columns, but must have 2" What is wrong and how to resolve that ?
“在运行上面的代码时,我收到类似0x800a139e的错误-JavaScript运行时错误:行0有8列,但必须有2列。”有什么问题,怎么解决?
You are adding the entire table and it's reading the number of rows as the number of columns. 您正在添加整个表,并且它正在读取的行数为列数。 It's expecting two columns with 8 rows of data.
期望两列包含8行数据。 Break it down to something like this, this is if you are accessing the data from the class.:
将其分解为类似的内容,这是如果您要从类中访问数据。
Without seeing all your code this is a sample of the type of algorithm you would need: 在没有看到所有代码的情况下,这是您需要的算法类型的示例:
Create a class for your objects' data: 为对象的数据创建一个类:
public class MyData{
public string Year {get; set;}
public int Bugs {get; set;}
var bugs = new List<MyData>BugList():
// add data.
Get that data with your ajax to a method that will get the List of data and serialize it into a Json format. 使用ajax将数据获取到一种方法,该方法将获取数据列表并将其序列化为Json格式。
return JsonConvert.SerializeObject(bugs);
You can then access the data from within the javascript. 然后,您可以从javascript中访问数据。 It's important to separate out the chart part of the code from the C# data, for the sake of modularisation.
为了模块化,从C#数据中分离出代码的图表部分非常重要。 Hence the details for the chart are added where the chart is created.
因此,将在创建图表的位置添加图表的详细信息。
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');
for (var i in chardata) {
data.addRow([chardata.Year[i], ints[chardata.Bugs[i]]]);
}
As an example try the following: 作为示例,请尝试以下操作:
var str = new string[3] {"2011", "2012", "2013"};
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Bugs');
for (var i in str) {
data.addRow([str[i], ints[i]]);
}
Test it on something simple like this, then work on accessing your data through the ajax. 在像这样的简单对象上进行测试,然后通过ajax访问数据。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.