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


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


There are no results to display.

Found 6 results

  1. 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?
  2. 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; }
  3. 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.
  4. 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
  5. 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
  6. 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?