1. Home
  2. Forum
  3. Blazor
  4. Propotional Chart

Propotional Chart

Dear Sir,

We would like to design a SfChart (Blazor) with 2 axes having the same scale: 1 length unit in vertical axis equals 1 length unit in horizontal axis.

I tried to use different solutions but failed to get this requirement from Line Chart. Please advise us how to get this work.

Thanks a lot for your support.

Best regards,

Brian


24 Replies
DG Durga Gopalakrishnan Syncfusion Team June 28, 2021 12:05 PM UTC

Hi Vu, 

Greetings from Syncfusion. 

We have prepared sample based on your requirement. For horizontal axis, we have used units in kilograms with interval 1 and for vertical axis we have specified units in grams with interval 1000. Please check with the below sample. 

<SfChart> 
   <ChartPrimaryXAxis Title="In Kilograms" Minimum="0" Maximum="6" Interval="1"> 
   </ChartPrimaryXAxis> 
   <ChartPrimaryYAxis Title="In Grams" LabelFormat="{value}g" Minimum="0" Maximum="6000" Interval="1000"> 
   </ChartPrimaryYAxis> 
</SfChart> 


 

If the provided solution doesn’t meet your requirement, please revert us with more details. 

Regards,  
Durga G

VU Vu replied to Durga Gopalakrishnan June 28, 2021 04:53 PM UTC

Hi Durga,

Thanks a lot for quick reply. I attached here the zip file having some snapshots and more details about what issue we are facing when trying to use Syncfusion Blazor Chart for proportional view. I had some questions in comments in code. 

Briefly there are several questions:

  1. Can we get minimum and maximum values for ChartPrimaryXAxis and ChartPrimaryYAxis based on ChartSeries X and Y Values, if we don't set them explicitly when designing Chart?
  2. How can we get Chart Area's width and height based on px, for example: Left - Right and Bottom - Top of Chart Real Drawing Rectangle, so we can calculate the scale factor between the real values and drawing values for a specific axis?
  3. Does Blazor Syncfusion package has a compatible chart as Flutter Cartesian Charts?
We are looking forward to hearing from you soon. 

Best regards,
Vu 

Attachment: CurrentChartWeAreUsing_90668c82.zip

DG Durga Gopalakrishnan Syncfusion Team June 29, 2021 03:54 PM UTC

Hi Vu, 

1. Can we get minimum and maximum values for ChartPrimaryXAxis and ChartPrimaryYAxis based on ChartSeries X and Y Values, if we don't set them explicitly when designing Chart? 

Yes, by default axis range will be calculated automatically based on provided data points when minimum and maximum value is not specified for axis.  

2. How can we get Chart Area's width and height based on px, for example: Left - Right and Bottom - Top of Chart Real Drawing Rectangle, so we can calculate the scale factor between the real values and drawing values for a specific axis? 

As of now, we don’t have option to get the chart area bounds values since these properties are maintained internally. We can only able to access public properties in the chart.  

3. Does Blazor Syncfusion package has a compatible chart as Flutter Cartesian Charts? 

Yes, Syncfusion Blazor packages supports all cartesian charts. Please check with the below documentations links. 


We request you to use OnAxisActualRangeCalculated event to change the axis range after zooming. We have prepared sample based on your need and attached for your reference. 

Snippet : 

<SfChart> 
    <ChartEvents OnAxisActualRangeCalculated="RangeCalculated"></ChartEvents> 
</SfChart> 
@code{ 
public void RangeCalculated(AxisRangeCalculatedEventArgs Args) 
    { 
        if (Count == 0) 
        { 
            XMin = Args.Minimum; 
            XMax = Args.Maximum; 
        } 
        else if(Count == 1) 
        { 
            YMin = Args.Minimum; 
            YMax = Args.Maximum; 
            Args.Minimum = -100; // change minimum based on your requirement 
        } 
        Count = Count + 1; 
    } 
} 


Kindly revert us if you have any concerns. 

Regards, 
Durga G

VU Vu replied to Durga Gopalakrishnan June 29, 2021 05:03 PM UTC

Hi Durga,

Thanks a lot for answers. We have some further questions about this topic:

  1. In the  OnAxisActualRangeCalculated event, how can we detect Args.Minimum and Args.Maximum for horizontal axis or vertical axis because Args just has 4 public properties: Cancel, Interval, Minimum, Maximum and Name (OnAxisActualRangeCalculated)? I tried to use "Count" variable as snippet code but failed to detect an accurate axis I want to adjust minimum and maximum values for it.
     2. Based on your answer in previous question number 2: "chart area bounds values" are critical data for us to adjust min or max for a specific axis to get isometric view. Could you please give us any available variable or solution to get this data?

We are looking forward to hearing from you.

Best regards,
Vu
281-777-2384

DG Durga Gopalakrishnan Syncfusion Team June 30, 2021 02:46 PM UTC

Hi Vu, 

We are validating your reported scenario. We will check this and update details within two business days(2nd July 2021). We appreciate your patience until then. 

Regards, 
Durga G

VU Vu replied to Durga Gopalakrishnan June 30, 2021 05:39 PM UTC

