No se pueden dar valores diferentes a diferentes elementos de la barra, haga clic en HighChart

$(function () {
    var data = {
        animal: [2, 3, 1, 6],
        vehicle: [03, 15, 14],
        fruits: [20, 50, 100]
    };
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'bar'
        },
        plotOptions: {
            bar: {
                point: {
                    events: {
                        click: secondChart
                    }
                }
            }
        },
        series: [{
            data: [{
                y: 100,
                name: 'animal'
            }, {
                y: 34,
                name: 'vehicle'
            }, {
                y: 67,
                name: 'fruits'
            }]
        }]
    });

    function secondChart(e) {
        var point = this;
        $("#detail").highcharts({
            chart: {
                type: 'column'
            },
            plotOptions: {
                series: {
                    point: {
                        events: {
                            click: thirdChart
                        }
                    }
                }
            },
            title: {
                text: point.name + ':' + point.y
            },
            series: [{
                name: 'Chart 2',
                data: data[point.name]
            }]
        });
    }

    function thirdChart(e) {
        var data = {
            animal: [1, 6, 3, 5],
            vehicle: [01, 19, 24],
            fruits: [30, 80, 100],
            birds: [20, 40, 80]
        };
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'sub_detail',
                type: 'column'
            },
            plotOptions: {
                bar: {
                    point: {
                        events: {
                            click: function () {
                                alert('Category: ');
                            }
                        }
                    }
                }
            },
            series: [{
                data: [{
                    y: 100,
                    name: 'animal'
                }, {
                    y: 50,
                    name: 'vehicle'
                }, {
                    y: 167,
                    name: 'fruits'
                }, {
                    y: 128,
                    name: 'birds'
                }]
            }]
        });
    }
});

When I click the second bar I want different graph values to populate the third graph. I can't get figure out the problem. On clicking the second graph I am getting the same values on third graph. I have three divs:

  • div id container
  • div id detail
  • div id sub_detail

preguntado el 28 de mayo de 14 a las 13:05

I click on the first chart any point, then new chart is created (secondchart function) then click on the column (second chart) and third chart is created. Values in each of them are different, so where the problem is? -

if i click on first chart (animal bar) I can see second chart(with 4 columns), wen i click on second element of first chart (Vehicle) I can see second chart(with 3 columns). In the same way I want for third chart varying values on diferent second chart column -

1 Respuestas

This is how you add data for a second chart:

        series: [{
            name: 'Chart 2',
            data: data[point.name]
        }]

And this is code for third chart:

        series: [{
            data: [{
                y: 100,
                name: 'animal'
            }, {
                y: 50,
                name: 'vehicle'
            }, {
                y: 167,
                name: 'fruits'
            }, {
                y: 128,
                name: 'birds'
            }]
        }]

I hope, that you can see the difference?

Debería ser:

        series: [{
            name: 'Chart 3',
            data: data[this.name]
        }]

contestado el 28 de mayo de 14 a las 14:05

Third Chart is showing Blank. data: data[this.name] I should provide name for the points in secondchart function that is refering chart 3? - jagannathbehera

Because on second chart you don't have names. See solution without names: jsfiddle.net/Yrygy/155 - Paweł Fus

we are providing static data for third chart. That will create a problem. I am selecting animal from chart1 and then 1st element from chart2 results in 3 columns on chart3, again if i select vehículo from chart1 and then 1st element from chart2 results in 3 columns on chart3. I want different values for my second scenario on Chart3 Hope I am clear with my question. - jagannathbehera

Let me then answer again the same: Because on second chart you don't have names. If you format second data to be the same format as for first one, then it will work. Don't get me wrong, I will not write full code for you. - Paweł Fus

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.