ottodude125

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

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

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

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)

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:

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.

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.

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!!