Strange Tooltip Behaviour

[ottodude125]

Hello

 

I am having two issues with tooltips and any guidance would be greatly appreciated. My data consists of 8 series with "Date" being my x coordinates. The first two items I want to render as a bar and the other 5 items as a line. I am experiencing this same behaviour in both google chrome and firefox and have not tested any other browsers. I am using jchartfx 7.4.5596

 

1) The first issue is tooltips not containing all data for a given date when I have two series setup as a bar graph

a. When I render all items as lines the tooltip for each point contains all data values for that date. 

b. When I render the first two items as bars then each tooltip only contains the data value for the specific point I hover over.  

 

2) The second issue is where the tooltip renders on the screen. I have two y axis, Y and Y2, one which is whole numbers and the other which is percentages. When I specify the right axis to be whole numbers and the left axis to be a decimal percentage the the tooltips for the lines using the right y axis(whole numbers) do not render over the point but instead render way outside of the graph.  When I switch the axis all the tooltips render within the table area but some tooltips popup over the lowest point instead of the actual point I'm on. 

 

My Data Sample

[{"Documentation Issues/Pins":0.0,"Clarification Issues/Pins":0.0,"Designs FTPd":24,"Designs w/Documentation Issues":16,"Designs w/Clarification Issues":19,"Linear (Documentation Issues/Pins)":0.0,"Linear (Clarification Issues/Pins)":0.0,"Date":"1Q14"},{"Documentation Issues/Pins":0.00939,"Clarification Issues/Pins":0.00313,"Designs FTPd":23,"Designs w/Documentation Issues":20,"Designs w/Clarification Issues":19,"Linear (Documentation Issues/Pins)":0.0,"Linear (Clarification Issues/Pins)":0.0,"Date":"2Q14"}]

My jQuery Code

window.FirQuartersChart = function(fir_quarts, firchart) {
	var chartDiv;
	firchart.getDataGrid().setVisible(true);
	firchart.getDataGrid().setBackColorData("#00FF00");
	firchart.getDataGrid().setBackColorDataAlternate("#FF0000");
	firchart.getDataGrid().setInterlaced(cfx.Interlaced.Horizontal);

	firchart.getAxisY().getGrids().getMajor().setVisible(false);
	firchart.getAxisY().getLabelsFormat().setDecimals(2);
	firchart.getAxisY().getTitle().setText("Issues/Pins");
	firchart.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Percentage);
	firchart.getAxisY2().getGrids().getMajor().setVisible(false);
	firchart.getAxisY2().getTitle().setText("Designs");
	firchart.getAxisX().setStep(1);
	
        firchart.getData().setSeries(8);

	firchart.getSeries().getItem(2).setAxisY(firchart.getAxisY2());
	firchart.getSeries().getItem(3).setAxisY(firchart.getAxisY2());
	firchart.getSeries().getItem(4).setAxisY(firchart.getAxisY2());

	firchart.getSeries().getItem(0).setGallery(cfx.Gallery.Bar);
	firchart.getSeries().getItem(1).setGallery(cfx.Gallery.Bar);
	
        firchart.getSeries().getItem(2).setGallery(cfx.Gallery.Lines);
	firchart.getSeries().getItem(2).setStacked(false);
	firchart.getSeries().getItem(3).setGallery(cfx.Gallery.Lines);
	firchart.getSeries().getItem(3).setStacked(false);
	firchart.getSeries().getItem(4).setGallery(cfx.Gallery.Lines);
	firchart.getSeries().getItem(4).setStacked(false);	
	
	firchart.getSeries().getItem(5).setGallery(cfx.Gallery.Lines);
	firchart.getSeries().getItem(5).setStacked(false);
	firchart.getSeries().getItem(5).setMarkerShape(cfx.MarkerShape.Triangle);	
	
	firchart.getSeries().getItem(6).setGallery(cfx.Gallery.Lines);
	firchart.getSeries().getItem(6).setStacked(false);
	firchart.getSeries().getItem(6).setMarkerShape(cfx.MarkerShape.Triangle);

	firchart.setDataSource(fir_quarts);
	chartDiv = document.getElementById('firQuartersChart');
	firchart.create(chartDiv);	
};

My HTML Code

<div class="splitcontentleft" >
	<div id="firQuartersChartBox" class="firQuartersChartBox" >
		<div id="firQuartersChart" class="firQuartersChart" ></div>			
        </div>
	<script>
		fir_quarts = <%= raw @fir_quarterly_history %>;
                chart = new cfx.Chart();
		document.ready = FirQuartersChart(fir_quarts, chart);
	</script>
</div>

My CSS Code

div.splitcontentleft {
  float: left;
  width: 70%;
  margin-left: 10px;
}

div#firQuartersChart {
  position: relative;
  z-index: 10;
  min-width: 310px;
  max-width: 90%; 
  height: 550px; 
  margin: 0 auto;    
}

[JuanC]

1) Internally there are certain scenarios where we cannot honor the ToolTips.AllSeries property to display all series, one of them is related to multiple stack groups and unfortunately there is a bug where we are incorrectly deciding we cannot display all series values when you mix bars and lines, this should be fixed on our next build.

 

2) The code that calculates the tooltip position is incorrectly using the main axis which is why some tooltips show in the wrong place, this will be fixed on our next build. As a workaround you could revert to our old tooltip behavior where the tooltip shows on the mouse instead of the marker value using the following call

 

chart1.getToolTips().setTriggerMode(cfx.TooltipTriggerMode.Marker);

 

 

Regards,

 

JuanC

[ottodude125]

Juan. I'm a little slow but thank you for the response!!