Can somebody help me on how to create a Scatter Plot? #2127
Unanswered
rerasolutions
asked this question in
Q&A
Replies: 1 comment 6 replies
-
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. |
Beta Was this translation helpful? Give feedback.
6 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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,
Beta Was this translation helpful? Give feedback.
All reactions