We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Redraw not working

Thread ID:

Created:

Updated:

Platform:

Replies:

128463 Jan 24,2017 09:38 AM Mar 6,2017 07:52 AM Angular 9
loading
Tags: ejChart
Zack
Asked On January 24, 2017 09:38 AM

I was trying to use the redraw method on a chart using the api with jquery

    $("#DataBindingChart").ejChart("redraw");

It wasn't working, but I was wondering what the way to do it in Angular 2 is?

Zack
Replied On January 24, 2017 10:43 AM

I've used ViewChild to get the chart and then I have looked for a redraw method but have been unable to find it. If this is the correct way to do it I just need to know where the redraw method is.

Zack
Replied On January 24, 2017 10:47 AM

Like this 

@ViewChild('grid') chart: any;

<ej-chart #grid>

Use this.grid to access it.

Zack
Replied On January 24, 2017 05:39 PM

changed #grid to #chart for a better name

attempted to use 

@ViewChild('chart') chart: any;
this.chart.widget.redraw();

was unable to get any results, I made sure to call it after view init, and I know I have the item because I can log it.

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 25, 2017 08:32 AM

Hi Zack, 

Thanks for using Syncfusion product. 

We have analyzed your query and prepared a sample with respect to your requirement. In this we have two data sets and in a button click we have changed the datasource and redrawn the chart. Kindly find the code snippet below to achieve this. 

Angular 2:  

<input type="button" onclick="UpdateChart()" value="Update using Redraw method" /> 
 
var data5 = [ 
              { x: 0, y: 5 }, { x: 1, y: 12 }, { x: 2, y: 8 }, { x: 3, y: 10 }, { x: 4, y: 15 } 
            ]; 
 
            var data10 = [ 
              { x: 0, y: 5 }, { x: 1, y: 12 }, { x: 2, y: 8 }, { x: 3, y: 10 }, { x: 4, y: 15 }, 
              { x: 5, y: 5 }, { x: 6, y: 12 }, { x: 7, y: 8 }, { x: 8, y: 10 }, { x: 9, y: 15 }, 
            ]; 
 
            function UpdateChart() { 
                //Get Chart instance 
                var chart = $('#container').ejChart('instance'); 
 
                //Change the data source 
                chart.model.series[0].dataSource = chart.model.series[0].dataSource.length == 5 ? data10 : data5; 
 
                //Redraw the chart 
                $('#container').ejChart('redraw'); 
            } 
  
Screenshot 

 

For your reference we have attached the sample. Kindly find the sample from below location. 

Since the issue is not reproduced at our end, kindly revert us with your sample, so that we can analyze further and provide you the solution sooner. 

Dharani. 


Zack
Replied On January 25, 2017 09:37 AM

I'm running into some errors and have some clarification 

    <ej-chart #chart>
      <e-seriescollection>
        <e-series type="polar" drawType="column" enableAnimation="true" [points]="data">
        </e-series>
      </e-seriescollection>
    </ej-chart>

Chart is simple like this. Want to do something the Angular 2 way like this:

@ViewChild('chart') chart: any;

function(){
this.chart.widget.redraw();
}

When I tried to use the attached code I got some errors, when I logged the console.log($('#chart').ejChart('instance')); I got an empty array. I'm assuming this has something to do with the difference between div as a chart and actually using ej-chart. If there isn't a way to do this using Angular 2 ViewChild please advise and I'll switch to the div method with jQuery.

Zack
Replied On January 25, 2017 10:41 AM

Also the sample was in Angular 1

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 27, 2017 08:31 AM

Hi Zack, 

Thanks for you update.  

We have analyzed your query. By using the below code snippet, you can able to redraw the chart. Need to specify as highlighted in code snippet. 

Angular 2: 

<ej-chart #contain id="container"></ej-chart> 

@ViewChild('contain') chart: any;  

  ngAfterViewInit() { 
 
        // After the view is initialized, chart will be available 
        this.update(); 
    } 
 
    update() { 
        this.chart.widget.redraw(); 
    } 

For your reference we have attached the sample, kindly find the sample from below link. 

Dharani. 


Bernd Schuhmacher
Replied On March 4, 2017 12:59 PM

Hi

I am trying to change a chart too. But with no luck so far.

With you demo given ( in which I could not see a change in the chart) I set up the following demo:

app.component.ts:
import { ComponentViewEncapsulationViewChildInjectable } from '@angular/core';
import { CommonModule } from "@angular/common";
import { EJComponents } from './ej/core';
import { EJ_CHART_COMPONENTS } from './ej/chart.component';

declare let ejany;

@Component({
    selector: 'ej-app',
    templateUrl: 'app/app.component.html'
})

export class AppComponent {
    data1 = [
        { x: 0y: 5 }, { x: 1y: 12 }, { x: 2y: 8 }, { x: 3y: 10 }, { x: 4y: 15 }
    ];

    data2 = [
        { x: 0y: 7 }, { x: 1y: 2 }, { x: 2y: 5 }, { x: 3y: 14 }, { x: 4y: 10 }
    ];
    @ViewChild('Chart'Chartany;
    private Tabelle1;

    constructor() {
        this.Tabelle1 = this.data1;
    }
    update() {
        this.Chart.widget.redraw();
    }
    changeChart() {
        if (this.Tabelle1 == this.data1this.Tabelle1 = this.data2;
        else this.Tabelle1 = this.data1;
        console.log(this.Tabelle1);
        this.Chart.widget.redraw();
    }

}

app.component.html:

<h2>
    Syncfusion Javascript Angular 2 Component</h2>
<ej-chart #Chart id="line" style="height: 320px; width: 420px; display:block;" [isResponsive]="true" [legend.visible]="true"
    primaryYAxis.title.text="y" primaryXAxis.title.text="x" >
    <e-seriescollection>
        <e-series name="Front" fill=#1B93D0 [dataSource]="Tabelle1" xName="x" yName="y"></e-series>
    </e-seriescollection>
</ej-chart>
<button (click)="changeChart()">changeData</button>

When the page loads I can see the data of the array data1.

I hoped to see data2 in the chart after clicking the Button.

The console Log shows the data i hoped to see in the chart.

Do you have any hints?


Regards

Bernd


Dharanidharan Dharmasivam [Syncfusion]
Replied On March 6, 2017 07:52 AM

Hi Zack, 

We have analyzed your query. Since the series property in chart is of type, array of objects and the dataSource property is also of type array of object, the one way binding can’t be implemented for this scenario. And this is a limitation. So, you need to assign the data source again to the chart series and then need to redraw the chart. Find the code snippet below. 
 
Angular 2: 

<button (click)="changeChart()">changeData</button> 
 
changeChart() { 
        this.Chart.widget.model.series[0].dataSource = this.data2; 
        this.Chart.widget.redraw(); 
    } 


Chart before updating the data: 
 
After updating the data: 
 














Sample for reference can be find from below link. 
 
The properties which support data binding are documented in the below link 

Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;