图表未显示使用HighCharts和Google Analytics创建

时间：2014-12-24 09:10:59

标签： javascript charts highcharts 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功能中，我设法从Google Analytics获取数据并传递到我使用HighCharts创建的图表。图表没有显示但是当我把鼠标指针放在它上面时会显示值。所以我试图在 01 中为系列添加一些颜色。但它没有改变外观。仅显示2轴和图例，但颜色仅显示在图例中。我无法弄清楚我做错了什么。

请问有人可以帮我解决这个问题吗？

谢谢和问候， Chiranthaka

已清理的源代码 

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

1 个答案:

答案 0 :(得分：0)

我找到了答案。我使用的图表是使用2个数据系列，但我用于绘制图表的查询字符串只包含一个数据系列，因此图表不会绘制，只有图例和2轴正在绘制。

但感谢所有人！

谢谢和问候， Chiranthaka

相关问题
最新问题