CODEWITHSUNDEEP
javascriptchartszingchart
evgeni tsvetanov
evgeni tsvetanov

Reputation: 181

ZingChart get crosshair position on click

The ZingChart click event states that the callback will receive an object. The x attribute will contain

The x position of the click relative to the chart position

I assume this is the cursor position in the window (i.e. pixels) relative to the position (top left corner?) of the div element that contains the graph.

Is there a way to get the "X" value of the crosshair position upon click as illustrated in the picture: Example

i.e. if the crosshair is at "0", I want to get that value upon click. When I use the arg.x of the click event, and the crosshair is at "0" I get 49, and I need 0.

The code:

var values = [0,2.81,5.61,8.38, ...]

var chartData={
    "type":"line",  // Specify your chart type here.
    "background-color":"#f4f4f4",
    "scale-x": {
        "zooming":true
    },
    "plot": {
//        "mode":"fast",
        "exact":true,
//        "smartSampling":true,
//        "maxNodes":0,
//        "maxTrackers":0,
        "lineWidth":2,
        "shadow":false,
        "marker":{
            "type":"none",
            "shadow":false
        }
    },
    "plotarea":{
        "background-color":"#fbfbfb",
        "margin-top":"30px",
        "margin-bottom":"40px",
        "margin-left":"50px",
        "margin-right":"30px"
    },
    "scaleX":{
        "autoFit":true,
        "zooming":true,
        "normalize":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "guide":{
            "visible":false
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-top":"5px"
        },
        "maxLabels":10
    },
    "scrollX":{ },
    "scaleY":{
        "minValue":"auto",
        "autoFit":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-right":"5px"
        },
        "guide":{
            "lineStyle":"solid",
            "line-color":"#c7c9c9",
            "alpha":0.2
        }
    },
    "tooltip":{
        "visible":false
    },
    "crosshairX":{
        "lineWidth":1,
        "line-color":"#003849",
        "marker":{
            "size":4,
            "type":"circle",
            "borderColor":"#fff",
            "borderWidth":1
        },
        "scale-label":{
            "font-color":"#ffffff",
            "background-color":"#003849",
            "padding":"5px 10px 5px 10px",
            "border-radius":"5px"
        },
//            "plotLabel":{
//                "multiple":false,
//                "callout":false,
//                "shadow":false,
//                "height":"115px",
//                "padding":"5px 10px 5px 10px",
//                "border-radius":"5px",
//                "alpha":1,
//                "headerText":"Node %scale-key-text<br>",
//                "text":"<b>%plot-text:</b> %node-value"
//            }
    },

    "series":[  // Insert your series data here.
        {   "text": "P1",
            "values": values,
            "line-color":"#7ca82b",
            "line-width":1
        },
    ]
};
zingchart.render({ // Render Method[3]
    id:'id_graph_box',
    data:chartData,
    height:400,
    width:800,
});
zingchart.click=function(p) {
    console.log("GRAPH CLICKEND ON X:", p)

Upvotes: 3

Views: 743

Answers (1)

nardecky
nardecky

Reputation: 2631

Full disclosure, I'm a member of the ZingChart team.

Yes the values are relative the chart position. What you can do is use our API methods to get the chart information you need based on the xy location of the click. You will use getxyinfo, which will grab an array of information about the chart. It will grab scale information closest to where the click happened. This means if you click in between two nodes (for scale-x), whichever is closest to (x position from click) it will give you that information. The crosshair/guide works the same way when highlighting nodes, so this shouldn't be a problem. I just thought it was relevant to bring up.

The demo below looks a little funky with the console.log() output. Here is a link hosted by us as well. 

var values = [0,2.81,5.61,8.38];

var chartData = {
    "type":"line",  // Specify your chart type here.
    "background-color":"#f4f4f4",
    "scale-x": {
        "zooming":true
    },
    "plot": {
//        "mode":"fast",
        "exact":true,
//        "smartSampling":true,
//        "maxNodes":0,
//        "maxTrackers":0,
        "lineWidth":2,
        "shadow":false,
        "marker":{
            "type":"none",
            "shadow":false
        }
    },
    "plotarea":{
        "background-color":"#fbfbfb",
        "margin-top":"30px",
        "margin-bottom":"40px",
        "margin-left":"50px",
        "margin-right":"30px"
    },
    "scaleX":{
        "autoFit":true,
        "zooming":true,
        "normalize":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "guide":{
            "visible":false
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-top":"5px"
        },
        "maxLabels":10
    },
    "scrollX":{ },
    "scaleY":{
        "minValue":"auto",
        "autoFit":true,
        "lineWidth":1,
        "line-color":"#c7c9c9",
        "tick":{
            "lineWidth":1,
            "line-color":"#c7c9c9"
        },
        "item":{
            "font-color":"#818181",
            "font-family":"Arial",
            "padding-right":"5px"
        },
        "guide":{
            "lineStyle":"solid",
            "line-color":"#c7c9c9",
            "alpha":0.2
        }
    },
    "tooltip":{
        "visible":false
    },
    "crosshairX":{
        "lineWidth":1,
        "line-color":"#003849",
        "marker":{
            "size":4,
            "type":"circle",
            "borderColor":"#fff",
            "borderWidth":1
        },
        "scale-label":{
            "font-color":"#ffffff",
            "background-color":"#003849",
            "padding":"5px 10px 5px 10px",
            "border-radius":"5px"
        },
//            "plotLabel":{
//                "multiple":false,
//                "callout":false,
//                "shadow":false,
//                "height":"115px",
//                "padding":"5px 10px 5px 10px",
//                "border-radius":"5px",
//                "alpha":1,
//                "headerText":"Node %scale-key-text<br>",
//                "text":"<b>%plot-text:</b> %node-value"
//            }
    },

    "series":[  // Insert your series data here.
        {   "text": "P1",
            "values": values,
            "line-color":"#7ca82b",
            "line-width":1
        },
    ]
};

zingchart.render({ 
	id: 'myChart', 
	data: chartData, 
	height: '100%', 
	width: '100%' 
});

zingchart.bind('myChart', 'click', function(e) {
  
  /*
   * Returns array of information. 
   * xyInformation[0] -> scale-x info 
   * xyInformation[1] -> scale-y info 
   * xyInformation[2] -> node info
   */
  var xyInformation = zingchart.exec('myChart', 'getxyinfo', {
    x: e.x,
    y: e.y
  });
  console.log(xyInformation)
});
html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
		<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
		ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script>
	<!--Inject End-->
	</head>
	<body>
		<div id="myChart"></div>
	</body>
</html>

Upvotes: 5

Related Questions