Jump to content
JChartFX Community

Search the Community

Showing results for tags 'jchartfx'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • jChartFX
    • General Questions
    • jQuery/jQuery UI
    • Styling and Aesthetics

Calendars

There are no results to display.


Found 7 results

  1. JChartFX and JQuery

    I am getting a JavaScript issue around the JChartFx and JQuery. I am using the Jquery 3.3.1 and JChartFX 7.4.5649. The issue only happens when running in IE 11 but in Chrome and Firefox it works fine. I am not sure if updating to the next version will fix this issue or not. I am guessing that i need to rollback the version of JQuery or this issue is related to something else. One more thing to add to this. The issue appears to break in the jchartfx.system.js file. I am not sure if that is the exact place but according to Visual Studio that is where it is breaking on it. I just wanted to add that in here as well to give you the most information that i can give. Last note. It appears that you cant min the JChartFx files as it will break in IE 11. Not sure why that happens but i pulled the files out of the min folder and just referenced the files and it appears to be working like it should. So this is just an FYI at this point as the issue appears to be resolved.
  2. I currently use jchartFX version 7.5.5962.21446 . What version of jQuery do you recommend using for this version of jchartFX? What about 7.5.6127?
  3. Date(s) are 1 day behind

    Hi I'm experiencing an issue with bar charts (it might affect other charts too). In short, a date formatted like this: "2017-11-29T00:00:00.000Z" is displayed as "Nov-28". If I change the date to "2017-11-29T13:00:00.000Z" it correctly displays as "Nov-29". HTML ============================================================= <!DOCTYPE html> <html> <head> <title>Title of the document</title> <script src="jchartfx/jquery/jquery-latest.js?v=1513269751805"></script> <script src="jchartfx/jquery/jquery-ui.js?v=1513269751805"></script> <script src="jchartfx/js/jchartfx.system.js?v=1513269751805"></script> <script src="jchartfx/js/jchartfx.coreVector.js?v=1513269751805"></script> <script src="jchartfx/js/jchartfx.coreVector3d.js?v=1513269751805"></script> <script src="jchartfx/js/jchartfx.advanced.js?v=1513269751805"></script> <script src="jchartfx/js/jchartfx.gauge.js?v=1513269751805"></script> <script src="jchartfx/motifs/jchartfx.motif.js?v=1513269751805"></script> <script src="jchartfx/js/jchartfx.data.js?v=1513269751805"></script> <script src="jchartfx/js/jchartfx.userInterface.js?v=1513269751805"></script> <script src="jchartfx.js"></script> <link rel="stylesheet" type="text/css" href="jchartfx/jquery/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="jchartfx/styles/jchartfx.userInterface.css" /> <link rel="stylesheet" type="text/css" href="jchartfx/styles/Attributes/jchartfx.attributes.css" /> <link rel="stylesheet" type="text/css" href="jchartfx/styles/Palettes/jchartfx.palette.css" /> </head> <body> <div id="div1" style="width:600px;height:260px;left:0px;top:83px;position:absolute;"></div> <script> $(document).ready(function(){ createBarChart(chartParams, divID); }); </script> </body> </html> JS ========================================================= var chartParams = { "CHART_CD":"A3", "DESCRIPTION":"ABC Graph", "CHART_GROUP_CD":"CSH-FCST", "TYPE":"BAR", "XAXIS_LBL":"Forecasted Payments/Receipts", "YAXIS_LBL":"", "LEGEND_POS":"10", "CSS_STYLE":"width:850px;height:210px;left:200px;top:45px", "JAVA_CLASS":"", "LABEL_CD":"Forecasted Payments/Receipts", "CHART_DATA":[ { "SCALE":1000, "Pays":2335573, "Recs":200001, "VALUE_DT":"2017-11-29T00:00:00.000Z" }, { "SCALE":1000, "Pays":5000, "Recs":6005000, "VALUE_DT":"2017-11-30T00:00:00.000Z" }, { "SCALE":1000, "Pays":0, "Recs":124411, "VALUE_DT":"2017-12-01T00:00:00.000Z" }, { "SCALE":1000, "Pays":9000000, "Recs":0, "VALUE_DT":"2017-12-05T00:00:00.000Z" }, { "SCALE":1000, "Pays":0, "Recs":5000000, "VALUE_DT":"2017-12-06T00:00:00.000Z" }, { "SCALE":1000, "Pays":0, "Recs":1000000, "VALUE_DT":"2017-12-21T00:00:00.000Z" }, { "SCALE":1000, "Pays":0, "Recs":457, "VALUE_DT":"2017-12-28T00:00:00.000Z" }, { "SCALE":1000, "Pays":0, "Recs":47686, "VALUE_DT":"2018-01-01T00:00:00.000Z" } ], "CHART_URL_DATA":[ ] }; var divID = "div1"; var chartListing = new Array(); function setTitle(chartObject, chartData, titleText, dockLoc) { var title = new cfx.TitleDockable(); titleText = getVarValue(chartObject, chartData, "TITLETEXT", titleText, false); title.setText(titleText); title.setDock(dockLoc); chartObject.getTitles().add(title); for(var d=0; d<chartData.length;d++) { var titleText = chartData[d].TITLETEXT; if(typeof titleText !== "undefined") delete chartData[d].TITLETEXT; } } function setLegend(chartObject, legendPos) { var legendVisibleFlag = true; if(legendPos == 0) { legendVisibleFlag = false; } chartObject.getLegendBox().setVisible(legendVisibleFlag); chartObject.getLegendBox().setWidth(legendPos); } function getVarValue(chart, chartData, varName, defaultValue, showFlag) { var newVarValue = defaultValue; var activateShowHideFlag = false; try { newVarValue = chartData[0][varName]; activateShowHideFlag = true; } catch (error) {} if (typeof newVarValue === 'undefined') { newVarValue = defaultValue; activateShowHideFlag = false; } try { if(activateShowHideFlag) { var seriesCount = chart.getSeries().getCount(); for(var a=0; a<seriesCount; a++) { var seriesName = chart.getSeries().getItem(a).getText(); if(varName == seriesName) chart.getSeries().getItem(a).setVisible(showFlag); } } } catch (error) {} return newVarValue; } function createBarChart(chartParams, divID) { var chartData = chartParams["CHART_DATA"]; var chartObject = new cfx.Chart(); chartObject.setDataSource(chartData); chartObject.setGallery(cfx.Gallery.Bar); chartObject.getAllSeries().getPointLabels().setVisible(false); chartObject.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date); chartObject.getAxisX().getLabelsFormat().setCustomFormat("dd-MMM"); var stepValue = chartData[0]["STEPVALUE"]; if (typeof stepValue != 'undefined') { stepValue = getVarValue(chartObject, chartData, "STEPVALUE", 1, false); chartObject.getAxisX().setStep(stepValue); } chartObject.getAxisX().setLabelAngle(45); var scaleValue = getVarValue(chartObject, chartData, "SCALE", 1, false); chartObject.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number); chartObject.getAxisY().setScaleUnit(scaleValue); var zoomValue = getVarValue(chartObject, chartData, "ZOOM", false, false); chartObject.getAxisX().setAutoScroll(zoomValue); chartObject.getAxisX().setClientScroll(zoomValue); var chartId = chartParams["CHART_CD"]; if(chartId == "MDM-A21") { var minValue = getVarValue(chartObject, chartData, "MINVALUE", 0, false); var maxValue = getVarValue(chartObject, chartData, "MAXVALUE", 0, false); var minStepValue = getVarValue(chartObject, chartData, "MINSTEPVALUE", 0.01, false); chartObject.getAxisY().setMin(minValue); chartObject.getAxisY().setMax(maxValue); chartObject.getAxisY().getLabelsFormat().setDecimals(2); chartObject.getAxisY().getDataFormat().setDecimals(4); chartObject.getAxisY().getGrids().getMinor().setVisible(true); chartObject.getAxisY().getGrids().getMinor().setStyle(cfx.DashStyle.Dot); chartObject.getAxisY().setMinorStep(minStepValue); } setTitle(chartObject, chartParams["CHART_DATA"], chartParams["LABEL_CD"], cfx.DockArea.Top); setTitle(chartObject, chartParams["CHART_DATA"], chartParams["YAXIS_LBL"], cfx.DockArea.Left); setLegend(chartObject, chartParams["LEGEND_POS"]); chartObject.create(divID); chartListing[divID] = chartObject; }
  4. How to use JChartFx with ReactJs

    I am new to Frontend development and learning ReactJs. Since JChartFx is normal Javascript Library, I don't know pattern to refer and use third party libraries in my react. I am able to hardcode the code for JChartFx (uses JQuery and Javascript) in html and get the output. But I wanted to create a configurable component for chart.
  5. Hi, I'm looking to add a label of the total value of a stacked bar on a bar chart. Currently I use a separate series as scatter chart type with point labels. But I see there is a new feature listed under jChartFX 7.4.5649 (which I do have) in the release notes called "- Auto-Computed Total value in stacked series" Do you have any further information on this new "auto-computer" feature? How do we implement? Example? I don't see anything in the API manual on it. Chris
  6. Resize Chart

    Hi, I'm trying to get my chart to resize, and I'm wondering the best way to do that. I did see a post titled "Resize the chart" which suggested the following: chart1.doUpdate(true); chart1.chart_ud(true); Neither of which is working for me. I did find a way, by re-setting the datasource and adjusting the width and height of the div. What is the best way to do this? I'm trying to get this to work in IE11. I've attached an html any help is appreciated. test.html
  7. I want to open the popup on click of points in jchartfx to display the detail information about that point. I want to add the id attribute to the polygon tag. How can i pass the value of id to display the detail information dynamically?
×