CODEWITHSUNDEEP
javascriptsharepointhighcharts
skifreak
skifreak

Reputation: 43

Highcharts adding url to column chart

I am new to Highcharts, Sharepoint and JS. What I need to do is make each bar link to a SharePoint view This code gets the data

IWSChartBuilder.EngagementsSegmentChart = function () {

var load = function () {
    var year = new Date().getFullYear();
    //Variable to hold counts
    var countArray = [];

    $.when(
        //Consulting Engagements List
        IWSChartBuilder.RESTQuery.execute("valid REST query")
    ).done(
        function (engagements1) {
            var dataArray = [];
            var countArray = [];
            //Get data from Consulting Engagements list
            var results = engagements1.d.results;
            for (var i = 0; i < results.length; i++) {
                for (var i = 0; i < results.length; i++) {
                    dataArray.push(results[i].Segment);
                }
            }

    var baseUrl = "valid url";
            countArray = IWSChartBuilder.Utilities.buildCategoryCountsWithLink(countArray, dataArray, baseUrl);

            //Put data into format for stacked bar chart
            var seriesData = [];
            var xCategories = [];
            var links = [];
            for (var i = 0; i < countArray.length; i++) {
                xCategories.push(countArray[i].name);
                seriesData.push(countArray[i].y);
                links.push(countArray[i].url);
            }
            //Build Chart
            IWSChartBuilder.Utilities.loadColumnChartWithLink(links, xCategories, seriesData, "#engagementSegmentChart", "Engagements by Segment", "Total Projects");
        }
    ).fail(
        function (engagements1) {
            $("#engagementSegmentChart").html("<strong>An error has occurred.</strong>");
        }
    );
};

return {
    load: load
}
}();

//code to display chart

loadColumnChartWithLink = function (xCategories, seriesData, divId, chartTitle, yAxisTitle) {
    //Build Column Chart
    $(divId).highcharts({
        chart: {
            type: 'column'
        },
        credits: {
            enabled: false
        },
        title: {
            text: chartTitle
        },
        xAxis: {
            categories: xCategories,
            allowDecimals: false,
            labels: {
                rotation: -45,
                align: 'right'
            }
        },
        yAxis: {
            min: 0,
            allowDecimals: false,
            title: {
                text: yAxisTitle
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: false
                }
            },
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function() {
                            location.href = this.options.url;
                        }
                    }
                }
            }
        },
        series: [{
            name: yAxisTitle,
            data: seriesData
        }]
    });
},

Any help is greatly appreciated Mark

Upvotes: 1

Views: 1990

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You need to adapt your data to create objects as points, like in the example:

{y:10,url:'http://google.com'}

and then catch click event on serie's point.

http://jsfiddle.net/2tL5T/

Upvotes: 1

Related Questions