Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
140916 | Nov 14,2018 06:51 AM UTC | Nov 21,2018 01:09 PM UTC | jQuery | 9 |
![]() |
Tags: ejChart |
1st Chart
$("#container").ejChart({
//Other chart configurations
Enabled crosshair
crosshair: {visible: true, type: 'trackball',line: {color: "black"}},
Events
chartMouseMove: moveTrackball,
chartMouseLeave: discardTrackball
});
2nd chart
$("#container2").ejChart(
chart configurations
});
Add the required number of charts
Method to show crosshair
function moveTrackball(args) {
var x = args.data.location.x, y = args.data.location.y;
var chart1_ID = "container",
chart2_ID = "container2", chart3_ID = "container3", chart4_ID = "container4",
Getting instance of chart
targertChart = $("#" + chart1_ID).ejChart("instance");
targertChart.mousemoveX = x, targertChart.mousemoveY = y;
Shown the crosshair
targertChart.chartTrackball(targertChart, { x: x, y: y });
Similarly, crosshair can be displayed for all other charts
}
Method to remove crosshair
function discardTrackball() {
$("#container_svg_CrosshairGroup").remove();
//…
}
|
var chart_ID_1 = "container",
chart_ID_2 = "container2";
$("#"+chart_ID_1).ejChart({
primaryXAxis:{
Initialized stripline
stripLine:[{start:5000, end:4500, width: 2, borderColor: "red",visible: true}]
},
Other chart configurations
chartMouseMove: "moveStripLine",
});
Same for other charts
Method to move stripline
function moveStripLine(args) {
var verticalLine = $("#"+chart_ID_1+"_svg_StriplineOver_striplineRect_0_0")[0],
verticalLine2 = $("#"+chart_ID_2+"_svg_StriplineOver_striplineRect_0_0")[0];
verticalLine.setAttribute("x",args.data.location.x.toString());
verticalLine2.setAttribute("x",args.data.location.x.toString());
}
|
enableScrollbar
option in zooming
.
//Zoomfactor and zomm position
primaryXAxis:{ zoomFactor: 0.3, zoomPosition: 0.4, .. }
//enable zoomed scrollbar
zooming:{enableScrollbar: true}
|
var chart_ID_1 = "container",
chart_ID_2 = "container2";
$("#"+chart_ID_1).ejChart({
Other chart configurations
load: "chartload",
});
Same for other charts
load event for chart
function chartload(args){
args.model.primaryXAxis.zoomFactor = 1000/args.model.series[0].points.length;
args.model.primaryXAxis.zoomPosition = 0;
} |
//first chart mouse move event
function move(args) {
var chartObj = $("#container2").ejChart("instance");
var chartObj1 = $("#container").ejChart("instance");
if (!chartObj.oPreviousCoords && chartObj1.doPan) {
chartObj.oPreviousCoords = chartObj1.oPreviousCoords;
}
//Assign the first chart pan in the second chart
chartObj.doPan = chartObj1.doPan;
var evt = {target : document.getElementById("container2"), pageX : args.data.pageX, pageY : args.data.pageY, type :'mousemove'};
if (chartObj1.doPan) {
chartObj.chartMouseMove(evt);
}
}
//first chart loaded event
function loaded(args) {
args.model.zoomed = true;
var chartObj = $("#container").ejChart("instance");
chartObj.panning = true;
}
//second chart loaded event
function loaded1(args) {
args.model.zoomed = true;
var chartObj = $("#container2").ejChart("instance");
chartObj.panning = true;
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.