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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Smith Chart does not update on again data binding to react component

Thread ID:

Created:

Updated:

Platform:

Replies:

151111 Jan 31,2020 07:32 AM UTC Apr 14,2020 02:39 PM UTC React - EJ 2 21
loading
Tags: Smith Chart
ali aslam
Asked On January 31, 2020 07:32 AM UTC

Hi, I am using the Smith Chart in one of my projects. I fetch data from database and bind it to the react component named "SmithchartSeriesDirective" to its attribute named "points". It successfully binds the data on the smith chart, but on successive calls the data set changes due to any filter I apply, so this data is successfully fetched from database and as I bind it to the Smith Chart, the change does not reflects. Is there any refresh event I need to trigger?

Thanks

Baby Palanidurai [Syncfusion]
Replied On February 3, 2020 08:38 AM UTC

Hi Ali, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. You can refresh the smith charts by calling the refresh() method. We have prepared a simple sample with button click. In that button click, we have refreshed smith chart with new data.  
 
Code snippet: 
Change() { 
    let data = [ 
      { resistance: 20, reactance: -50 }, 
     // Add more data 
    ]; 
    this.smithchartInstance.series[0].points = data; 
    this.smithchartInstance.refresh(); 

Sample link, 

Kindly revert us, if you still facing issues. We are always happy to assist you. 

Regards, 
Baby. 



ali aslam
Replied On February 3, 2020 12:41 PM UTC

Hi Palanidurai,
I really appreciate you effort in helping me to resolve the issue. But issue still persist. I have integrated this smith chart in Grafana. Please view the attachments, it contains error plus my code.

Thanks & I hope you can help further.



Attachment: grafana_7b96d616.rar

ali aslam
Replied On February 4, 2020 08:16 AM UTC

Hi, Can you please update on it ? I am stuck.

Regards

Baby Palanidurai [Syncfusion]
Replied On February 4, 2020 09:44 AM UTC

Hi Ali, 

Thanks for your update. 

We have checked your code snippet files and images. In that, we have noticed, there is a problem in chart instance getting. Kindly get the chart instance by using ref attribute as like the below code snippet. 

class App extends Component<AppProps, AppState> { 
  private smithchartInstance: SmithchartComponent; 
  constructor(props) { 
    super(props); 
    this.state = { 
      name: "React" 
    }; 
  } 
Change() { 
    let data = [ 
      { resistance: 20, reactance: -50 }, 
      // More data 
    ]; 
    this.smithchartInstance.series[0].points = data; 
    this.smithchartInstance.refresh(); 
  } 
  render() { 
    return ( 
      <div> 
      <button id="click" onClick={this.Change.bind(this)}> 
          Click to Change data 
        </button> 
        <SmithchartComponent 
          id="smith-chart" 
          ref={gauge => (this.smithchartInstance = gauge)} 
        > 
          // Add more codes 
        </SmithchartComponent> 
      </div> 
    ); 
  } 


Kindly revert us, if you have any other concerns. 

Regards, 
Baby. 



ali aslam
Replied On February 4, 2020 10:26 AM UTC

Hi, Thanks for getting back. I am unable to add this line. I get compile time error, when ever I add this line. Kindly view the attachments.
ERROR :
Type 'SmithchartComponent | null' is not assignable to type 'SmithchartComponent'.
Type 'null' is not assignable to type 'SmithchartComponent'.
ts(2322)

Regards

Baby Palanidurai [Syncfusion]
Replied On February 5, 2020 08:55 AM UTC

Hi Ali, 

Thanks for your update. 

We have analyzed your query. Kindly use the below code snippet to resolve the reported issue. 

Code snippet: 

ref={gauge => (this.smithchartInstance = gauge as SmithchartComponent)} 




Kindly revert us, if you have any concerns. 

Regards, 
Baby. 



ali aslam
Replied On February 6, 2020 09:47 AM UTC

Hi Palandurai,
Thanks for the help. It worked :)

Regards


Baby Palanidurai [Syncfusion]
Replied On February 7, 2020 03:12 AM UTC

Hi Ali, 

Most welcome. 

Please let us know, if you have any other concerns. We are always happy to assist you. 

Regards, 
Baby. 


ali aslam
Replied On February 12, 2020 07:32 AM UTC

Hi,
I need to remove the lines connecting the dots. Only need to show the dots. I have find the class named SeriesMarkerDataLabelConnectorLineModel .
 Will this help me in achieving my task ? Can you please share any example that implements this feature in smith chart.

Regards

Baby Palanidurai [Syncfusion]
Replied On February 13, 2020 05:36 AM UTC

Hi Ali, 

Thanks for your update. 

We have analyzed your query. We can achieve your requirement by setting fill property for series and marker options. To remove or hide the connecting the dots, you can set transparent for series fill property and set any color for marker fill property. 

Code snippet: 

<SmithchartSeriesCollectionDirective> 
            <SmithchartSeriesDirective 
              fill= 'transparent' 
              name="Transmission1" 
              marker={{ 
                shape: "Circle", 
                visible: true, 
                fill: 'red', 
                border: { width: 2 } 
              }} 
            /> 
          </SmithchartSeriesCollectionDirective> 
        </SmithchartComponent> 

Screenshot: 
 

Kindly revert us, if you have any concerns. 

Regards, 
Baby. 


ali aslam
Replied On February 13, 2020 06:46 AM UTC

Hi,
Thanks for the help, it works fine but this property fill= 'transparent'  hides the circle beside legend text. Any other property that we can set ? Secondly, can we set different colors of the circles of the points, I need to set different colors for first and last circle point plotted on the chart.

Thanks.

Baby Palanidurai [Syncfusion]
Replied On February 14, 2020 03:03 PM UTC

Hi Ali, 

Thanks for your update. 

We have analyzed your query. In your scenario, you can set the transparent to series element in the loaded event instead of setting fill to transparent. Please find the below code snippet, 
loaded(args) { 
    let element = document.getElementById('smith-chart_series0_points'); 
    element.setAttribute('stroke', 'transparent'); 
  } 
 


Kindly revert us, if you have any concerns. 

Regards, 
Baby. 


ali aslam
Replied On February 18, 2020 09:48 AM UTC

Hi Palandurai,
Thanks for the help. It worked :).
Secondly, is there any way we can change the default theme value from 'Material' to any null or transparent value. The problem is I want the smith chart to take the background of my page, not to some restricted value, other wise I need to write some logic to get the color of my page and depending upon the page color I need to render the appropriate theme. Hope this is clear !

