syncfusion ejchart - sync 2 charts

[Yannick Gasser]

Am discovering Syncfusion and that's look pretty cool. But, I am wondering if it's possible to show programatically a trackball on a chart ? In fact, I would like to show a trackball line on a second chart when I select a point on the first chart. Here is my asp.net mvc 5 code :

@(Html.EJ().Chart("container1")

.PrimaryXAxis(pr => pr.Range(ra => ra.Min(2005).Max(2011).Interval(1)).Title(tl => tl.Text("Year")))

.PrimaryYAxis(pr => pr.Title(tl => tl.Text("Efficiency")).RangePadding(ChartRangePadding.None).LabelFormat("{value}%").Range(ra => ra.Min(25).Max(50).Interval(5)))

.CommonSeriesOptions(cr => cr.Type(SeriesType.Line).EnableAnimation(true).Marker(mr => mr.Shape(ChartShape.Circle).Size(sz => sz.Height(10).Width(10)).Visible(true)).Tooltip(sr1 => sr1.Visible(false).Template("Tooltip")).Border(st => st.Width(2)))

.Series(sr =>

{

sr.Points(pt =>

{

pt.X("2005").Y(28).Add();

pt.X("2006").Y(25).Add();

pt.X("2007").Y(26).Add();

pt.X("2008").Y(27).Add();

pt.X("2009").Y(32).Add();

pt.X("2010").Y(35).Add();

pt.X("2011").Y(30).Add();

})

.Name("India")

.SelectionSettings(ss => ss.Enable(true).Mode(ChartMode.Point).Pattern(ChartPattern.Circle).Type(ChartSelectionType.Single))

.Add();

})

.Axes(ax =>

{

ax.MajorGridLines(mj => mj.Visible(false)).CrosshairLabel(chAxes => chAxes.Visible(true)).Orientation("Horizontal").Name("xAxis1").ValueType(AxisValueType.Datetime).LabelRotation(90).Add();

ax.MajorGridLines(mj => mj.Visible(false)).LabelFormat("{value}mm").CrosshairLabel(seAxes => seAxes.Visible(true)).Orientation("Vertical").OpposedPosition(true).Range(rg => rg.Min(0).Max(150).Interval(20)).Name("yAxis").Add();

})

.Crosshair(cr => cr.Visible(true).Type(CrosshairType.Trackball))

.Zooming(zn => zn.Enable(false).EnableMouseWheel(false))

.CanResize(true)

.Load("loadTheme")

.Title(title => title.Text("Efficiency of oil-fired power production"))

.Size(sz => sz.Height("600"))

.SeriesRegionClick("seriesSelection")

.Legend(lg => { lg.Visible(true); }))

@(Html.EJ().Chart("container2")

.PrimaryXAxis(pr => pr.Range(ra => ra.Min(2005).Max(2011).Interval(1)).Title(tl => tl.Text("Year")))

.PrimaryYAxis(pr => pr.Title(tl => tl.Text("Efficiency")).RangePadding(ChartRangePadding.None).LabelFormat("{value}%").Range(ra => ra.Min(25).Max(50).Interval(5)))

.CommonSeriesOptions(cr => cr.Type(SeriesType.Line).EnableAnimation(true).Marker(mr => mr.Shape(ChartShape.Circle).Size(sz => sz.Height(10).Width(10)).Visible(true)).Tooltip(sr1 => sr1.Visible(false).Template("Tooltip")).Border(st => st.Width(2)))

.Series(sr =>

{

sr.Points(pt =>

{

pt.X("2005").Y(28).Add();

pt.X("2006").Y(25).Add();

pt.X("2007").Y(26).Add();

pt.X("2008").Y(27).Add();

pt.X("2009").Y(32).Add();

pt.X("2010").Y(35).Add();

pt.X("2011").Y(30).Add();

})

.Name("India")

.SelectionSettings(ss => ss.Enable(true).Mode(ChartMode.Point).Pattern(ChartPattern.Circle).Type(ChartSelectionType.Single))

.Add();

})

.Axes(ax =>

{

ax.MajorGridLines(mj => mj.Visible(false)).CrosshairLabel(chAxes => chAxes.Visible(true)).Orientation("Horizontal").Name("xAxis1").ValueType(AxisValueType.Datetime).LabelRotation(90).Add();

ax.MajorGridLines(mj => mj.Visible(false)).LabelFormat("{value}mm").CrosshairLabel(seAxes => seAxes.Visible(true)).Orientation("Vertical").OpposedPosition(true).Range(rg => rg.Min(0).Max(150).Interval(20)).Name("yAxis").Add();

})

.Crosshair(cr => cr.Visible(true).Type(CrosshairType.Trackball))

.Zooming(zn => zn.Enable(false).EnableMouseWheel(false))

.CanResize(true)

.Load("loadTheme")

.Title(title => title.Text("Efficiency of oil-fired power production"))

.Size(sz => sz.Height("600"))

.Legend(lg => { lg.Visible(true); }))

and my JS function that only select the point on the 2nd chart :

function seriesSelection(sender) {
       $("#container2").ejChart({
            selectedDataPointIndexes: sender.selectedData,
            crosshair: {
                visible: true,
                type: 'trackball'
            }
        });
    }

Is there any way to show a line on #container2 ?

[Dharanidharan Dharmasivam]

Hi Thierry,  

Thanks for using Syncfusion products. 

We have analyzed your query. Your requirement can be achieved as workaround using pointRegionClick event. We have triggered the pointRegionClick event for the first chart, with this, trackball for the second chart is displayed. Kindly find the code snippet below to achieve this requirement. 

ASP.NET MVC: 

@(Html.EJ().Chart("container1") 

           //... 

           .PointRegionClick("regionClick") 

           .ChartMouseMove("mouseMove") 

) 

@(Html.EJ().Chart("container2") 

      //... 

) 

 

function regionClick(sender) { 

        var targertChart = $("#" + chart2_ID).ejChart("instance"); 

        targertChart.mousemoveX = sender.data.location.x, targertChart.mousemoveY = sender.data.location.y; 

        targertChart.chartTrackball(targertChart, sender.data.location); 

    } 

 

//Removed the trackball in the mouse move event of first chart 

    function mouseMove(sender) { 

        $("#" + chart2_ID + "_svg_CrosshairGroup").remove(); 

        $("#" + chart2_ID + "_trackball_grouping_tooltip").remove(); 

    } 

Screenshot: 

 

Sample for reference can be find from below link. 

https://www.syncfusion.com/downloads/support/forum/135859/ze/chartTrackball-652442779  

 

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani. 

[Yannick Gasser]

That's exactly what I was looking for !

Thank you so much for your precious help

[Dharanidharan Dharmasivam]

Hi Thierry,   

 

Thanks for the update. 

 

Kindly revert us, if you need any further assistance.  

Thanks, 

Dharani.