Profile Picture

Zoom & scroll like Google Finance

Posted By Plamen Dimitrov 13 Years Ago
Author
Message
Plamen Dimitrov
Posted 13 Years Ago
View Quick Profile
Forum Newbie

Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)

Group: Forum Members
Last Active: 13 Years Ago
Posts: 7, Visits: 1
Guys,

I'm trying to build zoom & scroll on mouse left button and wheel similar to what Goolge Finance's chart does. I've intercepted the mouse events on the chart control and redirected them to the NAxisScroll tool hoping that it will do the heavy lift me but it doesn't seem to work.

Any hint is highly appreciated.

Find below the code snippet that supposed to do it.

Thanks,
Plamen

NAxisScrollTool axisScrollTool = new NAxisScrollTool();
private void Form3_Load(object sender, EventArgs e)
{
    NCartesianChart chart = (NCartesianChart)nChartControl1.Charts[0];
    chart.Dock = DockStyle.Fill;

    NLineSeries line = (NLineSeries)chart.Series.Add(SeriesType.Line);
    line.UseXValues = true;
    line.DataLabelStyle = new NDataLabelStyle();
    NDateTimeAxisPagingView dateTimePagingView = new NDateTimeAxisPagingView(DateTime.Now.AddMonths(-1), new NDateTimeSpan(1, NDateTimeUnit.Month));
    dateTimePagingView.Enabled = true;
    NAxis axis = chart.Axis(StandardAxis.PrimaryX);
    axis.PagingView = dateTimePagingView;
    NValueTimelineScaleConfigurator timelineScale = new NValueTimelineScaleConfigurator();
    axis.ScaleConfigurator = timelineScale;
    axis.View = new NRangeAxisView(new NRange1DD(DateTime.Now.AddYears(-1).ToOADate(), DateTime.Now.ToOADate()));
    axis.ScrollBar.Visible = true;
    nChartControl1.Controller.Tools.Add(axisScrollTool);
    nChartControl1.MouseDown += new MouseEventHandler(nChartControl1_MouseDown);
    nChartControl1.MouseUp += new MouseEventHandler(nChartControl1_MouseUp);
    nChartControl1.MouseMove += new MouseEventHandler(nChartControl1_MouseMove);
    Random random = new Random();
    for (DateTime dt = DateTime.Now; dt > DateTime.Now.AddYears(-1); dt = dt.AddDays(-1))
    {
        line.XValues.Add(dt);
        line.Values.Add(random.Next(100));
    }
}
void nChartControl1_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        axisScrollTool.OnMouseMove(sender, e);
    }
}
void nChartControl1_MouseUp(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        axisScrollTool.OnMouseUp(sender, e);
    }
}
void nChartControl1_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        axisScrollTool.OnMouseDown(sender, e);
    }
}


Nevron Support
Posted 13 Years Ago
View Quick Profile
Supreme Being

Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)

Group: Forum Members
Last Active: Last Week
Posts: 3,054, Visits: 4,009

Hi Plamen,

Our guess is that you want to achieve data panning - in this case it's better to use the build-in data pan tool, instead of forwarding the mouse input the axis scroll tool (which can have unpredictable results as the tool had to be in drag state in order to work). Try this code:

private void Form1_Load(object sender, EventArgs e)

{

NCartesianChart chart = (NCartesianChart)nChartControl1.Charts[0];

chart.Dock = DockStyle.Fill;

NLineSeries line = (NLineSeries)chart.Series.Add(SeriesType.Line);

line.UseXValues = true;

line.DataLabelStyle = new NDataLabelStyle();

NDateTimeAxisPagingView dateTimePagingView = new NDateTimeAxisPagingView(DateTime.Now.AddMonths(-1), new NDateTimeSpan(1, NDateTimeUnit.Month));

dateTimePagingView.Enabled = true;

NAxis axis = chart.Axis(StandardAxis.PrimaryX);

axis.PagingView = dateTimePagingView;

NValueTimelineScaleConfigurator timelineScale = new NValueTimelineScaleConfigurator();

axis.ScaleConfigurator = timelineScale;

axis.View = new NRangeAxisView(new NRange1DD(DateTime.Now.AddYears(-1).ToOADate(), DateTime.Now.ToOADate()));

axis.ScrollBar.Visible = true;

nChartControl1.Controller.Tools.Add(new NSelectorTool());

nChartControl1.Controller.Tools.Add(new NAxisScrollTool());

NDataPanTool dataPanTool = new NDataPanTool();

dataPanTool.BeginDragMouseCommand = new NMouseCommand(MouseAction.Down, MouseButtons.Left, 1);

dataPanTool.EndDragMouseCommand = new NMouseCommand(MouseAction.Up, MouseButtons.Left, 1);

nChartControl1.Controller.Tools.Add(dataPanTool);


Random random = new Random();

for (DateTime dt = DateTime.Now; dt > DateTime.Now.AddYears(-1); dt = dt.AddDays(-1))

{

line.XValues.Add(dt);

line.Values.Add(random.Next(100));

}

}

Hope this helps - let us know if you have any questions or meet any problems.



Best Regards,
Nevron Support Team



Plamen Dimitrov
Posted 13 Years Ago
View Quick Profile
Forum Newbie

Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)

Group: Forum Members
Last Active: 13 Years Ago
Posts: 7, Visits: 1

An excellent solution, as to be expected from you guys!

Could you drop the key for the Google Finance like zooming as well (on the left mouse button or the wheel)?

Cheers,
Plamen



Nevron Support
Posted 13 Years Ago
View Quick Profile
Supreme Being

Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)Supreme Being (4,435 reputation)

Group: Forum Members
Last Active: Last Week
Posts: 3,054, Visits: 4,009

Hi Plamen,

Not quite sure if the question is understood properly, but guess is you want to apply zoom in:

NRangeSelection rangeSelection = new NRangeSelection();
rangeSelection.VerticalValueSnapper =
new NAxisRulerMinMaxSnapper();
chart.RangeSelections.Add(rangeSelection);

NDataZoomTool dataZoomTool = new NDataZoomTool();
dataZoomTool.BeginDragMouseCommand =
new NMouseCommand(MouseAction.Down, MouseButtons.Right, 1);
dataZoomTool.EndDragMouseCommand =
new NMouseCommand(MouseAction.Up, MouseButtons.Right, 1);
nChartControl1.Controller.Tools.Add(dataZoomTool);

That will enable the user to zoom in / out interactivily without using the sliders on the scrollbar. Is this what you're looking for?



Best Regards,
Nevron Support Team



Plamen Dimitrov
Posted 13 Years Ago
View Quick Profile
Forum Newbie

Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)Forum Newbie (7 reputation)

Group: Forum Members
Last Active: 13 Years Ago
Posts: 7, Visits: 1

Not exactly - what I need is data zooming on mouse drag + right button, similar to what you have as functionality in the left/right mini-tumb in the scroll. The basic idea is that by dragging the chart that way the user could quickly zoom in or out without using the scroll. Dragging right "compresses" the data while opening new data points on left, dragging left does the opposite...

This is quite standard functionality across the financial charts - check out something similar at http://www.google.com/finance?q=msft , click on the chat and roll the mouse wheel.

Really appreciate the time you spend on this issue.





Similar Topics


Reading This Topic