Creating hyperlink on the highcharts stacked bar chat

Question

var s1 = "{ name : \'Space1\', data :[5, 3, 4, 7] },";
var s2 = "{ name :\'Space2\', data:[5, 4, 7] },";
var s3 = "{ name : \'Space3\', data:[5, 3, 7] }";
var series = s1+s2+s3;

var chartdata = {
   chart: {
            type: 'column'
        },
        title: {
            text: 'Cost/Env'
        },
        xAxis: {
            categories: ['Prod', 'Test', 'Dev', 'Sandbox']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Cost of apps'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{}]
   
};

chartdata.series.data = series;
$('#stackedBar1').highcharts(chartdata);

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="stackedBar1" style="display: inline; float: left; height: 300px; margin: 0px;"></div>

I have created a dashboard using Ko, highcharts and the data using JSON. I have to create a stacked bar chat, in which the series data is changing dynamically for each category. Example cat1 may have 3 series objects, and cat2 may have 0, cat3 may have 10 etc....I have two questions, 1. how to include this dynamic JSON objects into the series object. (I referred links, i got the solution, i have to try them) 2. Once i click on a bar-chat at a specific position(color), i have to show detailed information, (i already designed and currently showing in my dashboard, i need to switch to that part). Is their any information available to handle such situation.

thanks in advance, shankar

score 1 · Answer 1 · answered Jul 13 '15 at 09:58

1

1) You can use a ajax to load json (for example $.getJSON) and load data. Please not that data needs to be in correct format.

Further information about working with data you can find here

2) You can use tooltip formatter to customise content and print that on hover.

Referring to click event, you can add this action by point.events.click and then show your custom popup / div etc.

answered Jul 13 '15 at 09:58

Sebastian Bochan

37,348
3
49
75

Thanks for the response.....I currently worked on point one....I have added my code, i have created Variable to represent my Sample JSON and tried to insert them into Series data. but it is not working. – Netaji Pulaparthi Jul 13 '15 at 18:09

Creating hyperlink on the highcharts stacked bar chat

1 Answers1