Hi Durga,

Thanks a lot for the support. I think I am very close to what I need to set iso-view for the chart, the only thing we need is chart rectangle data (width and height) as attached snapshot.   Perhaps the nomenclature we are using to define the problems is confusing. A better description may be isoaxis, in that the divisions on both the y and x axes is the same; such that the actual distance as measured by a ruler is the same from 0 to 100, for example, on both axes.  The driving parameter is that distance, not really the range.  This type of grid is necessary when dealing with survey data or other areas of geometry and physics and design in which angles are important.  I hope this helps clarify the problem.

We are looking forward to hearing from you soon. 

Thanks,

Vu


Attachment: FurtherInformation_7c51c4ba.zip

BP Baby Palanidurai Syncfusion Team July 5, 2021 01:05 PM UTC

Hi Vu, 
  
Thanks for your update. 
  
As of now,  we dont have options to get the chart area bounds values since these properties are maintaines internally. We can only able to access public properties in the chart.  We have logged a improvement to provide axis name in the OnAxisActualRangeCalculated event. You can find which axis range is currenlty showing in the OnAxisActualRangeCalculated event. We will improve and include in the next weekly release which is expected to be rollout on 13th July 2021. Please find the below feedback link, 
  
Regards, 
Baby. 


VU Vu replied to Baby Palanidurai July 6, 2021 03:56 PM UTC

Hi Baby,

Thank you so much for the reply. We greatly appreciate about adding axis name to the event "OnAxisActualRangeCalculated" for better handling information about a chart. We deeply understand why your company locks some properties for public access because of security or any reason. But it is great if your company can enable a special chart (iso-view) as we described in previous discussions, because it is critical for some industries, such as survey, oil, education ...

We are looking forward to hearing from you soon.

Best regards,

Vu


DG Durga Gopalakrishnan Syncfusion Team July 7, 2021 03:11 PM UTC

Hi Vu, 

Most welcome. We have exposed all the required properties in each chart events to customize is values. Since chart area bounds cannot be modified we have considered it as private. Please revert us if you have any concerns. 

Regards, 
Durga G

VU Vu July 7, 2021 04:14 PM UTC

Hi Durga,

We DON'T have a plan to MODIFY chart area bounds, we just need that information to calculate the scale on axis X, from that we can apply the same scale to axis Y. That is our original request from the day 1. Without chart area bounds's data, how can we calculate the scale for a specific axis based on the minimum and maximum values from the event "OnAxisActualRangeCalculated"?

For example for axis X:

+ Minimum value: -500 ft.

+ Maximum value: 2000 ft.

+ Left boundary: 200 px.       (get from chart area bounds)

+ Right boundary: 1000 px.   (get from chart area bounds)

Delta value (ft) from measurements: (2000-(-500))=2500 ft.

Delta value (px) on the chart: 1000-200=800 px

So we can conclude that the SCALE on X axis is: 2500/800 = 3.125 ft/px

If we set axis X interval = 500 ft., so one interval on axis has 500/31.25= 160 px.

Then we just apply the same scale (3.125 ft/px) to the Y axis by adjusted the min or max value for the Y axis in the event "OnAxisActualRangeCalculated ", we will iso-view as discussed before. When dealing with that event, for instance we know about Y axis information as below:

+ Minimum value: -1000 ft

+ Maximum value: 3000 ft (We have to adjust THIS VALUE from this event to get iso-view)

+ Top boundary: 100 px         (get from chart area bounds)

+ Bottom boundary: 1300 px (get from chart area bounds)

We will form the formula to get iso-view: 3.125 = (args.Maximum - (-1000)) / (1300-100) 

So the adjusted MAXIMUM value for the Y axis is: args.Maximum = 2750 ft.


Let double check the scale on Y axis after set its Maximum value: (2750 - (-1000)) / (1300-100) = 3.125 , which is the same scale on X axis. So you see we DON'T have to change anything about chart area bounds, they are just  so we can get the adjusted value for MAXIMUM or MINIMUM value on one axis to get proper iso-view.


We are looking forward to hearing from you soon.

Best regards,
Vu



BP Baby Palanidurai Syncfusion Team July 8, 2021 12:09 PM UTC

Hi Vu,  
   
Thanks for your update.  
We have logged an improvement to provide chart area bounds in any axis related event. We will improve and include in the 20th  July, 2021 weekly release. 
Please find the below feedback link,  
 
   
Regards,  
Baby.  


VU Vu July 8, 2021 03:11 PM UTC

Hi Baby,

Thank you very much for your support on this request. It helps us to advance on current projects.

Best regards,
Vu Nguyen

281-777-2384


DG Durga Gopalakrishnan Syncfusion Team July 9, 2021 06:10 AM UTC

Hi Vu, 

Thanks for an update. We will include these improvements as per mentioned timeline and update you once it is rolled out. We appreciate your patience until then. 

Regards, 
Durga G 


DG Durga Gopalakrishnan Syncfusion Team July 13, 2021 05:28 PM UTC

Hi Vu, 

We are glad to announce that our v19.2.47 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor NuGet package version.  


