[Strange Tooltip Behaviour]

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

[Strange Tooltip Behaviour]

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;    
}

[Slowness when rendering multiple charts]

Thank you very much for the response!! It was much more detailed than I expected and very helpful.

 

As a side note for anyone reading this down the road I am giving my coffeescript a chunk of json formated data for each graph which is then parsed before being passed to jchartFX. The data was similar to what I provided below except instead of there being one record there were fifty(50), and each of the twelve(12) graphs had a separate data set.

[{"Date":"2014-07-21","Work":0.0,"Flex":0.0,"Expected":29.0,"Baseline":88}]

Following the guidelines of the time trials above I ended up removing the following from my coffeescript code. By removing this I was able to get the page to load in on average about 6.5 seconds which is much more usable than the 14-16 seconds I was running into before.

chart.getAnimations().getLoad().setEnabled true # animates drawing of graph
titles = chart.getTitles()
title.setText "Expected vs Worked/Flexed Hours"
titles.add title
chart.getLegendBox().setDock cfx.DockArea.Bottom   
chart.getAxisX().setLabelAngle(45)  
chart.getAxisY().getTitle().setText("Hours")  
chart.getAllSeries().setBarShape cfx.BarShape.Cylinder
chart.getAllSeries().setFillMode cfx.FillMode.Pattern
chart.getAllSeries().setVolume 75

The coffeescript code I ended up using is:

chart.getAxisX().setStep 7
chart.getData().setSeries 5

chart.getSeries().getItem(0).setGallery cfx.Gallery.Bar
chart.getSeries().getItem(1).setGallery cfx.Gallery.Bar

chart.getAllSeries().setStackedStyle cfx.Stacked.Normal

chart.getSeries().getItem(2).setGallery cfx.Gallery.Lines
chart.getSeries().getItem(2).setStacked(false)
chart.getSeries().getItem(3).setGallery cfx.Gallery.Lines
chart.getSeries().getItem(3).setStacked(false)

chart.setDataSource items
chartDiv = document.getElementById("hoursPerDayHistory" + user["id"])
chart.create chartDiv

[Vertical X-Axis Labels]

Without seeing your code I cannot say for sure if this will work but I am using the following to angle my x axis labels

chart = new cfx.Chart()
chart.getAxisX().setLabelAngle(45)

[Time labels on XAxis]

Not sure if its exactly what you are looking for but I was able to get the time data values to render on the x axix by changing

recordTimeField.setUsage(cfx.FieldUsage.XValue);

to

recordTimeField.setUsage(cfx.FieldUsage.Label);

Here is a screenshot of your code, with this one change, in action:

 

[x-axis labels rounded and some are not displayed]

I was going to try to help you but I've had several problems with your code you submitted and I am not sure exactly what you want. 

 

 

Is this the code that you meant to submit? I have copied it exactly as you wrote and tried running it. Firstly I needed to comment out the following lines because you do not include how you got xAxis.

xAxis.setStep(1);
xAxis.setLabelValue(1);

Secondly from what you are saying it sounds like my graph is rendering differently from what your intentions were. I included a screenshot of my results and as you can see your code is rendering 1-10 on the xAxis. This contradicts what you stated in your description.

 

Just as a side note when I hover over the bars I am getting the correct values in the popups. 

 

 

[Slowness when rendering multiple charts]

I apologize for the urls that were broken above. I updated the url's in my original post because the editor included the period at the end of the sentence in the url. 

[Slowness when rendering multiple charts]

I am creating a page that I displays twelve charts and each chart is a combination of two lines and a stacked bar. If I render the page with no charts it takes about 2.5 seconds to load. I have found that each additional call to my loadHoursChart() js function to add an additional chart to the page adds about 1 second to the page load time. With all these graphs the page is taking 14-16 seconds to load. I am wondering if anyone has any recommendations on how I can increase the speed of jchartfx so the page is more useable. I am not sure if I'm using jchartfx wrong or if it just wasnt designed to handle this large of a workload at once.

 

The haml view code creating the chart section of the page is http://pastebin.com/WRLHXjY5

The coffeescript code that renders these graphs is located at http://pastebin.com/Ruf2meru

If any additional information is needed just let me know and I'll add it. Thank you for any help!!