Skip to content

How to drag a point inside a razor page? #205

@ricbrue

Description

@ricbrue

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

No one assigned

    Labels

    questionFurther information is requested

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions