#4126

by amcharts

HTML

<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<div id="chartdiv" style="width: 100%; height: 362px;"></div>

JavaScript

var chart;

var chartData = [{

year: String.fromCharCode(160),

veryneg: 9,

asomewhat: 46,

noimpact: -43,

}, {

year: String.fromCharCode(160),

veryneg: 0,

asomewhat: 37,

noimpact: -63,

}, {

year: String.fromCharCode(160),

veryneg: 17,

asomewhat: 51,

noimpact: -30,

}];

// iterate through data and create positive values
for ( var i in chartData ) {
    chartData[i].noimpactPos = Math.abs(chartData[i].noimpact);
}

AmCharts.ready(function () {

// SERIAL CHART

chart = new AmCharts.AmSerialChart();

chart.dataProvider = chartData;

chart.categoryField = "year";

chart.plotAreaBorderAlpha = 0.2;

chart.fontFamily = "Arial, Verdana, sans-serif";

chart.depth3D = 15;

chart.angle = 30;
    
    

// AXES

// category

var categoryAxis = chart.categoryAxis;

categoryAxis.gridAlpha = 0.1;

categoryAxis.axisAlpha = 0;

categoryAxis.gridPosition = "start";

// value

var valueAxis = new AmCharts.ValueAxis();

valueAxis.autoGridCount = false;

valueAxis.stackType = "regular";

valueAxis.gridAlpha = 0.1;

valueAxis.axisAlpha = 0;

valueAxis.maximum = 70;

valueAxis.minimum = -70;

valueAxis.labelFunction = function (value, valueText, valueAxis) {

return Math.abs(Number(value)) + '%';

}

chart.addValueAxis(valueAxis);

// GRAPHS

// third graph

graph = new AmCharts.AmGraph();

graph.title = "No impact";

graph.labelText = "[[value]]"; // HERE it SHOULD BE AN ABSOLUTE VALUE. I ALREADY TESTED WITH MATH.ABS and str.replace with no success… please can you help me?

graph.valueField = "noimpact";

graph.type = "column";

graph.lineAlpha = 0;

graph.fillAlphas = 1;

graph.lineColor = "#747678";

graph.balloonText = "[[title]] ";
    graph.labelText = "[[noimpactPos]]";

chart.addGraph(graph);

// second graph

graph = new AmCharts.AmGraph();

graph.title = "A somewhat negative impact";

graph.labelText = "46";

graph.valueField = "asomewhat";

graph.type = "column";

graph.lineAlpha = 0;

graph.fillAlphas = 1;

graph.lineColor = "#d67a40";

graph.balloonText =...