图表未显示使用HighCahrts和Google Analytics创建的图表
Chart Is not displaying Created Using HighCahrts and Google Analytics
我正在使用HighCharts查看Google Analytics的数据。为了动态获取数据，我使用 JSON。我对这一部分毫不怀疑。为此，我使用以下JavaScript函数。
function Load(responseJson){
//----------------------------------------------- Rohan
var labels = new Array();
var values = new Array();
var catogories = new Array();
var arrayOfArray = new Array();
var rowData = responseJson;
console.log("Row Data " + rowData)
console.log("RowData is " + typeof rowData );
inData = JSON.parse(rowData);
var count = 0;
var headers = new Array();
for (var i = 0; i < inData.columnHeaders.length; i++) {
headers[i] = inData.columnHeaders[i].name;
}
var dates = new Array();
var pageViews = new Array();
var uniqueViews = new Array();
for (var key in inData.rows) {
dates[key] = inData.rows[key][0];
pageViews[key] = parseInt(inData.rows[key][1]);
uniqueViews[key] = parseInt(inData.rows[key][2]);
}
$('#container_2').highcharts({
chart: {
type: 'areaspline', zoomType: 'x'
},
title: {
text: 'Pageviews and Bounces'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#ffffff'
},
xAxis: {
categories: dates,
type: 'datetime',
dateTimeLabelFormats: {
month: '%d %b',
},
tickInterval: 10,
plotBands: [{ // visualize the weekend
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Visits'
}
},
tooltip: {
shared: true,
valueSuffix: ' '
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Page Views',
data: pageViews,
/***01***/colors: ['#CCFF99']
}, {
name: 'Bounces',
data: uniqueViews
}]
});
}
在这个JavaScript fnction中，我设法从Google Analytics获取数据，并传递到我使用HighCharts创建的图表。图表不显示，但当我将鼠标指针放在它上面时会显示值。所以我试图像 01 年一样为该系列添加一些颜色。但它并没有改变外观。仅显示 2 轴和图例，但颜色仅显示在图例中。我无法弄清楚我做错了什么。
你能帮我解决这个问题吗？
感谢和问候，奇兰塔卡
清理源代码
function retStartDate(){
var strStartDate = document.getElementById("from_date").value;
return strStartDate;
}
function retEndDate(){
var strEndDate = document.getElementById("to_date").value;
return strEndDate;
}
function setJsonSer() {
var strWsUrl = 'https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A76546294&dimensions='+ 'ga%3Asource&metrics=ga%3Ausers&sort=-ga%3Ausers&start-date='+retStartDate()+'&end-date='+retEndDate()+'&max-results=10';
/*var strWsUrl = 'https://www.googleapis.com/analytics/v3/data/ga?ids=ga%3A76546294&dimensions=ga%3Asource&metrics=ga%3Ausers&filters=ga%3Asource!%3D(direct)&start-date='+retStartDate()+'&end-date='+retEndDate()+'&max-results=5';*/
formData = {
'Email': 'clientlink@client.com',
'Password': 'password',
'URL': strWsUrl
};
$.ajax({
url: "/APIWebService.asmx/AnalyticsDataShowWithPost",
type: 'POST',
data: formData,
complete: function(data) {
var responseText = data.responseText;
var responseJson = JSON.parse(responseText.match(/[{].*.[}]/));
console.log(responseJson);
Load(JSON.stringify(responseJson));
}
});
console.log("JSON The return is OK! ");
}
function BarChart(inData) {
var labels = new Array();
var values = new Array();
for (var key in inData.rows) {
var dt = new Array();
dt[0] = parseInt(inData.rows[key][1]);
var jsRow = { name: inData.rows[key][0], data: dt };
labels[key] = jsRow;
}
$(function () {
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Which Source brought more users?'
},
subtitle: {
text: 'Source: Google Analytics'
},
xAxis: {
categories: ['Source'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Users',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: null
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: labels
});
});
}
google.load('visualization', '1', { packages: ['table'] });
google.load("visualization", "1", { packages: ["corechart"] });
function Load(responseJson){
//----------------------------------------------- Rohan
var labels = new Array();
var values = new Array();
var catogories = new Array();
var arrayOfArray = new Array();
var rowData = responseJson;
console.log("Row Data " + rowData)
console.log("RowData is " + typeof rowData );
inData = JSON.parse(rowData);
var count = 0;
var headers = new Array();
for (var i = 0; i < inData.columnHeaders.length; i++) {
headers[i] = inData.columnHeaders[i].name;
}
var dates = new Array();
var pageViews = new Array();
var uniqueViews = new Array();
for (var key in inData.rows) {
dates[key] = inData.rows[key][0];
pageViews[key] = parseInt(inData.rows[key][1]);
uniqueViews[key] = parseInt(inData.rows[key][2]);
}
$('#container_2').highcharts({
chart: {
type: 'areaspline', zoomType: 'x'
},
title: {
text: 'Pageviews and Bounces'
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 150,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
xAxis: {
categories: dates,
type: 'datetime',
dateTimeLabelFormats: {
month: '%d %b',
},
tickInterval: 10,
plotBands: [{ // visualize the weekend
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Visits'
}
},
tooltip: {
shared: true,
valueSuffix: ' '
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'Page Views',
data: pageViews,
color: '#ff0000'
}, {
name: 'Bounces',
data: uniqueViews,
color: '#ccff99'
}]
});
//----------------------------------------------- Rohan
//----------------------------------------------- Faahika
var labels = new Array();
var values = new Array();
var catogories = new Array();
var arrayOfArray = new Array();
var rowData = responseJson;
inData = JSON.parse(rowData);
var count = 0;
var headers = new Array();
for (var i = 1; i < inData.columnHeaders.length;i++) {
headers[i - 1] = inData.columnHeaders[i].name;
}
for (var key in inData.rows) {
var dt = new Array();
dt[0] = parseInt(inData.rows[key][1]);
dt[1] = parseInt(inData.rows[key][2]);
dt[2] = parseInt(inData.rows[key][3]);
arrayOfArray[count] = dt;
catogories[count] = inData.rows[key][0];
count++
}
var dynamicArray = new Array();
for (var i = 0; i < headers.length; i++) {
var temp = new Array();
for (var c = 0; c < arrayOfArray.length; c++) {
temp[c] = arrayOfArray[c][i];
}
dynamicArray[i] = temp;
}
var jsonCollection = new Array();
for (var c = 0; c < headers.length; c++) {
var json = { name: headers[c], data: dynamicArray[c] };
jsonCollection[c] = json;
}
console.log(jsonCollection);
$(function () {
$('#container_3').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Channels for Nurture Activities'
},
xAxis: {
categories: catogories
},
yAxis: {
min: 0,
title: {
text: null
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
}
},
series:
jsonCollection
});
});
BarChart(inData);
DrawGoogleTable(NurtureActivities,[0,1,2,3,4],'table_div4',false);
DrawGoogleTable(ChannelNurtureActivities,[1,2],'table_div5',false);
DrawGoogleTable(TopSiteReferrers,[0,1],'table_div6',false);
DrawGoogleTable(TopCampaigns,[0,1],'table_div7',false);
DrawGoogleTable(TopKeywords,[0,1],'table_div8',false);
DrawGoogleTable(WebPages,[0,1],'table_div9',true);
DrawGoogleTable(ResearchDocuments,[0,1],'table_div11',false);
DrawGoogleTable(SocialNetworks,[0,1],'table_div10',false);
DrawGoogleTable(TopVideos,[0,1],'table_div12',false);
}
I have cleaned the code and deleted unwanted snippets. I have the problem in #container_2. But I passed data to #container_3 chart and it draw it perfectly. So could you someone look into the #container_2 chart? Thanks
我找到了答案。我使用的图表使用 2 个数据系列，但我用于绘制图表的查询字符串仅包含一个数据系列，因此图表不绘制，而只绘制图例和 2 轴。
但是谢谢大家的一切！
感谢和问候，奇兰塔卡
相关文章：
- 在Google Analytics中跟踪用户，但只能在两个操作之间跟踪
- 如何使用Google Analytics跟踪表单提交
- 创建类似于Google analytics的分析地图
- 如何将Google Analytics配置为将URL参数作为单个页面进行跟踪
- 从Google Analytics文档中重新创建滚动效果
- 将javascript与PHP混合?(跟踪Google Analytics虚拟页面浏览量）
- 使用Google Analytics API的区域图-未采集类型错误无法读取'库'的未定义
- 如何将Google Analytics集成到GWT应用程序中
- 在javascript客户端和java服务器之间共享Google Analytics ClientID
- 2个Analytics帐户中的Google Analytics事件触发器跟踪
- 使用AddThis-config-data_ga_property向两个Google Analytics配置文件报告
- Google Analytics setup (advanced Javascript)
- Google Analytics(分析）多跟踪帐号维度数据部分未显示在报告中
- 检查Google Analytics是否已加载并调用ga('create',..）
- 如何在chrome扩展中加载Google Analytics和Facebook SDK
- 在 301 重定向期间，Google Analytics cookie _ga会发生什么情况
- 将JS变量作为文本返回以发送到Google Analytics
- 将Google Analytics添加到空网站
- 具有用户范围的Google Analytics自定义维度使用情况
- Google Analytics的多域跟踪
