Jump to content
JChartFX Community

Leaderboard


Popular Content

Showing most liked content since 09/04/2014 in all areas

  1. 2 points
    I am trying to link websites into pieces of a pie chart using the event handlers for points. Below is a sample of the code i am using. When I am running a tests on the values of the points, I get undefined values. function loadChart() { alert("loadChart function started"); chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Pie); var getData = chart1.getData(); getData.setSeries(1); getData.setPoints(4); chart1.getView3D().setEnabled(true); chart1.getAllSeries().getPointLabels().setFormat("%v"); chart1.getAllSeries().getPointLabels().setVisible(true); chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR); var pie = chart1.getGalleryAttributes(); pie.setExplodingMode(cfx.ExplodingMode.All); var data1 = <?echo $data;?>; chart1.setDataSource(data1); var someVar = document.getElementById('ChartDiv1') chart1.create(someVar); someVar.onclick = doClick; alert("Chart1 created"); function doClick(evt) { alert('You clicked something'); var iPoint = 0; var iSeries = 0; if ((evt.hitType == cfx.HitType.Point) || (evt.hitType == cfx.HitType.Between)) { iPoint = evt.point; iSeries = evt.series; alert('iPoint = ' + iPoint); if (iPoint == 0) { website = "http://www.yahoo.com"; } else if (iPoint == 1) { website = "http://www.msn.com"; } else if (iPoint == 2) { website = "http://www.google.com"; } else if (iPoint == 3) { website = "http://www.apple.com"; } else if (iPoint == 4) { website = "http://www.microsoft.com"; } openWebSite(website); } else { alert("points did not work"); } } function openWebSite(website) { window.open(website); }
  2. 2 points
    We are charting 700 series that each have 40 datapoints. Each series is being rendered as a line. The code to render the chart is taking minutes to draw the chart. Are there an speed tips that you have to help us minimize the time required to render a chart? Thanks in advance for your advice.
  3. 2 points
    Hello, I'm trying to paint a chart with two X axis. Both of them will be Date axis. In the first X-axis, I want to display hours with a certain step. In the second one, I want to display the month with another step. How could I do this? This is the code about the X-axis: var axis = chart1.getAxisX(); axis.getLabelsFormat().setFormat(cfx.AxisFormat.Time); axis.setStep(19); axis.getLabelsFormat().setCustomFormat("HH:mm"); chart1.getAxisX().getGrids().setInterlaced(false); var axisX2 = new cfx.AxisX(); chart1.getAxesX().add(axisX2); axisX2.setVisible(true); axisX2.getLabelsFormat().setFormat(cfx.AxisFormat.Time); axisX2.getLabelsFormat().setCustomFormat("MM-dd"); axisX2.getGrids().setInterlaced(false); axisX2.getGrids().getMajor().setVisible(false); axisX2.setPosition(cfx.AxisPosition.Far); axisX2.setStyle(cfx.AxisStyles.Centered); I only get to display de first X axis. Why I cant display nothing in the second one? Thanks
  4. 2 points
    When using jquery noConflict I get the following error: Undefined is not av function ka._AM e.create load_a onload First chart is visible, but the next is not. load_a contains the jquery script and it is called with <body onload="load_a();">. <script type="text/javascript"> var $j = jQuery.noConflict(); </script>
  5. 2 points
    Hi, I'm using a 2D Horizontal Zero Axis chart to league table some site stastics, my problem is the site names which are assigned to the axis are being cropped, how do I make the text area larger to accodate the whole site name. Thanks.
  6. 1 point
    I am guessing you are talking about the user interface when you select the Series menu. This is created dynamically, we do not use classes in this code but we try to get the color for AttributeX. I noticed we do not try to use the series tag so that could explain a discrepancy between the color in the menu and the series. This has been fixed and the fix will be included in our next drop. Regards, JuanC
  7. 1 point
    You can attach a handler to the gettip event and one of the fields will be the tooltip div, e.g. function onTipDiv(args) { var style = args.tooltipDiv.getAttribute("style"); args.tooltipDiv.setAttribute("style", style + ";background:#880015"); } chart1.on("gettip", onTipDiv); Hope this helps. JuanC
  8. 1 point
    We do not support using the "zoom" scrollbar on charts using multiple panes, actually we eve have code that tries to force the simple scrollbars in those situations. If you are ok with simple scrollbar, you can force them using the following code chart1.getZoom().setUseSimpleScrollBars(true); In our current builds (not made public yet) we are exploring an API that allows you to select a single pane or series to show in this "zoom" scrollbar, would this be something that helps you in your scenario? Can you tell us the version of jChartFX you are using and post sample code that duplicates the problem you are experiencing? Regards, JuanC
  9. 1 point
    So, as it turns out, this was due to the existence of the <base href="/"> tag used by JS MVC frameworks, which causes issues with SVG fills. Fixing it involved forcing the urls for fills to an absolute path that matched the full current url of the app.
  10. 1 point
    I have a chart using jChartfx that is rendered on a widget. This widget is resizeable. How do I resize the jchartfx chart as the widget is being resized? Code: @model ePortfolio.Models.WidgetViewModel @using System.Web.Script.Serialization; @{ var x = Model.GetWidgetUser(); } <li data-row="@x.data_row" data-col="@x.data_col" data-sizex="@x.data_sizex" data-sizey="@x.data_sizey" id="@x.WidgetId" style="border: solid"> @*<div data-role="navbar" class="widget-head" id="navcontainer"> @Html.DisplayFor(model => model, "WidgetHeader"); </div>*@ <div id="btn" style="overflow: no-content;width:100%;"> <div id="idRefresh" style="position: absolute; right:0px; top: 0px; display:inline;background:url(../../Content/images/refresh.gif) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"> </div> <div id="idResize" style="position: absolute; right:20px; top: 0px; display:inline;background:url(../../Content/images/resize.png) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"></div> <div id="idPin" style="position: absolute; right:40px; top: 0px; display:inline;background:url(../../Content/images/pin.png) no-repeat;width: 24px; height: 20px; text-indent: -9999em; margin: 8px 0 8px 4px; outline: none;"> </div> <div id="idText" style="position: absolute; right:50%; top: 20px; display:inline; height: 20px; "><h5>@Model.Widget.Title</h5></div> </div> <br /><br /><br /> <div style="overflow: auto;height:93%;"> <div id="ChartDiv" style="overflow: auto;height:288px;"></div> </div> </li> <script type="text/javascript" language="javascript"> var chart1; function LoadPieChart() { chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Pie); chart1.getAllSeries().getPointLabels().setVisible(true); var pieAttr = chart1.getAllSeries().getGalleryAttributes(); pieAttr.setLabelsInside(false); chart1.getAllSeries().getPointLabels().setFormat("%l %p%%"); chart1.getLegendBox().setVisible(false); var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"])); chart1.getAxisY().getDataFormat().setDecimals(2); chart1.getView3D().setEnabled(true); chart1.getAllSeries().getPointLabels().setVisible(true); //console.log("1: "+str) chart1.setDataSource(str); var data = chart1.getData(); data.setSeries(1); data.setPoints(10); chart1.getAllSeries().getPointLabels().setVisible(true); chart1.getAllSeries().getPointLabels().setAlignment(cfx.StringAlignment.NEAR); chart1.getLegendBox().setVisible(false); //chart1.getLegendBox().setWidth(50); //chart1.getLegendBox().setDock(cfx.DockArea.Right); //chart1.getLegendBox().setContentLayout(cfx.ContentLayout.Near); chart1.getPlotAreaMargin().setTop(0); chart1.getPlotAreaMargin().setBottom(0); chart1.getPlotAreaMargin().setRight(0); chart1.getPlotAreaMargin().setLeft(0); var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder); } $(function() { LoadPieChart(); }); $(window).resize(function() { if (chart1 != null) chart1.doUpdate(true); }); </script>
  11. 1 point
    We have some titles that are too long to fit on a single line. We can tell that the control is wrapping them onto the second line, but the vertical space dedicated to the title is not increased so you can only see a fraction of the second title line. Is there a way to auto-size the title box so that multiple lines are always visible? If not, is there another solution to this issue? Thanks in advance for your help!
  12. 1 point
    Good morning, I have an issue in that the tooltip stays visible when the chart itself is not visible anymore (after a swipe going to a different view) jchartfx is used on mobile device within the dojo framework. Is there a way to manually "hide" the tooltip of a chart? a method or something like this? our application is a bit more complex i guess so code pasting will not help
  13. 1 point
    Hi, I'm seeing a scrollbar (I've attached a screenshot) where I believe there shouldn't be one in IE11 (edge mode). All of the graphs are absolutely positioned, and have no padding. However, I still see the scrollbar. Ideally, I'd only see the scrollbar when the graph content is more than the div. PS I have a zip file working with this example, but it's quite large so I didn't post it. Please help out. Thanks, Jon
  14. 1 point
    I have a system that generates a chart on a page. The user can then update the chart settings using the new menu that is supplied in the latest release. Is there a way to retrieve the settings that have been set by the user so I can persist them somewhere and restore the page as the user configured next time the user returns to the page? TL;DR - Can I save menu changes?
  15. 1 point
    Hi, We are new to jchartfx and have a question. We have created a pie chart with the legend at the bottom and we need to re-size it to fit on the sidebar of our site but when we set the width of the div to anything less than 400px the legend disappears. Is there any way we can set the width to 300px with out losing the legend. Please see attached. Thanks Rich
  16. 1 point
    Hi, As can be seen from the attached picture, I have a chart that has 2 Y axis and has Autoscroll/ClientScroll enabled. However, that causes the Avg Yield series to show up twice. One for the bottom graph and one for the top one. the top one is fine since it accurately reflects the scroll graph's viewport. However the Green line in the middle of the graph which I believe is part of the scroll graph is unnecessary and causes confusion. Is there any way to suppress that. -Shishir
  17. 1 point
    I know that the CSS is applied to the chart after the API values are set. If we set a value for something like a series color via the API, then we apply a stylesheet that DOES NOT have that property in it, does the setting from the API remain or is it cleared out to default values?
  18. 1 point
    Hi there, I am using the chart with the DataGrid option so that I can see the data, which is great. However the datagrid has a scrollbar along the bottom, but it is disabled, can anyone suggest how to enable this so that I can scroll across the rows?
  19. 1 point
    Hello, I would like to know how to change the default color values of the charts. We have several pie charts and we would like the individual section colors to be different. According to the following thread: http://community.jchartfx.com/topic/293-css-vs-api-property-settings/ JuanC apparently mentioned that in future builds, all we would have to do is declare an array with the colors we would want to use (the last post in that thread). Is this possible now? If so, how do I do this? Thanks a lot! -Falkon
  20. 1 point
    Hello, I found a bug on a specific case, using cluster without legendbox. First, we activate Cluster, 5 series of severals points, disabling legendbox (we can have very long titles) All OK, it displays titles in front of series. If I hide some series, hen, it seems to not consider the hiding series to compute legend place, they are placed on same position, just hidden for the hidden series. 2 screenshots: All show : http://awesomescreenshot.com/00d409naa6 B,C,D hidden : http://awesomescreenshot.com/0e5409oofb Ex: HTML: <div id="graph" style="width:600px;height:400px;display:block;margin-top: 200px;"></div> JS (tested on 7.1.5044 and 7.2.5289): var chart1 = new cfx.Chart(); chart1.getView3D().setCluster(true); chart1.getView3D().setPerspective(40); chart1.getLegendBox().setVisible(false); var data = [ { a: 1, b: 2, c: 3, d: 2, e: 10,label:'A1' }, { a: 2, b: 3, c: 1, d: 3, e: 11,label: 'A2' }, { a: 1, b: 2, c: 3, d: 1, e: 30,label: 'A3' }, { a: 1, b: 3, c: 2, d: 2, e:40,label: 'A4' }, { a: 3, b: 2, c: 1, d: 3, e:10,label: 'A5' }, ]; chart1.setGallery(cfx.Gallery.Area); chart1.setDataSource(data); var ok = false; var f = function (){ ok = !ok; chart1.getSeries().getItem(1).setVisible(ok); chart1.getSeries().getItem(2).setVisible(ok); chart1.getSeries().getItem(3).setVisible(ok); setTimeout(f,2000 ); }; f(); chart1.create(document.getElementById('graph')); It automatically toggles hide/show for middle series, Hide/Show will be a manual action on screen, all series must be shown at start. Thank you for a quick patch!
  21. 1 point
    Hi all I download the zoom scrollbar example, everything works great,except the resize part, but I do see the example from below site works with firefox, but not work with IE9: http://www.jchartfx.com/api/Chart/PlotAreaMargin so my question: 1,what should I do if I want the example I download work 2, is it possible to make it work on IE9 or IE10? Thank you~
  22. 1 point
    Hi, how can i catch the click event on a partof a pie chart, and how to get the info whitch part was clicked? thanks for your help
  23. 1 point
    Downloaded the full jChartFX package a week ago (not licensed v7.2.5289), built a very simple gauge with animation enabled, works mostly. Notice in my script the needle value should be right at 82. Every time I refresh the page the needle varies a bit. It seems to just pick a random value around 82. If I hover over the needle it may be 79.0 one time, 80.95 the next, then 81.1...what the heck? I noticed, if I turn off animations, this doesn't happen, needle is exactly at 82 every time. I notice on slower devices like a phone (android), the need stops even lower, so around 60 - 70. So animation bug? Tested in Firefox and Chrome. Phone is android with chrome. All three are bad values when animation enabled. /** * Create a jChartFX radial gauge chart from a widget * @param {object} widget * @return {void} */ function radialGauge(widget) { // Chart Values var min = 65; var max = 100; var value = 82; var limit1 = 74; var limit2 = 82; var name = 'Test'; // New jChartFX Object var chart = new cfx.gauge.RadialGauge(); chart.setMainValue(value); // Titles var title = new cfx.gauge.Title(); chart.getTitles().add(title); title = chart.getTitles().getItem(0); title.setText(name); // Scale var scale = chart.getMainScale(); // Sections 1st var section = new cfx.gauge.ScaleSection(); section.setFrom(min); section.setTo(limit1); scale.getSections().add(section); // Sections 2nd section = new cfx.gauge.ScaleSection(); section.setFrom(limit1); section.setTo(limit2); scale.getSections().add(section); // Sections 3rd section = new cfx.gauge.ScaleSection(); section.setFrom(limit2); section.setTo(max); scale.getSections().add(section); scale.setMin(min); scale.setMax(max); // Animations chart.getAnimations().getLoad().setEnabled(true); // Display Chart chart.create('myChartDiv'); };
  24. 1 point
    Seems to be a major flaw in the hover popups for many charts...values are wrong. You can see an example right in the production docs, just look at http://support.softwarefx.com/jChartFX/article/2501235#!2501016and hover over that first "Sedan Production by Month" area chart, popups are showing values form the wrong months.
  25. 1 point
    Can anybody help with this problem? My co-worker and I have been stuck on this problem for quite some time now, and we need it for a client project. Also, it seems the link to the chart has changed. Below is the correct one: http://support.softwarefx.com/jchartFX/article/2601043#!2601280 Any help (even general direction) on this matter would be greatly appreciated.
  26. 1 point
    Hi, I've noticed that the tooltips don't appear on single-serie line charts if I disable the shadows series1.setGallery(cfx.Gallery.Lines); series1.getGalleryAttributes().setTemplate("LineBasic"); This happens on both IE10 and FE33. On the other hand, while working without tooltips on IE and FF, the code totally fails on jsfiddle. Any hints? Thanks var mychart = new cfx.Chart(); var titles = mychart.getTitles(); var title = new cfx.TitleDockable(); title.setText("title"); titles.add(title); mychart.getData().setSeries(1); mychart.getAxisY().getDataFormat().setDecimals(1); mychart.getLegendBox().setDock(cfx.DockArea.Bottom); var series1 = mychart.getSeries().getItem(0); var data = [ { "Anno": "2000", "% value": 0.32 }, { "Anno": "2001", "% value": 5.8 }, { "Anno": "2002", "% value": 9.3 }, { "Anno": "2003", "% value": 7.1 }, { "Anno": "2004", "% value": 7.4 }, { "Anno": "2005", "% value": 7.4 }, { "Anno": "2006", "% value": 8.9 }, { "Anno": "2007", "% value": 11.5 }, { "Anno": "2008", "% value": 13.95 }, { "Anno": "2009", "% value": 18.54 }, { "Anno": "2010", "% value": 17.39 }, { "Anno": "2011", "% value": 18.05 }, { "Anno": "2012", "% value": 21.25 }, { "Anno": "2013", "% value": 20.74 }, ]; mychart.setDataSource(data); var divHolder = document.getElementById('ChartDiv1'); //series1.setGallery(cfx.Gallery.Lines); //series1.getGalleryAttributes().setTemplate("LineBasic"); mychart.create(divHolder);
  27. 1 point
    The title pretty much says it all. On charts with 2 or more series' the tooltips work correctly as you'd expect. However on single-series charts hovering over points will not display the tooltip. Is there a way to change this? Thanks
  28. 1 point
    Hi, I would like to adjust the charts height after it has been drawn. For example, if I output a chart and the user decided that the x axis labels were making the chart unreadable. Then I want to offer a text box that resizes the containing div and then gets the chart repainted into it. However the best I can get is that the chart is created as I want it however an old chart pane is visible but empty. This is the code I am currently using: function setHeightOfChart() { document.getElementById("ChartDiv1").style.height = ($(window).innerHeight() * (document.getElementById("CHARTDEPTH").value / 100)) + "px"; chart1.updateSizeNow(); chart1.create(document.getElementById("ChartDiv1")); }
  29. 1 point
    I am currently creating an analytics webapp and evaluating jChartFX for it. Most of the things we need can be done through the API but there is a feature that we need but could not figure out whether it would be possible or not: The task would be to display a line chart with multiple series that does not have data for all points in all series. The required behaviour would be to not to show that section of the series where data is not available and show it if data is present for it. Is there a way to do this? do you plan to add this functionality? The best way to do this would be a special value in the series similar to a not_a_number notation in the json for the missing data like: E.G. : using one of the samples from the API, I would like to pass data which is not complete for all series, and has NaN (which I know is not legal in javascript) as sign of missing data: var items = [{ "Month": "Jan", "White": 12560, "Red": 23400, "Sparkling": 34500 }, { "Month": "Feb", "White": NaN -- or should be null ?? "Red": 21000, "Sparkling": 38900 }, { "Month": "Mar", "White": 16700, "Red": 17000, "Sparkling": 42100 }, { "Month": "Apr", "White": 12000, "Red": 19020, "Sparkling": 43800 }]; Is there any mechanism of API calls that can do this or mimic this behavior by turning off sections of a line? thanks, Mat
  30. 1 point
    Hello all, I have a issue while creating a pie chart. whenever the length of the label of legend increases the size of the pie chart decreases to maintain the space between the pie chart and legend. how can i fix the size of the pie chart so that it does not resize according to the data.
  31. 1 point
    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!!
  32. 1 point
    I am trying to create a chart with time displayed on the XAxis. I have set the format to HH:mm:ss on the axis and I have data from the last 2 minutes to display in the chart but when the chart renders the tooltips have the properly formatted time value in but the xaxis is blank. Am I missing something? GenerateChartData(); chart1 = new cfx.Chart(); chart1.setGallery(cfx.Gallery.Bar); chart1.getView3D().setEnabled(true); var fields = chart1.getDataSourceSettings().getFields(); //Create and add the temperature field var temperatureField = new cfx.FieldMap(); temperatureField.setName('temperature'); temperatureField.setUsage(cfx.FieldUsage.Value); fields.add(temperatureField); //Create and add the pressure field var pressureField = new cfx.FieldMap(); pressureField.setName('pressure'); pressureField.setUsage(cfx.FieldUsage.Value); fields.add(pressureField); //Create and add the recordTimeField (for the x axis) var recordTimeField = new cfx.FieldMap(); recordTimeField.setName('recordTime'); recordTimeField.setUsage(cfx.FieldUsage.XValue); fields.add(recordTimeField); chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date); chart1.getAxisX().getLabelsFormat().setCustomFormat("HH:mm:ss"); chart1.getAxisX().getTitle().setText("Log Time"); chart1.getAxisX().setStep(1); //chart1.getAxisX().setStaggered(true); chart1.setDataSource(data); var titles = chart1.getTitles(); var title = new cfx.TitleDockable(); title.setText("Pressure and Temperature over Time"); titles.add(title); chart1.getAllSeries().getPointLabels().setVisible(false); var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder); The data generated for the chart looks like this [{"recordTime":"2014-07-03T11:02:29.031Z","temperature":159.79,"pressure":78},{"recordTime":"2014-07-03T11:02:30.033Z","temperature":116.2,"pressure":34},{"recordTime":"2014-07-03T11:02:31.034Z","temperature":123.73,"pressure":34},{"recordTime":"2014-07-03T11:02:32.034Z","temperature":132.29,"pressure":90},{"recordTime":"2014-07-03T11:02:33.035Z","temperature":134.95,"pressure":88},...] Even when I reduce the number of points down I still cannot get any values to appear on the xAxis, has anyone come across this or tried to do this before?
  33. 1 point
    Hi, I have the following dataset var pItems = [{"Xdata":305, "Ydata":6},{"Xdata":1196, "Ydata":40}, {"Xdata":1889, "Ydata":2}, {"Xdata":1995, "Ydata":16}, {"Xdata":2006, "Ydata":113}, {"Xdata":2071, "Ydata":1}, {"Xdata":3343, "Ydata":11}, {"Xdata":3631, "Ydata":69}, {"Xdata":3697, "Ydata":913}, {"Xdata":5555, "Ydata":1}]; which I use to create a bar chart with, ChartDetail = new cfx.Chart(); ChartDetail.getData().setSeries(1); ChartDetail.getDataSourceSettings().getFields().clear(); ChartDetail.setDataSource(pItems); xAxis.setStep(1); xAxis.setLabelValue(1); ChartDetail.setGallery(cfx.Gallery.Bar); var sb = new cfx.SimpleBorder(); ChartDetail.setBorder(sb); ChartDetail.getAllSeries().setMarkerShape(cfx.MarkerShape.None); ChartDetail.getLegendBox().setVisible(false); ChartDetail.getAxisY().setAutoScale(true); ChartDetail.getAxisY().getGrids().getMajor().setVisible(true); ChartDetail.getAxisX().getGrids().getMajor().setVisible(true); ChartDetail.getAxisX().setStyle(ChartDetail.getAxisX().getStyle() | cfx.AxisStyles.ShowEnds); var divHolder = document.getElementById(pDivDetail); ChartDetail.create(divHolder); However, the labels on the xaxis are somehow rounded such that 305 becomes 400, 1196 becomes 1200 etc. Additionally, some labels are not displayed, i.e. 1889, 2006 and 3631. Any ideas how to fix this? Any help much appreciated.
  34. 1 point
    Hello, I would like to know if there is a way to control the order of the items in the legend box. Thanks!
  35. 1 point
    Hello, Where can I access to the width and color of the grid lines at the background? Thank you.
  36. 1 point
    I can't seem to get the animation to work on an area chart. Where is the proper place/time to place the animation activation command? I populate a chart and create an object and then allow users to select different data series supplied from ajax. I attach the new data using setDataSource and it updates the chart but the data just appears. Doesn't animate.
  37. 1 point
    Hi, I'm creating a Gantt chart to display the start and end times of parallel processes which may each span more than 24 hrs. The horizontal (Y-axis) is representing time (as HH:mm) and I want to use interlacing to separate each day (AxisY.Step = 1). The problem is that the tick marks are offset by 1 hr, showing 01:00 for each day. The interlacing also aligns to the 01:00 tickmarks instead of midnight (00:00). The series points are plotted correctly, it is just the labelling and interlacing that are offset. Just a thought: I am getting the data via json and so I have to convert it to UTC in my service. My location is in time zone +1 (GMT + DST). Thanks
  38. 1 point
    I can successfully draw 2 lines with this data:[{"Date":"04/16","13-022113-01":11.11},{"Date":"04/24","13-022113-01":5.51},{"Date":"05/01","13-022113-01":5.19},{"Date":"05/14","13-022113-01":5.07,"13-020866-01":246.46},{"Date":"05/18","13-022113-01":5.56,"13-020866-01":249.82},{"Date":"05/19","13-022113-01":5.23,"13-020866-01":1268.8},{"Date":"06/03","13-022113-01":3.66,"13-020866-01":166.01},{"Date":"06/09","13-022113-01":3.55,"13-020866-01":161.98},{"Date":"06/16","13-022113-01":3.65,"13-020866-01":161.05}] However, I don't always have 2 items for each date. how can I draw them. Here's the real data with different numbers of items: [{"Date":"04/16","13-022113-01":11.11,"13-022113-01":37.65,"13-022113-01":5.69},"Date":"04/24","13-022113-01":5.51,"13-022113-01":5.88},"Date":"05/01","13-022113-01":5.19},"Date":"05/14","13-022113-01":5.07,"13-020866-01":246.46,"13-020866-01":234.5},"Date":"05/18","13-022113-01":5.56,"13-020866-01":249.82,"13-020866-01":247.31},"Date":"05/19","13-022113-01":5.23,"13-020866-01":1268.8,"13-020866-01":243.17},"Date":"06/03","13-022113-01":3.66,"13-020866-01":166.01,"13-020866-01":166.63},"Date":"06/09","13-022113-01":3.55,"13-020866-01":161.98,"13-020866-01":161.3},"Date":"06/16","13-022113-01":3.65,"13-022113-01":3.52,"13-022113-01":3.56,"13-020866-01":161.05,"13-020866-01":162.18}] Here's my code: <script type="text/javascript"> var chart1 = new cfx.Chart(); var multiplePerformanceChart = new cfx.Chart(); var createdSP = false; var createdMP = false; var items; function loadChart() { chart1.setGallery(cfx.Gallery.Lines); var titles = chart1.getTitles(); var title = new cfx.TitleDockable(); title.setText($("#orderNumberToLookup").val()); titles.clear(); titles.add(title); chart1.getAxisY().getTitle().setText("processing time(min)"); chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date); chart1.getAxisX().getLabelsFormat().setCustomFormat("MMM;MMM/dd"); $.ajax({ type: 'POST', url: '@Url.Action("GetPerformanceByDateRange", "AdminReports")', data: JSON.stringify({ sFromDate: $("#fromDatepicker").val(), sToDate: $("#toDatepicker").val(), sDrawingTemplate: $("#drawingTemplateToLookup").val(), sPartToCreate: $("#partsToCreateLookup").val(), sOutputFormat: $("#outputFormatToLookup").val(), sOrderNumber: $("#orderNumberToLookup").val() }), dataType: 'json', contentType: 'application/json; charset=utf-8', cache: false, async: false, success: function (response) { var returnedData = JSON.parse(response); chart1.setDataSource(returnedData); }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); if (createdSP == false) { var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder); createdSP = true; } else { chart1.update(); } }; function loadMultiplePerformanceChart() { multiplePerformanceChart.setGallery(cfx.Gallery.Lines); var titles = multiplePerformanceChart.getTitles(); var title = new cfx.TitleDockable(); title.setText($("#orderNumbersToLookup").val()); titles.clear(); titles.add(title); multiplePerformanceChart.getAxisY().getTitle().setText("processing time(min)"); multiplePerformanceChart.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date); multiplePerformanceChart.getAxisX().getLabelsFormat().setCustomFormat("MMM;MMM/dd"); $.ajax({ type: 'POST', url: '@Url.Action("GetMultiplePerformanceByDateRange", "AdminReports")', data: JSON.stringify({ sFromDate: $("#fromDatepicker1").val(), sToDate: $("#toDatepicker1").val(), sDrawingTemplate: $("#drawingTemplateToLookup1").val(), sPartToCreate: $("#partsToCreateLookup1").val(), sOutputFormat: $("#outputFormatToLookup1").val(), sOrderNumbers: $("#orderNumbersToLookup").val() }), dataType: 'json', contentType: 'application/json; charset=utf-8', cache: false, async: false, success: function (response) { var returnedData = JSON.parse(response); multiplePerformanceChart.setDataSource(returnedData); }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); if (createdMP == false) { var divHolder = document.getElementById('MultiplePerformanceChartDiv'); multiplePerformanceChart.create(divHolder); createdMP = true; } else { multiplePerformanceChart.update(); } } $(document).ready(function () { $(function () { $("#getMultiplePerformances").click(function () { loadMultiplePerformanceChart(); }); $("#getSinglePerformance").click(function () { loadChart(); }); $("#accordion").accordion({ heightStyle: "content", collapsible: true }); $("#fromDatepicker").datepicker(); $("#toDatepicker").datepicker(); $("#fromDatepicker1").datepicker(); $("#toDatepicker1").datepicker(); // loadChart(); // loadMultiplePerformanceChart(); }); }); </script> <div id="accordion" > <h3> Show single order performance by date range</h3> <div id="ShowSinglePerformanceByDateRange"> @* @using (Html.BeginForm("ShowPerformanceByDateRange", "AdminReports", FormMethod.Get)) {*@ <div class="span6 " id ="MSDInput"> @Html.ValidationSummary(true) <div class="row-fluid"> <label class="span4" >Order Number:</label> @Html.TextBoxFor(m => m.OrderNumberToLookup, new { id = "orderNumberToLookup", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <label class="span4" >Parts to Create:</label> @Html.DropDownListFor(m => m.PartToCreateToLookup, Model.GetPartsToCreate(), new { @class = "span8", id = "partsToCreateLookup" }) </div> <div class="row-fluid"> <label class="span4" >Drawing Template:</label> @Html.DropDownListFor(m => m.DrawingTemplateToLookup, Model.GetDrawingTemplates(), new { @class = "span8", id = "drawingTemplateToLookup" }) </div> <div class="row-fluid"> <label class="span4" >Output Format:</label> @Html.DropDownListFor(m => m.OutputFormatToLookup, Model.GetOutputFormats(), new { @class = "span8", id = "outputFormatToLookup" }) </div> <div class="row-fluid"> <label class="span4" >From Date:</label> @Html.TextBoxFor(m => m.FromDate, new { id = "fromDatepicker", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <label class="span4" >To Date:</label> @Html.TextBoxFor(m => m.ToDate, new { id = "toDatepicker", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <input type="submit" value="Get Jobs" class="btn btn-success" id="getSinglePerformance" /> @* <input type="submit" value="Get Jobs" class="btn btn-success" id="getSinglePerformance" onclick="location.href='@Url.Action("ShowPerformanceByDateRange" , "AdminReports" , new { sFromDate=Model.FromDate, sToDate= Model.ToDate, sDrawingTemplate= Model.DrawingTemplateToLookup, sPartToCreate= Model.PartToCreateToLookup, sOutputFormat=Model.OutputFormatToLookup, sOrderNumber=Model.OrderNumberToLookup})'" /> *@ </div> </div> <div class="row-fluid"> <div class="span8" id="ChartDiv" style="width:500px;height:375px;display:inline-block"></div> <div class="span4"> </div> </div> @*}*@ </div> <h3> Show multiple orders performance by date range</h3> <div id="ShowMultiplePerformanceByDateRange"> @* @using (Html.BeginForm("ShowMultiplePerformanceByDateRange", "AdminReports", FormMethod.Get)) {*@ <div class="span6 " id ="multiplePerformanceInput"> @Html.ValidationSummary(true) <div class="row-fluid"> <label class="span4" >Order Number:</label> @Html.TextArea("Orders", new { id = "orderNumbersToLookup", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <label class="span4" >Parts to Create:</label> @Html.DropDownListFor(m => m.PartToCreateToLookup, Model.GetPartsToCreate(), new { @class = "span8", id = "partsToCreateLookup1" }) </div> <div class="row-fluid"> <label class="span4" >Drawing Template:</label> @Html.DropDownListFor(m => m.DrawingTemplateToLookup, Model.GetDrawingTemplates(), new { @class = "span8", id = "drawingTemplateToLookup1" }) </div> <div class="row-fluid"> <label class="span4" >Output Format:</label> @Html.DropDownListFor(m => m.OutputFormatToLookup, Model.GetOutputFormats(), new { @class = "span8", id = "outputFormatToLookup1" }) </div> <div class="row-fluid"> <label class="span4" >From Date:</label> @Html.TextBoxFor(m => m.FromDate, new { id = "fromDatepicker1", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <label class="span4" >To Date:</label> @Html.TextBoxFor(m => m.ToDate, new { id = "toDatepicker1", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <input type="submit" value="Get Jobs" class="btn btn-success" id="getMultiplePerformances"/> </div> </div> <div class="row-fluid"> <div class="span8" id="MultiplePerformanceChartDiv" style="width:500px;height:375px;display:inline-block"></div> <div class="span4"> </div> </div> @*}*@ </div> </div> Thanks in advance
  39. 1 point
    I can successfully draw 2 lines with this data:[{"Date":"04/16","13-022113-01":11.11},{"Date":"04/24","13-022113-01":5.51},{"Date":"05/01","13-022113-01":5.19},{"Date":"05/14","13-022113-01":5.07,"13-020866-01":246.46},{"Date":"05/18","13-022113-01":5.56,"13-020866-01":249.82},{"Date":"05/19","13-022113-01":5.23,"13-020866-01":1268.8},{"Date":"06/03","13-022113-01":3.66,"13-020866-01":166.01},{"Date":"06/09","13-022113-01":3.55,"13-020866-01":161.98},{"Date":"06/16","13-022113-01":3.65,"13-020866-01":161.05}] However, I don't always have 2 items for each date. how can I draw them. Here's the real data with different numbers of items: [{"Date":"04/16","13-022113-01":11.11,"13-022113-01":37.65,"13-022113-01":5.69},"Date":"04/24","13-022113-01":5.51,"13-022113-01":5.88},"Date":"05/01","13-022113-01":5.19},"Date":"05/14","13-022113-01":5.07,"13-020866-01":246.46,"13-020866-01":234.5},"Date":"05/18","13-022113-01":5.56,"13-020866-01":249.82,"13-020866-01":247.31},"Date":"05/19","13-022113-01":5.23,"13-020866-01":1268.8,"13-020866-01":243.17},"Date":"06/03","13-022113-01":3.66,"13-020866-01":166.01,"13-020866-01":166.63},"Date":"06/09","13-022113-01":3.55,"13-020866-01":161.98,"13-020866-01":161.3},"Date":"06/16","13-022113-01":3.65,"13-022113-01":3.52,"13-022113-01":3.56,"13-020866-01":161.05,"13-020866-01":162.18}] Here's my code: <script type="text/javascript"> var chart1 = new cfx.Chart(); var multiplePerformanceChart = new cfx.Chart(); var createdSP = false; var createdMP = false; var items; function loadChart() { chart1.setGallery(cfx.Gallery.Lines); var titles = chart1.getTitles(); var title = new cfx.TitleDockable(); title.setText($("#orderNumberToLookup").val()); titles.clear(); titles.add(title); chart1.getAxisY().getTitle().setText("processing time(min)"); chart1.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date); chart1.getAxisX().getLabelsFormat().setCustomFormat("MMM;MMM/dd"); $.ajax({ type: 'POST', url: '@Url.Action("GetPerformanceByDateRange", "AdminReports")', data: JSON.stringify({ sFromDate: $("#fromDatepicker").val(), sToDate: $("#toDatepicker").val(), sDrawingTemplate: $("#drawingTemplateToLookup").val(), sPartToCreate: $("#partsToCreateLookup").val(), sOutputFormat: $("#outputFormatToLookup").val(), sOrderNumber: $("#orderNumberToLookup").val() }), dataType: 'json', contentType: 'application/json; charset=utf-8', cache: false, async: false, success: function (response) { var returnedData = JSON.parse(response); chart1.setDataSource(returnedData); }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); if (createdSP == false) { var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder); createdSP = true; } else { chart1.update(); } }; function loadMultiplePerformanceChart() { multiplePerformanceChart.setGallery(cfx.Gallery.Lines); var titles = multiplePerformanceChart.getTitles(); var title = new cfx.TitleDockable(); title.setText($("#orderNumbersToLookup").val()); titles.clear(); titles.add(title); multiplePerformanceChart.getAxisY().getTitle().setText("processing time(min)"); multiplePerformanceChart.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date); multiplePerformanceChart.getAxisX().getLabelsFormat().setCustomFormat("MMM;MMM/dd"); $.ajax({ type: 'POST', url: '@Url.Action("GetMultiplePerformanceByDateRange", "AdminReports")', data: JSON.stringify({ sFromDate: $("#fromDatepicker1").val(), sToDate: $("#toDatepicker1").val(), sDrawingTemplate: $("#drawingTemplateToLookup1").val(), sPartToCreate: $("#partsToCreateLookup1").val(), sOutputFormat: $("#outputFormatToLookup1").val(), sOrderNumbers: $("#orderNumbersToLookup").val() }), dataType: 'json', contentType: 'application/json; charset=utf-8', cache: false, async: false, success: function (response) { var returnedData = JSON.parse(response); multiplePerformanceChart.setDataSource(returnedData); }, error: function (jqXHR, textStatus, errorThrown) { alert(errorThrown); } }); if (createdMP == false) { var divHolder = document.getElementById('MultiplePerformanceChartDiv'); multiplePerformanceChart.create(divHolder); createdMP = true; } else { multiplePerformanceChart.update(); } } $(document).ready(function () { $(function () { $("#getMultiplePerformances").click(function () { loadMultiplePerformanceChart(); }); $("#getSinglePerformance").click(function () { loadChart(); }); $("#accordion").accordion({ heightStyle: "content", collapsible: true }); $("#fromDatepicker").datepicker(); $("#toDatepicker").datepicker(); $("#fromDatepicker1").datepicker(); $("#toDatepicker1").datepicker(); // loadChart(); // loadMultiplePerformanceChart(); }); }); </script> <div id="accordion" > <h3> Show single order performance by date range</h3> <div id="ShowSinglePerformanceByDateRange"> @* @using (Html.BeginForm("ShowPerformanceByDateRange", "AdminReports", FormMethod.Get)) {*@ <div class="span6 " id ="MSDInput"> @Html.ValidationSummary(true) <div class="row-fluid"> <label class="span4" >Order Number:</label> @Html.TextBoxFor(m => m.OrderNumberToLookup, new { id = "orderNumberToLookup", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <label class="span4" >Parts to Create:</label> @Html.DropDownListFor(m => m.PartToCreateToLookup, Model.GetPartsToCreate(), new { @class = "span8", id = "partsToCreateLookup" }) </div> <div class="row-fluid"> <label class="span4" >Drawing Template:</label> @Html.DropDownListFor(m => m.DrawingTemplateToLookup, Model.GetDrawingTemplates(), new { @class = "span8", id = "drawingTemplateToLookup" }) </div> <div class="row-fluid"> <label class="span4" >Output Format:</label> @Html.DropDownListFor(m => m.OutputFormatToLookup, Model.GetOutputFormats(), new { @class = "span8", id = "outputFormatToLookup" }) </div> <div class="row-fluid"> <label class="span4" >From Date:</label> @Html.TextBoxFor(m => m.FromDate, new { id = "fromDatepicker", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <label class="span4" >To Date:</label> @Html.TextBoxFor(m => m.ToDate, new { id = "toDatepicker", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <input type="submit" value="Get Jobs" class="btn btn-success" id="getSinglePerformance" /> @* <input type="submit" value="Get Jobs" class="btn btn-success" id="getSinglePerformance" onclick="location.href='@Url.Action("ShowPerformanceByDateRange" , "AdminReports" , new { sFromDate=Model.FromDate, sToDate= Model.ToDate, sDrawingTemplate= Model.DrawingTemplateToLookup, sPartToCreate= Model.PartToCreateToLookup, sOutputFormat=Model.OutputFormatToLookup, sOrderNumber=Model.OrderNumberToLookup})'" /> *@ </div> </div> <div class="row-fluid"> <div class="span8" id="ChartDiv" style="width:500px;height:375px;display:inline-block"></div> <div class="span4"> </div> </div> @*}*@ </div> <h3> Show multiple orders performance by date range</h3> <div id="ShowMultiplePerformanceByDateRange"> @* @using (Html.BeginForm("ShowMultiplePerformanceByDateRange", "AdminReports", FormMethod.Get)) {*@ <div class="span6 " id ="multiplePerformanceInput"> @Html.ValidationSummary(true) <div class="row-fluid"> <label class="span4" >Order Number:</label> @Html.TextArea("Orders", new { id = "orderNumbersToLookup", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <label class="span4" >Parts to Create:</label> @Html.DropDownListFor(m => m.PartToCreateToLookup, Model.GetPartsToCreate(), new { @class = "span8", id = "partsToCreateLookup1" }) </div> <div class="row-fluid"> <label class="span4" >Drawing Template:</label> @Html.DropDownListFor(m => m.DrawingTemplateToLookup, Model.GetDrawingTemplates(), new { @class = "span8", id = "drawingTemplateToLookup1" }) </div> <div class="row-fluid"> <label class="span4" >Output Format:</label> @Html.DropDownListFor(m => m.OutputFormatToLookup, Model.GetOutputFormats(), new { @class = "span8", id = "outputFormatToLookup1" }) </div> <div class="row-fluid"> <label class="span4" >From Date:</label> @Html.TextBoxFor(m => m.FromDate, new { id = "fromDatepicker1", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <label class="span4" >To Date:</label> @Html.TextBoxFor(m => m.ToDate, new { id = "toDatepicker1", type = "text", style = "margin-top:10px" }) </div> <div class="row-fluid"> <input type="submit" value="Get Jobs" class="btn btn-success" id="getMultiplePerformances"/> </div> </div> <div class="row-fluid"> <div class="span8" id="MultiplePerformanceChartDiv" style="width:500px;height:375px;display:inline-block"></div> <div class="span4"> </div> </div> @*}*@ </div> </div> Thanks in advance
  40. 1 point
    I need vertical annotations on my bar chart, but jChartFX annotations seems to be broken. Check out the below jsfiddle http://jsfiddle.net/Nte6P/ Uncomment line 47 to see the error. The documentation for Annotations is also broken. Cannot see any members. Any idea how to get vertical annotations on my bars using jChartFX?
  41. 1 point
    is there anyway to move legend to top right of the chart without using LegendTitle in jcharts.axischarts?
  42. 1 point
    Hi I have a bit unusual data source: items = [ { "Date": "11 Jun", "Crew A": 500, "Crew B": 600 } , { "Date": "10 Jun", "Crew A": 550, "Crew B": 650 } , { "Date": "9 Jun", "Unknown": 700, "Unknown": 500 } ]; I don't see last bars on the chart with "Unknown" key What I did wrong?
  43. 1 point
    Hi, In your other charting components you have a copy to clipboard feature. Is that available at all in jChartFX? Regards Phil
  44. 1 point
    Hello, I'm working on getting a treemap chart working and what I want to do is base the size of the elements in the treemap based on series 0, and color based on series 1. However, it seems that basing the color (via condition) is using some other number (calculation maybe?) done inside the treemap code, or maybe it's ignoring setdataelement() function altogether? Removing the condition statements puts in the "normal" colors as defined in the css. Setting setDataElement (in the conditional attributes) to either 0 or 1 yields the same result (everything falls in the "green" color). As you can see in the data, series 1 has values that fall into the conditional attribute ranges for green, yellow and red. Here is the code: chart1 = new cfx.Chart(); // Set green for percentages greater than 2%; percentage is in series 1 var condition1 = new cfx.ConditionalAttributes(); condition1.getCondition().setDataElement(1); condition1.getCondition().setFrom(.02) condition1.setColor("#008000"); chart1.getConditionalAttributes().add(condition1); // Set yellow for percentages between -2% and 2%; percentage is in series 1 var condition2 = new cfx.ConditionalAttributes(); condition2.getCondition().setDataElement(1); condition2.getCondition().setFrom(0); condition2.getCondition().setTo(.02); condition2.getCondition().setToOpen(true); condition2.setColor("#FFFF00"); chart1.getConditionalAttributes().add(condition2); // Set red for percentages less than -2%; percentage is in series 1 var condition3 = new cfx.ConditionalAttributes(); condition3.getCondition().setDataElement(1); condition3.getCondition().setTo(0); condition3.getCondition().setToOpen(true); condition3.setColor("#FF0000"); chart1.getConditionalAttributes().add(condition3); // Data; 4 series var data = chart1.getData(); data.setItem(0, 0, 175); data.setItem(1, 0, -0.002); data.setItem(2, 0, 22); data.setItem(3, 0, 0.737); data.setItem(0, 1, 152); data.setItem(1, 1, -0.010); data.setItem(2, 1, 19); data.setItem(3, 1, 0.484); data.setItem(0, 2, 115); data.setItem(1, 2, -0.11); data.setItem(2, 2, 14); data.setItem(3, 2, -1.325); data.setItem(0, 3, 684); data.setItem(1, 3, -0.040); data.setItem(2, 3, 8); data.setItem(3, 3, -0.051); var treeMap = new cfx.treemap.TreeMap(); chart1.setGalleryAttributes(treeMap); chart1.getSeries().getItem(0).setVisible(true); chart1.getSeries().getItem(0).bringToFront(); chart1.getSeries().getItem(1).setVisible(false); chart1.getSeries().getItem(2).setVisible(false); chart1.getSeries().getItem(3).setVisible(false); var divHolder = document.getElementById('ChartDiv'); chart1.create(divHolder);
  45. 1 point
    Hello, Is it possible to change the colour of a axis tittle? Thanks in advance
×