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 :
<div class="row">
<div class="col-md-12">
<h2>Chart 1</h2><br />
<div id="ControlRegion">
<div id="Tooltip" style="display: none;">
<div id="icon">
<div id="eficon"></div>
</div>
<div id="value">
<div>
<label id="efpercentage">#point.y#</label><br />
<label id="ef">Efficiency</label>
</div>
</div>
</div>
@(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); }))
</div>
</div>
<div class="col-md-12">
<h2>Chart 2</h2><br />
<div id="ControlRegion2">
<div id="Tooltip" style="display: none;">
<div id="icon2">
<div id="eficon2"></div>
</div>
<div id="value2">
<div>
<label id="efpercentage2">#point.y#</label><br />
<label id="ef2">Efficiency</label>
</div>
</div>
</div>
@(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); }))
</div>
</div>
<style class="cssStyles">
.tooltipDiv {
background-color: #E94649;
color: white;
width: 130px;
}
#Tooltip > div:first-child {
float: left;
}
#Tooltip #value {
float: right;
height: 50px;
width: 63px;
}
#Tooltip #value > div {
margin: 5px 5px 5px 5px;
}
#Tooltip #efpercentage {
font-size: 20px;
font-family: segoe ui;
}
#Tooltip #ef {
font-size: 12px;
font-family: segoe ui;
}
#eficon {
background-image: url("../Content/Images/Chart/eficon.png");
height: 60px;
width: 60px;
background-repeat: no-repeat;
}
</style>
</div>
and my JS function that only select the point on the 2nd chart :
function seriesSelection(sender) {
$("#container2").ejChart({
selectedDataPointIndexes: sender.selectedData
});
}
Is there any way to show a line on #container2 ?
The amazing support team answered here
By the way, here is my implementation:
<script type="text/javascript">
var chart2_ID = "container2";
function mouseMove(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);
}
</script>