FieldArray on GridColumn Width and BarGraph

0 Answers 53 Views
Charts Form Validation
Umi Amira
Top achievements
Rank 1
Iron
Umi Amira asked on 03 May 2023, 12:43 AM

Hai,

I have two questions : 

1) How can I change the width of a GridColumn, as show below? I am currently using GridColumn. Please find attached as reference.

2) How can I use Kendo UI to create a bar graph like the one shown below? The graph should update based on the user-entered values for total occurrence and time period (week/month). Does Kendo UI support this functionality?


 

Petar
Telerik team
commented on 05 May 2023, 10:22 AM

Hello, Umi Amira.

The current ticket has been submitted for Kendo UI for jQuery but is related to KednoReact. This is why we changed its product.

I can see that you don't have an active license associated with your account. To be able to help you, you need to have an active commercial or trial license. May I ask you to activate your trial or commercial license and then write us back? 

Thank you for your understanding and cooperation.

Umi Amira
Top achievements
Rank 1
Iron
commented on 08 May 2023, 06:55 AM

I already active commercial license.  For now my issue not solve for question 2. 
Petar
Telerik team
commented on 10 May 2023, 11:20 AM

Hello, Umi Amira.

I am happy to hear that you managed to implement point one of your questions. 

Talking about your second question, the Chart component will be automatically updated once there is a change in the data array passed to the component. Here is a StackBlitz example in which we have three different inputs that control the values of each of the three Chart columns displayed. 

If you edit the values in the inputs, you will see that the Chart will be updated. Using the demonstrated approach, based on the logic in your application you can dynamically update the values that are inside the array passed to the data property of the Chart. 

To be more specific about the above, in the shared StackBlitz we have this Chart definition:

<Chart>
  <ChartSeries>
    <ChartSeriesItem type="column" data={firstSeries} />
  </ChartSeries>
</Chart>

And this firstSeries array:

const firstSeries = [firstColumn, secondColumn, thirdColumn];

Every time we update one of the firstColumn, secondColumn or thirdColumn variables the Chart will be updated. 

I hope the above gives you a better perspective of how the Chart component works and how you can achieve the solution needed in your application. If you need additional assistance with the discussed scenario, I would suggest you submit a support ticket as advised in your other currently active forum post. Thus you will receive faster replies to your additional questions. 

No answers yet. Maybe you can help?

Tags
Charts Form Validation
Asked by
Umi Amira
Top achievements
Rank 1
Iron
Share this question
or