Products

[ivanpeevski]

HI pkz,

 

Please see the example here – codepen

As I mentioned in the previous reply, for most chart types, it is as simple as setting:
smartChart.seriesGroups[0].type = ‘column’ or  = ‘line’…..

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi pkz,

The object “smartChart.seriesGroups[0]” controls the settings of the chart’s type.

In the example, the type is set ‘column’. You can change the type just by changing it to ‘line’ or ‘area’.

To create a bar chart – set the type to ‘column’ and set ‘orientation’ to ‘horizontal’

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hi pkz,

 

Thanks for the feedback!

Here is the updated version: codepen

The Chart can be refreshed by calling smartChart.refresh(), and the animation is controlled with the ‘animation’ property.

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

 

 

[ivanpeevski]

Hi pkz,

Thanks for reporting that! Here is the update example with the fix included – codepen

If the chart is empty, there is most likely some error when transforming the data from the pivot to the chart

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi pkz,

For the custom summary function:

Please see the example here: codepen – it implements a custom summary function which sums 2* value of the data
I have left some comments to make it easier to understand how it works and how to modify it.
Though since this is not an official feature and more of a workaround, there might be some edge cases I have missed where bugs happen.

 

And for the Charting:

Thanks for noting that! I updated the code with a fix here – codepen
Also added some comments to make some of the functions clearer.

For example, here is the result when you select Country + Income + Expenses

You can also visit the smart-chart demos page to see some of the possible chart types and customization for the chart.

 

Best regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hi pkz,

 

1.  At the moment, we support multiple different summaries only for the smart-grid component.
2.  To achieve this, you could use the onCellRender() callback function. The function is called before each cell render and you can use it to perform the custom calculations and set them as value. Here is a simple example, which changes the value of the ‘USA Income’ summary: codepen
3.  The button is inactive since the div.switchContainer is standing on top of it. If you change it’s position, the button will be active
4. At the moment, the pivot designer only supports the categorical filter, however this is a great suggestion, and we will consider adding such option in a future release!
5. Yes, it’s possible – the createChart() function simply passes the table data to the smart-chart component. You can create a custom function, which will pass only the selected data – please have a look at the example here codepen
   We also have a similar demo on our site here: https://www.htmlelements.com/demos/pivottable/integration-with-chart/

Best regards,

Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Andrea,

The structure of the Editing window can be fully customized, including with custom Angular Components.

Here is an example of creating a custom Editing Window with multiple different Smart Angular components: codesandbox

If you experience any difficulties, please do not hesitate to contact us again!

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hi Pavan,

 

You can achieve this by using the OnChange Event. The current value of query builder is an array of objects.

Here is a simple example, where the array value is transformed into string and shown in the page:

@page “/”
@using System.Text.Json
@using System.Text.Json.Serialization

value is: @currentValue
<QueryBuilder Fields=”fields” OnChange=”OnChange”></QueryBuilder>

@code {
string currentValue = “”;
QueryBuilder queryBuilder;
private List<QueryBuilderField> fields = new List<QueryBuilderField>() {
new QueryBuilderField()
{
Label = “Id”,
DataField = “id”,
DataType = “number”
},
new QueryBuilderField()
{
Label = “Product”,
DataField = “productName”,
DataType = “string”
},
new QueryBuilderField()
{
Label = “Unit Price”,
DataField = “price”,
DataType = “number”,
FilterOperations = new string[]{“=”, “<“, “>”}
},
new QueryBuilderField()
{
Label = “Purchased”,
DataField = “purchased”,
DataType = “date”
},
new QueryBuilderField()
{
Label = “Available”,
DataField = “available”,
DataType = “boolean”
}
};

private async void OnChange(Event ev)
{
var detail = JsonSerializer.Deserialize<Dictionary<string, dynamic>>(ev[“detail”]);
currentValue = string.Join(“,”, detail[“value”]);
}
}

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Patrick,

The Blazor CSS Isolation works by attaching a random attribute to the HTML element that works as a selector. However, our controls are generated dynamically and then selector key is lost. The trick is to wrap the blazor controls in a normal HTML element such as div, span or p. In this way, the selector key will be attached to the wrapper HTML and the inner controls will remain selectable. For example:

 

parent.razor:

<Child/>

 

child.razor:

<div><Button>Test</Button></div>

 

child.razor.css:

::deep smart-button {
  background: red;
}

OR(if you wish to be more specific):

div ::deep smart-button {
  background: red;
}

 

This creates a red button. I hope this was of help!

Please feel free to contact us again, if you need further support

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

 

• This reply was modified 1 year, 11 months ago by ivanpeevski.
• This reply was modified 1 year, 11 months ago by ivanpeevski.

[ivanpeevski]

<div class=”bbp-voting bbp-voting-post-103791 view-only bbp-voting-float”></div>
Hi salasidis,

 

The X axis in the demo looks crowded because xAxis -> unitInterval is set to 1. This forces the chart to show every single x Axis element. If you remove that, it will be automatic and will update the distance between the labels.

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi,

It is implemented in the same way.

See the code for the demo here: Area Range and Line Series

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

 

[ivanpeevski]

Hi Blago,

 

Thanks for the additional details!

I am seeing a 403 Forbidden message for the images. However the code was useful to reproduce your implementation.

This is indeed an issue with the Scheduler, I have opened a work item for it and we will work on fixing this for our next releases.

As a workaround, you can dispatch a ‘resize’ Event, which will force the Scheduler to re-render its cells and remove the grouping cell.

You can have a look at a demo here: codepen

 

I hope this will be of help! If you have any further questions, feel free to contact us again.

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi salasidis,

 

Yes, you can use displayText for that. For example:

{dataField: ‘A’, displayText: ‘Average’, ….}

You can also see an example in the demo here: Stacked Line Series

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi salasidis,

You can have a look at the code for the Live Update demo.

You can just push the next month data one by one in the dataSource, but the chart will draw them only if you call chart.update() after that

 

Best Regards,
Ivan Peevski

Smart UI Team
https://www.htmlelements.com/

[ivanpeevski]

Hi Gilles,

 

Unfortunately, this is not supported.

All row details must be the same height. You can only adjust the size of the elements inside the row detail

 

Best Regards,
Ivan Peevski
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts