NYCBabak . Posted August 26, 2020 Share Posted August 26, 2020 Im not sure how this is done but it seems like youll have a better shot at it using d3-based graph extensions. Perhaps what you learn here could help with using eCharts. GitHub ibi/wf-extensions-chart d3-based graph extensions for WebFocus 8200 . Contribute to ibi/wf-extensions-chart development by creating an account on GitHub. Link to comment Share on other sites More sharing options...
Pawan Vuppala Posted August 26, 2020 Author Share Posted August 26, 2020 Has anyone looked into or messed with eCharts Im wondering if theres a way we can feed our data in JSON format or whatever to a page with these controls. https://echarts.apache.org/en/index.html Link to comment Share on other sites More sharing options...
Pawan Vuppala Posted August 27, 2020 Author Share Posted August 27, 2020 Thank you, yes we do have HTML5 or D3 extensions installed but these are more open source librarie Link to comment Share on other sites More sharing options...
Kamesh Gopalan Posted September 1, 2020 Share Posted September 1, 2020 Try using AJAX in JavaScript to call the Webfocus procedure to get the data and feed it to eCharts. Link to comment Share on other sites More sharing options...
Pawan Vuppala Posted September 3, 2020 Author Share Posted September 3, 2020 Thanks Kamesh, I figured it will be more or less like HOLD the output in JSON format like I used with google charts long time ago. Just trying to see if anyone messed with it yet. Link to comment Share on other sites More sharing options...
Michael Williams 11 Posted September 3, 2020 Share Posted September 3, 2020 Ive seen something similar with AMCharts Short example: TABLE FILE CAR SUM DEALER_COST BY COUNTRY ON TABLE HOLD FORMAT JSON END -HTMLFORM BEGIN NOEVAL <!-- Styles --> <style> #chartdiv { width: 100%; height: 500px; } </style> <!-- Resources --> <script src="https://www.amcharts.com/lib/4/core.js"></script> <script src="https://www.amcharts.com/lib/4/charts.js"></script> <script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> <!-- Chart code --> <script> //Hold file information var ibiData = !IBI.FIL.HOLD; ; am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end var chart = am4core.create("chartdiv", am4charts.XYChart); chart.hiddenState.properties.opacity = 0; // this creates initial fade-in chart.data = ibiData.records; var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); categoryAxis.renderer.grid.template.location = 0; categoryAxis.dataFields.category = "COUNTRY"; categoryAxis.renderer.minGridDistance = 40; categoryAxis.fontSize = 11; var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); valueAxis.min = 0; valueAxis.max = 60000; valueAxis.strictMinMax = true; valueAxis.renderer.minGridDistance = 30; // axis break var axisBreak = valueAxis.axisBreaks.create(); axisBreak.startValue = 1500; axisBreak.endValue = 30000; axisBreak.breakSize = 0.005; // make break expand on hover var hoverState = axisBreak.states.create("hover"); hoverState.properties.breakSize = 1; hoverState.properties.opacity = 0.1; hoverState.transitionDuration = 1500; axisBreak.defaultState.transitionDuration = 1000; /* // this is exactly the same, but with events axisBreak.events.on("over", function() { axisBreak.animate( [{ property: "breakSize", to: 1 }, { property: "opacity", to: 0.1 }], 1500, am4core.ease.sinOut ); }); axisBreak.events.on("out", function() { axisBreak.animate( [{ property: "breakSize", to: 0.005 }, { property: "opacity", to: 1 }], 1000, am4core.ease.quadOut ); });*/ var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.categoryX = "COUNTRY"; series.dataFields.valueY = "DEALER_COST"; series.columns.template.tooltipText = "{valueY.value}"; series.columns.template.tooltipY = 0; series.columns.template.strokeOpacity = 0; // as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set series.columns.template.adapter.add("fill", function(fill, target) { return chart.colors.getIndex(target.dataItem.index); }); }); // end am4core.ready() </script> <!-- HTML --> <div id="chartdiv"></div> amCharts -HTMLFORM END Link to comment Share on other sites More sharing options...
Pawan Vuppala Posted September 3, 2020 Author Share Posted September 3, 2020 This is great! Thank you Michael! Link to comment Share on other sites More sharing options...
Marita Locklear Posted September 4, 2020 Share Posted September 4, 2020 Pawan if using the JSON file format in hold be aware that if there are duplicate rows next to each other they will get dropped. You will need to currently make sure every row is unique to fix this. I have run into this issue with this file format recently. I have a case open with IBI about it. Link to comment Share on other sites More sharing options...
Marita Locklear Posted September 4, 2020 Share Posted September 4, 2020 I am using AmCharts in my application too. I really love their support and help when needed to get it working. My boss was impressed too and agreed to continue paying the yearly maintenance costs which is small change. The 24 hour return which is usually 2-4 hours really is very impressive. Link to comment Share on other sites More sharing options...
Douglas Lee 2 Posted September 24, 2020 Share Posted September 24, 2020 Thats cool Now, just to figure when, where, and why Id use it Link to comment Share on other sites More sharing options...
Jose Leviaguirre Posted February 9, 2023 Share Posted February 9, 2023 The best way today is to use Spotfire Mods, but here is a POC on how to create an EChart on a text area. This could work on simple use cases Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now