Demos

[Markov]

Hi,

There is a different component for a 3d chart. Here is how to initialize it:

<script>
    const data = [
        { Month: 'January', Sales: 30, Revenue: 200 },
        { Month: 'February', Sales: 40, Revenue: 220 },
        { Month: 'March', Sales: 50, Revenue: 250 },
        { Month: 'April', Sales: 70, Revenue: 300 },
        { Month: 'May', Sales: 60, Revenue: 280 }
    ];

    Smart('#chart', class {
        get properties() {
            return {
                caption: "3D Sales Chart",
                description: "Monthly Sales Data in 3D",
                showLegend: true,
                dataSource: data,
                xAxis: {
                    dataField: 'Month'
                },
                valueAxis: {
                    unitInterval: 20,
                    title: { text: 'Values' }
                },
                seriesGroups: [
                    {
                        type: 'column',   // 3D column
                        series: [
                            { dataField: 'Sales', displayText: 'Sales' },
                            { dataField: 'Revenue', displayText: 'Revenue' }
                        ]
                    }
                ]
            }
        }
    });
</script>

Best regards,
Peter Stoev

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

[Markov]

Hi,

Smart.Chart fully supports displaying multiple series types together in the same chart, including line + bar combinations.

You just need to define multiple series in the seriesGroups array, each with its own type.

Example: Line + Bar Chart in Smart.Chart
<div id=”chart” style=”width: 800px; height: 500px;”></div>

<script>
    const sampleData = [
        { Month: 'January', Sales: 30, Revenue: 200 },
        { Month: 'February', Sales: 40, Revenue: 220 },
        { Month: 'March', Sales: 50, Revenue: 250 },
        { Month: 'April', Sales: 70, Revenue: 300 },
        { Month: 'May', Sales: 60, Revenue: 280 }
    ];

    Smart('#chart', class {
        get properties() {
            return {
                caption: "Sales and Revenue",
                description: "Combined Line and Bar Series",
                showLegend: true,
                dataSource: sampleData,
                xAxis: {
                    dataField: 'Month'
                },
                valueAxis: {
                    title: { text: 'Values' }
                },
                seriesGroups: [
                    {
                        type: 'column',  // Bar/Column series
                        series: [
                            { dataField: 'Sales', displayText: 'Sales' }
                        ]
                    },
                    {
                        type: 'line',   // Line series
                        series: [
                            { dataField: 'Revenue', displayText: 'Revenue' }
                        ]
                    }
                ]
            }
        }
    });
</script>

Best regards,
Peter Stoev

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

[Markov]

Hi,

Please, refer to https://www.htmlelements.com/docs/blazor-editor-toolbar-items/. You can determine which tools are displayed and which are not.

Best regards,
Markov

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

[Markov]

Hi,

No, the component is client-side built with JavaScript, CSS and HTML.

Best regards,
Markov

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

[Markov]

Hi,

CSS Customization

Since Smart Editor is a Component, you can style it using CSS custom properties (CSS variables) and normal CSS selectors.

Common CSS variables:

--smart-editor-background → editor background
--smart-editor-color → text color
--smart-editor-border-color
--smart-editor-toolbar-background
--smart-editor-toolbar-color

Best regards,
Markov

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

[Markov]

Hi,

Yes, you can use it. For example:

<smart-multi-combo-input id="employees"></smart-multi-combo-input>

<script>
    const multiCombo = document.getElementById('employees');

    // Fetch data from REST API
    fetch('https://api.example.com/employees')
        .then(response => response.json())
        .then(data => {
            // Assuming API returns: [{id:1, name:"Alice"}, {id:2, name:"Bob"}]
            multiCombo.dataSource = data.map(emp => emp.name);
        })
        .catch(error => console.error('Error fetching employees:', error));
</script>

Best regards,
Markov

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

[Markov]

Hi,

It is possible to combine multiple series in the Chart. Look at https://www.htmlelements.com/demos/chart/area-range-line/index.htm.
As for Angular Material, you can use the chart with any library.

Best regards,
Markov

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

[Markov]

Sure, just updated there.

Best regards,
Markov

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

[Markov]

Hi,

Please, find below a demo which shows how to update a Task in the Blazor Kanban.

@page "/kanban-overview"

@using Smart.Blazor.Demos.Data
@inject RandomDataService dataService

<style>
    /* This is the CSS used in the demo */

    html,
    body {
    margin: 0;
    }