public void RangeCalculated(AxisRangeCalculatedEventArgs Args) 
    { 
        Console.WriteLine(Args.AxisName);        
    } 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Durga G

DG Durga Gopalakrishnan Syncfusion Team July 20, 2021 03:30 PM UTC

Hi Vu, 

We have resolved the reported scenario and generated custom nugget. We request you to ensure your application by installing this custom nugget. We have attached the tested sample for your reference.  



We have attached the document on how to add custom nugget. 


Kindly revert us if you have any concerns. 

Regards, 
Durga G

VN Vu Nguyen July 20, 2021 09:29 PM UTC

Hi Durga,

Thank you so much for the email with detail instructions. We downloaded and ran the sample project with the custom Nuget Package. We have some feedback as below:

  1.  Every time chart was refreshed, the event "OnAxisActualRangeCalculated" was trigged 4 times as I mentioned before.
  2. We saw AxisName from argument of the event.
  3. The first 2 times, Chart.Bounds had "NaN" values.
  4. The last 2 times, Chart.Bounds hosted different set of values.
We attached here the zip file which has 4 snapshots when we looped through 4 times when the event fired.
Could you help me to review the snapshot and give us an advice?

Once again, thanks a lot for your support.

Best regards,
Vu Nguyen

Attachment: ChartBoundsValues_a45b4d5e.zip

DG Durga Gopalakrishnan Syncfusion Team July 21, 2021 08:28 AM UTC

Hi Vu, 

As of now we request you to skip the bounds if it has NaN values. We are checking on event triggered for 4 times. We have attached modified sample for your reference. 

public void RangeCalculated(AxisRangeCalculatedEventArgs Args) 
    { 
        if(!Double.IsNaN(Args.Bounds.X) && !Double.IsNaN(Args.Bounds.Y) && !Double.IsNaN(Args.Bounds.Height) && !Double.IsNaN(Args.Bounds.Width)) 
        { 
            if(Args.AxisName == "PrimaryYAxis" && Count < 1) 
            { 
                Count++; 
                var Y = Args.Bounds.Y; 
                var Height = Args.Bounds.Height; 
                Console.WriteLine(Y); 
                Console.WriteLine(Height); 
            } 
            else if(Args.AxisName == "PrimaryXAxis" && Count < 3) 
            { 
                Count++; 
                var X = Args.Bounds.X; 
                var Width = Args.Bounds.Width; 
                Console.WriteLine(X); 
                Console.WriteLine(Width); 
            } 
        } 
    } 


Kindly revert us if you have any concerns. 

Regards, 
Durga G 


VN Vu Nguyen July 30, 2021 08:39 PM UTC

Hi Durga,

Thanks a lot for the latest sample. When importing the custom package (19.2.0.56) to our real project, we are facing the multiple errors with other controls from Syncfusion.Blazor. Please review the attached snapshots and give us your feedback.


We are looking forward to hearing from you soon.


Best regards,
Vu Nguyen

281-777-2384


Attachment: IssueWithCustomPackage_80da54f4.zip

DG Durga Gopalakrishnan Syncfusion Team August 2, 2021 12:32 PM UTC

Hi Vu, 

We have included the chart area bounds related changes in source level and the changes will be available in our tomorrow’s patch release. We appreciate your patience until then. 

Regards, 
Durga G 


VN Vu Nguyen August 2, 2021 04:30 PM UTC

Hi Durga,

Thanks a lot for your feedback. We are looking forward to downloading the latest release tomorrow.

Best regards,

Vu Nguyen

281-777-2384


DG Durga Gopalakrishnan Syncfusion Team August 3, 2021 12:37 PM UTC

Hi Vu, 

We are glad to announce that our v19.2.51 patch release is rolled out; we have added the fix for reported issue. You can use the latest Syncfusion.Blazor NuGet package version.  


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Durga G

VN Vu Nguyen replied to Durga Gopalakrishnan August 5, 2021 10:27 PM UTC

Hi Durga,

Thanks a lot for the email. We downloaded, installed and deployed the latest release v19.2.51 to our project and it runs OK.

We have some questions about components libraries which your company offer for customers:

  1. Our company has 2 teams and develop 2 websites, and each team uses different Syncfusion components library: one uses Blazor library and the other uses React library. Is there anyway 2 websites can transfer data to each other without using an intermediate database? 

      2. Can we use 2 libraries in the same website?

We are looking forward to hearing from you soon.

Best regards,

Vu Nguyen

281-777-2384




DG Durga Gopalakrishnan Syncfusion Team August 6, 2021 03:08 PM UTC

Hi Vu, 

We are analyzing your reported queries. We will update the further details within two business days(10th August 2021). We appreciate your patience until then. 

Regards, 
Durga G

JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team August 11, 2021 05:25 PM UTC

Hi Vu, 

Sorry for the delay. 
 
Currently we are validating your reported query for “ Usage of react and Blazor in same website” at our end. Meanwhile could you please confirm whether you want to use react and Blazor in same application or you need to host them in a same website? Also please share what kind of data collections you need to interact between this two library which will be helpful to provide you the prompt solution at earliest. 

Regards, 
Joshna L 


Loader.
Up arrow icon