Help with chart. filter based on date from dropdown

Hi, I am using highchart js to show active and no active users of the current year,2021. Now I want to show the active and no active user of the past years:2020,2019,2018....2015

I want to make a dropdown of year and onchanging the year i want to refresh the graph. My question is how to refresh the graph when choosing another date form dropdown without refreshing page

here $activeuser and $notactiveuser is for date 2021. I have query for that. Now I want to get active and nonactive users of the past date: 2020,2019. Is there any way to obtain it. I am using this chart https://www.highcharts.com/demo/line-labels/grid-light



<script>
    Highcharts.chart('container', {
    chart: {
        type: 'line'
    },

    title: {
        text: 'Monthly Active and non active users'
    },
    subtitle: {
        text: ''

    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
        title: {
            text: 'Users'
        }
    },
    plotOptions: {
        line: {
            dat
aLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    series: [{
        name: 'Active',
        data: <?php echo json_encode($activeuser) ?>
           
    }, {
        name: 'Trial',
        data: <?php echo json_encode($notactiveuser) ?>
    }]
});
              
</script>

Groovy-Guy

4 years ago

Level 1

create a method and call using Ajax which will fetch the required data use the same data and update the series of charts as needed.

Try the code below, maybe you can play around with the code and fix your issue.

Highcharts. series['Active'].setData(json_encode_activeuser); Highcharts. series['Trial'].setData(json_encode_notactiveuser); Highcharts. redraw();

david001

4 years ago

Level 5

@groovy-guy I got error Highchart not defined I made a dropdown year and on selecting the date form dropdown it should refresh the chart but it did not happened.


				<select name="select" id="select">
                        <option value="2020">2020</option>
                        <option value="2022">2022</option>
                      
                    </select>

<script>
    var select = document.getElementById('select');

        select.addEventListener('change', (e) => {
           // alert("ok");

   // Highcharts. series['Active'].setData(json_encode($activeUsersForChart));
   // Highcharts. series['Trial'].setData(json_encode($trialUserForChart));
Highcharts.redraw();
   console.log(Highcharts.redraw());
});
</script>

my full code is like below


<script>
    var select = document.getElementById('select');

        select.addEventListener('change', (e) => {
           // alert("ok");

   // Highcharts. series['Active'].setData(json_encode($activeUsersForChart));
   // Highcharts. series['Trial'].setData(json_encode($trialUserForChart));
   console.log(Highcharts.redraw());
});
</script>

  
    <script>
        Highcharts.chart('container1', {
            chart: {
                type: 'line'
            },
            title: {
                text: 'Monthly Active and Trial users'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Users'
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: true
                }
            },
            series: [{
                name: 'Active',
                data: <?php echo json_encode($activeUsersForChart); ?>

            }, {
                name: 'Trial',
                data: <?php echo json_encode($trialUserForChart); ?>
            }]
        });

    </script>

Please or to participate in this conversation.