CODEWITHSUNDEEP
javascriptangularjsgraph
user3248167
user3248167

Reputation: 21

how to zoom in on click on tc-angular-chartjs

I'd like to know if there is a way to zoom after i click on a part of the chart. I mean... i have a graph with all the days of a month. I want to click on day n°4 and it has to zoom in and show me 3 days before day n°4 and 3 days after on the same graph. It has to zoom on click. The same thing must work on the other days. Is there a way to do that? thanks!

The other thing i've noticed is that if you reload the page with the canvas display none, the graph won't show up even if you toggle dislplay none from the style. It shows only the legend. So i must reload the page to see the graph and there's no way to hide it on reload page. I must show it only when i click on a certain button.

Can you please give me some information about these things? Thanks again.

Upvotes: 1

Views: 1050

Answers (1)

maztch
maztch

Reputation: 1697

Add chart="chart" to the canvas.

Then you can assign the Chart.js object to a variable and use getSegmentsAtEvent(event) and/or getPointsAtEvent(event) functions.

In your controller you can get the point event

angular.module( 'app', ['tc.chartjs']);

angular.module( 'app' )
.controller( 'AppController', function( $scope ) {

    $scope.chart;

    $scope.chartClick = function( event ) {
        if ( $scope.chart ) {
            // Different methods depending on chart type
            console.log( $scope.chart.getPointsAtEvent( event ) ); // for Points
            console.log( $scope.chart.getSegmentsAtEvent( event ) ); // for Segments
        }
    };

    ...

You can load the new chart data referenced by the event.

Upvotes: 1

Related Questions