Bar Chart - Drawing per Drag and Drop

[ZMI Dev]

Hi, we have the following scenario:

We use your Chart control for accomplish the following example:
https://jhtueu.stackblitz.io/

(only 12h Demo - in the real world szenario we use it with 24 hours)

We use this control to show, when an employee is overplanned or the target demand isn't reached.

Now we have the problem, that the manual settings of each "is" value for 24h hours take a very long time, because the user have to adjust every green bar for itself. In further szenarios, we have to edit that in 15min time slots and that results in 96 bars, which had to be set.

So we came with the idea to use drag and drop functionality or somethine else to do it faster.

1. Is it possible to use the mouse, drag from the left to the right and adjust the bars by the mouse x-position? Simliar to the following example https://css-tricks.com/examples/DrawingTable/ but with the difference, that we only set the vertical higth of each bar?
2. Or is there another control which is better for this requirements?
3. Can this be accomplished also in Blazor?

[Durga Gopalakrishnan]

ZMI Dev,

We have analyzed your reported query based on that, we regret to inform you that the requested functionality of dragging and dropping bars as demonstrated in the provided reference is not currently possible in both EJ2 and Blazor controls.

However, we do have an alternative solution available. You can achieve vertical dragging of columns by enabling dragSettings in series. We have provided a code snippet, a sample, and a screenshot for your reference, which illustrates this approach.

Code-snippet:

var chart = new ej.charts.Chart({

        series: [

            {

                dragSettings: { enable: true }

            }

        ]

    });

chart.appendTo('#dataediting-container');

Sample: Fdbgcd (forked) - StackBlitz

Kindly revert us if you have any concerns.

Regards,

Nishanthi

[ZMI Dev]

Thanks for your answer.

But this solution doesn't help in a szenario where a user have to draw 24-96 vertical bars. I also used the   dragSettings: { enable: true } in my solution.

2. Do you have another control where we can accomplish this szenario. It would be ok, if we had a control, where we have so set the vertical values separatly to the barchart. We need something where we can "draw" vertical values (till 96) with a simple mousedrag, so that the user doesnt have to adjust every value one by one. But its also needed the he can adjust single values after that, too.

E.g.: something simple like your linechart https://blazor.syncfusion.com/documentation/chart/chart-types/step-line where we can draw per drag and drop?

3. Is yes. Is there something in Blazor?

Best regards

[Nishanthi Panner Selvam]

ZMI Dev,

We can implement drag functionality for stepLine charts in both EJ2 and Blazor charts. We've prepared a sample and included a code-snippet  for your reference.

Code-snippet:

EJ2

 

let chart: Chart = new Chart({

      series: [

        {

          type: 'StepLine',

          dragSettings: { enable: true },

        }

      ],

    });

chart.appendTo('#container');

Blazor

 

<SfChart>

  <ChartSeriesCollection>

    <ChartSeries StepPosition="StepPosition.Center" Type="ChartSeriesType.StepLine">

    </ChartSeries>

    <ChartDataEditSettings Enable="true"></ChartDataEditSettings>

  </ChartSeriesCollection>

</SfChart>

EJ2 Sample: https://stackblitz.com/edit/iprwvd-avszdr?file=index.ts

Blazor Sample: https://blazorplayground.syncfusion.com/rNhTjrBlzAfttVJf

Please let us know if you have any concerns.

Regards,

Nishanthi

[ZMI Dev]

Thanks for your answer,

but I already found this solutions and it doesn't accomplish our requirements to 100%.
Is there a control or a solution to use a "drawing" event or something else to reduce the user interactions, where many different timeslots has to be adjusted.

1. For example: Start at 0:00 and hold the left mouse key down, drag the mouse until 24:00 and drop the mouse there. While I hold and drag the mouse: the controls "draws" the chart by following the mouse position.
   After that we could use the registered mouse coordinates to use it later for a BarChart Diagram.
   
   A little bit like in this example: https://css-tricks.com/examples/DrawingTable/ where you can draw a line in different vertical heights from left to right only by hold the mouse down
2. Another option could be like draw.io (https://app.diagrams.net/) does it with its "linetool"
   In this example you have a line, you can draw it by adding new anker points and drag them one by one, if needed. But the user dont have to adjust EVERY possible slot in the scale.

The very Important Requirement is, that e.g. in a 96 Slot Chart, the user doesn't have to drag and drop every 15min time slot one by one. But of course can adjust it later if he wants. Is there a solution in your control repertoir?

Best regards

[Swetha Babu]

ZMI Dev,

Please find the below response for your queries.

Query 1: Hold the left mouse key down, drag the mouse until 24:00 and drop the mouse there. While I hold and drag the mouse: the controls "draws" the chart by following the mouse position.
After that we could use the registered mouse coordinates to use it later for a BarChart Diagram.

Unfortunately, our current controls do not support this requirement. However, we recommend exploring the Signature component, which allows drawing within a canvas. Please refer to the online demo link provided below for more information.

Demo link: https://ej2.syncfusion.com/demos/#/material3/signature/default.html

Query 2: Another option could be like draw.io (https://app.diagrams.net/) does it with its "linetool"

In the Diagram, the drawing of a Polyline connector can be achieved using Diagram Tools.

Documentation: https://ej2.syncfusion.com/documentation/diagram/tools#polyline-connector

Kindly, revert us if you have any concerns.