using drilldown.series push

[ridhoa]

can i ask question sir ? i want using drilldown series push for display drilldown with stacked bar. my code from json php parsing with ajax

Code: Select all

events: {
        drilldown: function(e) {
          var month = e.point.drilldown
          var drilldown = {
              series: []
          };
          $.ajax({
            method: "POST",
            url: "data",
            data: {"month":month}
          })
            .done(function(msg){
              var hasil = JSON.parse(msg)
              drilldown.series.push({
                name: 'Shift 1',
                id: month,
                data: hasil,
              });
            });
            console.log(drilldown)
        }

if i console i'll get data like this http://www.imagebam.com/image/0a4bbb983949744 and array of data like this http://www.imagebam.com/image/6d53c0983949734.

and part of drilldown: {},
but if i click bar nothing happened in the bar, what should i do ? what code like this is true ? or something eror with my code. thanks guys

for my full code

Code: Select all

$(function() {
var option = {
            chart: {
      renderTo: 'container',
      type: 'column',
      events: {
        drilldown: function(e) {
          var month = e.point.drilldown
          var drilldown = {
              series: []
          };
          $.ajax({
            method: "POST",
            url: "data",
            data: {"month":month}
          })
            .done(function(msg){
              var hasil = JSON.parse(msg)
              drilldown.series.push({
                name: 'Shift 1',
                id: month,
                data: hasil,
              });
            });
            console.log(drilldown)
        }
      }
    },
    title: {
      text: 'Data Molasses'
    },
    subtitle: {
      text: 'Klik Bar Untuk Mengetahui Lebih Lengkap</a>.'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: [{
      title: {
        text: 'Total Data Per Bulan'
      },
      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
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        borderWidth: 0,
        dataLabels: {
          enabled: true,
          format: '{point.y:1f}',
        },
      }
    },
    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f}</b> TON<br/>'
    },
            series: [{
              name: 'bulan',
              colorByPoint: true,
              data: hasil_data,
            }],

    drilldown: {}

        };
        // option.series[0].data = data;
        var chart = new Highcharts.Chart(option);
    }  

[rafalS]

Hi, ridhoa!

I am not sure, but I think that you have not updated your drilldown series: https://api.highcharts.com/class-refere ... art#update
Can you send me a simplified jsFiddle with your working code? Try to rigidly paste your data.
Without a working demo with your data, I am not able to test it and help you.

Kind regards,
Rafał

[ridhoa]

hello sir thanks for replying this post. i can create drilldown with series push.
but i have problem can u check this http://jsfiddle.net/ndf7tuq1/1/. example like that how add stacked bar chart on there in drilldown series push, and why double click in bar for display next bar ? cause that i'll got 2 parsing or more data if i click and get delayed

Code: Select all

drilldown.series.push({
                name: 'Shift 1',
                id: month,
                color: '#8FBC8F',
                data: [
          ['06-09-2018', 25],
          ['08-09-2018', 17],
          ['09-09-2018', 8],
          ['10-09-2018', 5],
          ['05-09-2018', 3],
        ],
              });

in this code. i'll add 3 stacked bar in drilldown. please help and thanks for ur sir if that url not work ? please check this http://jsfiddle.net/tjxwty3y/7/. thanks sir

[rafalS]

ridhoa,

Thanks for providing your code online! Now I have something to work on.
But would you be so kind, please, and explain more clearly what exactly do you want to achieve? It is really hard for me to understand you.

Have a good day!
Rafał

[ridhoa]

ohh sorry sir cause chased deadline sorry if you don't like it and don't know what i mean let me explain

1. why do i have double click to get the drilldown data ? cuase i using ajax and get month for that so i get 2 data. can you fix my code just only one click and get drilldown data.
2. can you create stacked bar chart when i clicked on the month cause i got stuck.

thanks for ur help sir

[rafalS]

Hello again and thank you for making your issue more clear!

I had to do few things with your code:
I changed your variable drilldown - it is an object now with objects inside. I named every series as follows January1, January2 etc.
Also, I commented out empty variable drilldown at the bottom so we have no conflicts.
Then, to add a few series (stacked), we need to use addSingleSeriesAsDrilldown method on every single series like this:

Code: Select all

  events: {
        drilldown: function(e) {
          var month = e.point.name;
          var chart = this;
          chart.addSingleSeriesAsDrilldown(e.point, drilldown[month + '1']);
          chart.addSingleSeriesAsDrilldown(e.point, drilldown[month + '2']);
          chart.addSingleSeriesAsDrilldown(e.point, drilldown[month + '3']);
          chart.applyDrilldown();
        }
      }

Here is your working drilldown: http://jsfiddle.net/BlackLabel/jpbkqme5/

Best regards!
Rafał

[ridhoa]

sorry can i ask more question sir can you check and debug if my data is like this. I want to display the stacked bar that I asked you yesterday. i'll explain my code. I can't display it like you did in the drilldown section, I can only display it with a push drilldown series like this

Code: Select all

 drilldown.series.push({
                name: 'Shift 1',
                id: month,
                data: [
          ['06-09-2018', 25],
          ['08-09-2018', 17],
          ['09-09-2018', 8],
          ['10-09-2018', 5],
          ['05-09-2018', 3],
        ]
              },{
                name: 'Shift 2',
                id: month,
                color: '#8FBC8F',
                data: [
          ['06-09-2018', 25],
          ['08-09-2018', 17],
          ['09-09-2018', 8],
          ['10-09-2018', 5],
          ['05-09-2018', 3],
        ]
              },{
                name: 'Shift 3',
                id: month,
                data: [
          ['05-09-2018', 50],
          ['11-09-2018', 40],
          ['12-09-2018', 60],
          ['06-09-2018', 65],
          ['04-09-2018', 73]
        ]
              });

I can only display in the data section sorry for that and when implementation with my code i got some eror cause var drilldown is not global var just only in event drilldown. can u check my code http://jsfiddle.net/jpbkqme5/1/. because in the part of the name of month I took to be implemented to ajax so when the user clicks on the first bar then he will get data shift 1, data shift 2, data shift 3 stacked bar.

if i implementation this code i got some eror i dont know why this my code

Code: Select all

var chart = this,
            drilldowns = chart.userOptions.drilldown.series,
            series = [];
          e.preventDefault();
          Highcharts.each(drilldowns, function(p, i) {
            if (p.id.includes(e.point.name)) {
              chart.addSingleSeriesAsDrilldown(e.point, p);
            }
          });
          chart.applyDrilldown();

got stacked bar but if i got click more he got stacked more

[rafalS]

ridhoa,

I have to apologize because, what you are asking me for, goes far beyond the scope of my duties on Highcharts Support Forum. I am here to solve short issues closely related to Highcharts, but you are asking me to code and debug half of your custom app. If you need help with JavaScript or PHP, you can try to look for it on StackOverflow forum or you can contact the Black Label company - they are experts with custom projects and they deal with things you are asking me for.

https://www.blacklabel.pl/

Once again, just to be clear - my scope of duties includes helping at Highcharts, but not writing and debugging your own custom JavaScript and PHP code.

Feel free to ask anything about Highcharts - I will be glad to help you.

Kind regards,
Rafał

[ridhoa]

sorry fot that i have found the code. im just confused on the implementation part, actually it's pure from highchart not from php because code from php is clear. im confused how to chart when i clicked he got eror. and click again generate same data haha but thanks for help me sir you're the best

[rafalS]

ridhoa,

I gave you a working implementation part. I just wonder, why you want to use drilldown.series.push so much when it will not work. Using drilldown.series.push, you just push your data to drilldown.series array, but Highcharts core will not do much with it. That is why it is better to use Highchart's addSingleSeriesAsDrilldown method and I gave you a working example of how to use it. Now you just need to parse your data and adapt your JavaScript code (not Highcharts) to that

Best regards!

[ridhoa]

oke thanks sir i got it. thank you for help me

Best Regards !