-
Notifications
You must be signed in to change notification settings - Fork 164
Open
Labels
questionFurther information is requestedFurther information is requested
Description
I am trying to use this wrapper in order to include a Chart inside my .razor page, I've successfully managed to show data but now I need to drag and update data realtime by using some scripting.
Which Blazor project type is your question related to?
- Client-Side
Which charts is this question related to?
- LineChart
JavaScript equivalent
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var chartInstance = new Chart(ctx, options);
d3.select(chartInstance.chart.canvas).call(
d3.drag().container(chartInstance.chart.canvas)
.on('start', getElement)
.on('drag', updateData)
.on('end', callback)
);
var element, scale, datasetIndex, index, value
function getElement() {
var e = d3.event.sourceEvent
element = chartInstance.getElementAtEvent(e)[0]
scale = element['_yScale'].id
}
function updateData() {
var e = d3.event.sourceEvent
datasetIndex = element['_datasetIndex']
index = element['_index']
value = chartInstance.scales[scale].getValueForPixel(e.clientY)
chartInstance.data.datasets[datasetIndex].data[index] = value
chartInstance.update(0)
}
function callback() {
return console.log('The new value is: ' + value)
}
Additional context
I am using a MAUI framework with Blazor integration (.razor pages)
Metadata
Metadata
Assignees
Labels
questionFurther information is requestedFurther information is requested