</style>
<Example Name="Kanban">
    <p>
        Kanban represents a UI component for mapping and visualizing each step of your process as a flow. The Kanban is usually named after the project you are assigned to work on.
        Every Kanban has three main sections that show the state of your tasks in the flow:
        <br /><br />
        - To Do - the area where you place the work that you plan to work on next.
        <br />- In Progress: when you start working on a particular task/card, you have to move it to "In Progress".
        <br />- Done: when the task is completed -> move it to Done.
    </p>

    @if (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Kanban @ref="kanbanRef"  Editable OnOpening="OpeningEvent" DataSource="dataRecords" Columns="@columns" Collapsible />
        <button class="btn btn-primary" @onclick="UpdateFirstTask">Update First Task</button>
    }
</Example>

@code {
    private Kanban kanbanRef;
    List<KanbanColumn> columns = new List<KanbanColumn>()
    {
        new KanbanColumn()
        {
            DataField = "ToDo",
            Label = "To do"
        },
        new KanbanColumn()
        {
            DataField = "InProgress",
            Label = "In progress"
        },
        new KanbanColumn()
        {
            DataField = "Testing",
            Label = "Testing"
        },
        new KanbanColumn()
        {
            DataField = "Done",
            Label = "Done"           
        }
    };

    void OpeningEvent(Event e)
    {
        KanbanOpeningEventDetail ed = e["Detail"];
        Console.WriteLine(ed);
    }

    private List<KanbanDataRecord> dataRecords;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateKanbanData();
    }

    private void UpdateFirstTask()
    {
        if (dataRecords != null && dataRecords.Count > 0)
        {
            var updatedTask = new Dictionary<string, object>
                {
                    ["status"] = "Done",            // update the column/status
                    ["text"] = "Test"     // keep other properties unchanged
                                                    // add other fields if necessary
                };

            kanbanRef.UpdateTask(0, updatedTask); // call UpdateTask to refresh Kanban
        }
    }
}

Best regards,
Markov

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

[Markov]

Hi,

Not sure how this is related to D3, but the Gantt can be data bound to Javascript Array. I would suggest you to take a look at our demos and docs about the gantt. Please, refer to https://www.htmlelements.com/docs/gantt/ for getting started with the component.

Best regards,
Markov

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

[Markov]

Hi,

Have you tried calling beginUpdate before calling multiple times UpdateTask and EndUpdate after that?

Best regards,
Markov

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

[Markov]

Hi Pavlov,

The Kanban has UpdateTask method to update a single task. Similar is available for the Gantt component. I suggest you to check this: https://www.htmlelements.com/docs/blazor-kanban-server-side-crud/

Best regards,
Markov

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

[Markov]

Hi,

You can check this: https://www.htmlelements.com/demos/gantt/custom-task-editor/

Best regards,
Markov

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

[Markov]

Hi,

A resolver is a service that implements Resolve<T> and pre-fetches data before the route activates.
The resolved data is then available via ActivatedRoute in your component.

This is perfect for @Input() bindings, because you can ensure the input has data immediately when the component is rendered.

Create a Resolver

// date.resolver.ts
import { Injectable } from ‘@angular/core’;
import { Resolve } from ‘@angular/router’;
import { Observable, of } from ‘rxjs’;
import { DateService } from ‘./date.service’;

@Injectable({ providedIn: ‘root’ })
export class DateResolver implements Resolve<Date> {
constructor(private dateService: DateService) {}

resolve(): Observable<Date> {
// Simulate API call or fetch default date
return this.dateService.getDefaultDate();
}
}

Attach Resolver to Route

// app-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { DateInputPageComponent } from ‘./date-input-page/date-input-page.component’;
import { DateResolver } from ‘./date.resolver’;

const routes: Routes = [
{
path: ‘date-input’,
component: DateInputPageComponent,
resolve: { defaultDate: DateResolver } // key = ‘defaultDate’
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

// date-input-page.component.ts
import { Component, OnInit } from ‘@angular/core’;
import { ActivatedRoute } from ‘@angular/router’;

@Component({
selector: ‘app-date-input-page’,
template: `
<smart-date-input [value]=”preloadedDate”></smart-date-input>
`
})
export class DateInputPageComponent implements OnInit {
preloadedDate!: Date;

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
this.preloadedDate = this.route.snapshot.data[‘defaultDate’];
}
}

In general:

[value] binds the preloaded date to the Smart.DateInput.
Resolver ensures the data is ready before component initialization, so the date input is populated immediately.

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

The tooltipFormatFunction allows you to customize the Chart tooltip.

Example:

chart.toolTipFormatFunction = function (value, itemIndex, serie, group) {
  const month = chart.dataSource[itemIndex].Month;
  const sales = chart.dataSource[itemIndex].Sales;
  return 

<div style=”color: #fff; background: #6610F2; padding: 5px; border-radius: 5px;”>
${month}: $${sales}
</div>`;
};`

Best regards,
Markov

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

[Author]

Posts