Regards

Baby Palanidurai [Syncfusion]
Replied On February 19, 2020 08:46 AM UTC

Hi Ali, 
 
Thanks for your update. 
 
We have analyzed your query. We are having background property for smith charts. If you want as transparent, you set background as transparent. Please find the blow code snippet to achieve this requirement, 
<SmithchartComponent background="transparent"/> 
</SmithchartComponent> 
Kindly revert us, if this is doesn’t meet your requirement. 
 
Regards, 
Baby. 


ali aslam
Replied On February 20, 2020 07:26 AM UTC

Hi Palindurai,
Thanks for the help, but the issue is partially fixed. Background color is perfect, its adjust on to my color page but the axis remains white in any case. I want to adjust the axis on to my color page as well. Is there any possibility?
PLease view the attached file as well.

Regards 

Attachment: axisIssue_323d5df7.rar

ali aslam
Replied On February 20, 2020 08:22 AM UTC

Hi,
Another thing, I am using render type as impedance. According to my understanding, smith chart plots data from left to right irrespective of the points location. I mean if I am passing random point in simple one point at right side then one point at left side then one at right side and so on, why chart still renders from left to right.

Regards

Durga Gopalakrishnan [Syncfusion]
Replied On February 21, 2020 12:18 PM UTC

Hi Ali, 
 
We have analyzed your queries. Please check with the below options. 
 
Query 1 : to adjust the axis on to my color page as well 
 
We suggest you to use horizontal axis and radial axis properties to customize axis line, gridlines and labels color. We have prepared sample for your reference. Please check with the below code snippet and sample. 
 
Code Snippet 
 
<SmithchartComponent 
        horizontalAxis={{ 
            majorGridLines:{color: ‘white’}, 
            axisLine:{color: ‘white’}, 
            labelStyle:{ color: ‘white’ } 
        }} 
        radialAxis={{ 
             majorGridLines:{color: ‘white’}, 
             axisLine:{color: ‘white’}, 
             labelStyle:{ color: ‘white’ } 
        }} /> 
</SmithchartComponent> 
 
Screenshot 
 
 
Sample 

Query 2 : passing random point in simple one point at right side then one point at left side then one, why chart still renders from left to right 

When the provided series points values are either higher or lower and when its value is in different order, points will get sorted and rendered based on calculated ranges. This is default behaviour.  

Kindly revert us, if you have any concerns. 

Regards, 
Durga G

ali aslam
Replied On March 11, 2020 08:13 AM UTC

Hi,
Thanks for the help. Can you please help me in customizing the smith chart tool tip? I need to add time as well with the plotted points in the tool tip. Hope my question is clear.
Your help is highly appreciated as always.

Thanks & Best Regards

Srihari Muthukaruppan [Syncfusion]
Replied On March 12, 2020 04:06 PM UTC

Hi Ali, 
  
We have analyzed your query. From that we would like to let you know that we were facing an issue in tooltip customization in SmithChart and we confirm this as a bug and have already logged a defect report. You can keep track of the bug from the feedback portal below.  
  
  
The fix will be available in our upcoming volume 1 main release which expected to be rolled out end of March 2020. We appreciate your patience until then. 
  
If you have any more specification/precise replication procedure or a scenario to be tested, you can add it as a comment in the portal. 
  
Regards,  
 Srihari M

Baby Palanidurai [Syncfusion]
Replied On April 2, 2020 12:47 PM UTC

Hi Ali, 
 
Thanks for your patience. 
 
Due to some technical difficulties, we couldn’t include the this in our main release. We will resolve and include in our next weekly patch release which is expected to rolled out at 14th April 2020. We appreciate your patience until then. 
 
Regards, 
Baby. 


Srihari Muthukaruppan [Syncfusion]
Replied On April 14, 2020 02:39 PM UTC

Hi Ali
  
Thanks for being patience. 
  
We are glad to announce that our v18.1.44  patch release is rolled out, we have added the fix for the reported issue and is available for download under the following link.  

 
 
 
We appreciate your patience in waiting for this release. Let me know, if you need further assistance.  
  
Regards,  
Srihari M 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon