Tem.20

Google LineChart and SteppedArea Chart Zoom Event Detect Solution

In my research I saw that an event was not triggered when the dragAndZoom event occurred. For this reason I developed a solution myself and wanted to share it (using jQuery).

SteppedAreaChart

The logic in these codes is; Checking the positions of the squares forming the fields. If the first frame is outside the specified range, zoom in.

Check the following commands first when re-rendering the charts.

var chartFirstRectX = Number($("#chart_operation div div div:nth-child(1) svg g:nth-child(2) g:nth-child(2) g:nth-child(1) rect").attr("x"));
if( chartFirstRectX <= 72 && chartFirstRectX >= 68 ){
 // chart not zoomed
}else{
  // chart zoomed
}

P.S. 72 value is spesific parent div margin-padding value. You have first chech and get this value.

or…

The logic in these codes is; Check the locations of the pointer points that make up the fields. If it is not the first specified value, zoom in.

var chartFirstRectX = Number($("#chart_id div div div:nth-child(1) svg g:nth-child(2) g:nth-child(2) g:nth-child(1) rect").attr("x"));
if( chartFirstRectX <= 72 && chartFirstRectX >= 68 ){
  // chart not zoomed
}else{
  // chart zoomed
}

LineChart

If pointsVisible: true using in your LineChart configurations…

var dataLength;
// JSON chart data from API or Database...
if( !isNaN($("#chart_id").find("circle").length) && $("#chart_id").find("circle").length+10 <= dataLength){
 // zoomed
}else{
  // not zoomed
}
İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum