Jump to content
JChartFX Community
  • 0

Strange Tooltip Behaviour


Question

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. post-46655-0-80749200-1431618950_thumb.png

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.  post-46655-0-02859600-1431618959_thumb.png

 

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. post-46655-0-29410400-1431628230_thumb.png 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;    
}
Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...