Can somebody help me on how to create a Scatter Plot?

[rerasolutions]

I truely love Blazorise and converted a recent project into this. Now I am a bit stuck.

I am looking for a way to create a scatterplot. I can only set the Type to Line.

So I would like to plot:

(1.2, 3.4)
(2.3, 5.9)
(4.0, 10.2)

In the example I see a streaming example, but this has DateTime on the X-axis.

Thanks,

[stsrki]

Here is a modified example from the demo and the code from https://www.chartjs.org/docs/latest/charts/scatter.html

<Row>
    <Column ColumnSize="ColumnSize.IsThird.OnWidescreen">
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Line</CardTitle>
            </CardHeader>
            <CardBody>
                <Chart @ref="chart" TItem="System.Drawing.Point" OptionsObject="@options" />
            </CardBody>
        </Card>
    </Column>
</Row>
@code{
    Chart<System.Drawing.Point> chart;

    object options = new
    {
        Scales = new
        {
            XAxes = new[]
            {
                new
                {
                    Type = "linear",
                    Position = "bottom"
                }
            }
        }
    };

    string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    List<string> backgroundColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 0.2f ), ChartColor.FromRgba( 54, 162, 235, 0.2f ), ChartColor.FromRgba( 255, 206, 86, 0.2f ), ChartColor.FromRgba( 75, 192, 192, 0.2f ), ChartColor.FromRgba( 153, 102, 255, 0.2f ), ChartColor.FromRgba( 255, 159, 64, 0.2f ) };
    List<string> borderColors = new List<string> { ChartColor.FromRgba( 255, 99, 132, 1f ), ChartColor.FromRgba( 54, 162, 235, 1f ), ChartColor.FromRgba( 255, 206, 86, 1f ), ChartColor.FromRgba( 75, 192, 192, 1f ), ChartColor.FromRgba( 153, 102, 255, 1f ), ChartColor.FromRgba( 255, 159, 64, 1f ) };

    bool isAlreadyInitialised;

    Random random = new Random( DateTime.Now.Millisecond );

    protected override async Task OnAfterRenderAsync( bool firstRender )
    {
        if ( !isAlreadyInitialised )
        {
            isAlreadyInitialised = true;

            await Task.WhenAll(
                HandleRedraw( chart, GetChartDataset ) );
        }
    }

    async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>( Blazorise.Charts.BaseChart<TDataSet, TItem, TOptions, TModel> chart, Func<TDataSet> getDataSet )
        where TDataSet : ChartDataset<TItem>
        where TOptions : ChartOptions
        where TModel : ChartModel
    {
        await chart.Clear();

        await chart.AddLabelsDatasetsAndUpdate( Labels, getDataSet() );
    }

    async Task SetDataAndUpdate<TDataSet, TItem, TOptions, TModel>( Blazorise.Charts.BaseChart<TDataSet, TItem, TOptions, TModel> chart, Func<List<TItem>> items )
        where TDataSet : ChartDataset<TItem>
        where TOptions : ChartOptions
        where TModel : ChartModel
    {
        await chart.SetData( 0, items() );
        await chart.Update();
    }

    LineChartDataset<System.Drawing.Point> GetChartDataset()
    {
        return new LineChartDataset<System.Drawing.Point>
        {
            Type = "scatter",
            Label = "Scatter Dataset",
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
            ShowLine = false
        };
    }

    List<System.Drawing.Point> RandomizeData()
    {
        return new List<System.Drawing.Point> {
            new System.Drawing.Point(random.Next( 3, 50 ) * random.Next(), random.Next( 3, 50 ) * random.Next()),
            new System.Drawing.Point(random.Next( 3, 50 ) * random.Next(), random.Next( 3, 50 ) * random.Next()),
            new System.Drawing.Point(random.Next( 3, 50 ) * random.Next(), random.Next( 3, 50 ) * random.Next()),
            new System.Drawing.Point(random.Next( 3, 50 ) * random.Next(), random.Next( 3, 50 ) * random.Next()),
            new System.Drawing.Point(random.Next( 3, 50 ) * random.Next(), random.Next( 3, 50 ) * random.Next()),
            new System.Drawing.Point(random.Next( 3, 50 ) * random.Next(), random.Next( 3, 50 ) * random.Next()),
        };
    }
}

The only downside is that internally it is still a Line chart but that can be something to be fixed in the future versions.

[CaiusJard]

SetDataAndUpdate is not used, right?

[stsrki]

@CaiusJard It is copy/pasted by error. It is not used in this example.

[roamschemer]

Since the System.Drawing.Point is (int,int)
(double,double) such as (1.2, 3.4)
cannot be plotted.
What should I do?

[stsrki]

You can use any struct. It doesn0't needs to be Point type. It can be your custom.

public struct YourData
{
    public YourData( double x, double y )
    {
        X = x;
        Y = y;
    }

    public double X { get; set; }
    public double Y { get; set; }
}

[roamschemer]

@stsrki Thank you so much!!!