Jump to content
The ibi Community has moved to a new platform: Please Sign In and choose Forgot Password to continue

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


Pawan Vuppala

Recommended Posts

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

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

  • 3 weeks later...
  • 2 years later...

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
  • Create New...