Has anyone looked into or messed with eCharts Im wonderi...

[NYCBabak .]

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.

[Pawan Vuppala]

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

[Pawan Vuppala]

Thank you, yes we do have HTML5 or D3 extensions installed but these are more open source librarie

[Kamesh Gopalan]

Try using AJAX in JavaScript to call the Webfocus procedure to get the data and feed it to eCharts.

[Pawan Vuppala]

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.

[Michael Williams 11]

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

[Pawan Vuppala]

This is great! Thank you Michael!

[Marita Locklear]

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.

[Marita Locklear]

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.

[Douglas Lee 2]

Thats cool Now, just to figure when, where, and why Id use it

[Jose Leviaguirre 5]

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

​

​