Search code examples
javascriptjqueryamcharts4

Amcharts Multi axys convert to x,y only

I need to generate a report that counts issue threads on my system by category which uses amcharts 4 and the following code:

am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chart1", am4charts.XYChart);

//
chart.language.locale = am4lang_pt_BR;
chart.dateFormatter.language = new am4core.Language();
chart.dateFormatter.language.locale = am4lang_pt_BR;

// Increase contrast by taking evey second color
chart.colors.step = 2;

// Add data
chart.data = [{
    "date" : "2020-01",
    "Baixo" : 1596,
    "Médio" : 2902,
    "Alto" : 8702,
    "Critico" : 5695
},
{
    "date" : "2020-02",
    "Baixo" : 596,
    "Médio" : 902,
    "Alto" : 702,
    "Critico" : 695
},
{
    "date" : "2020-03",
    "Baixo" : 156,
    "Médio" : 292,
    "Alto" : 870,
    "Critico" : 569
},
{
    "date" : "2020-04",
    "Baixo" : 11596,
    "Médio" : 21902,
    "Alto" : 81702,
    "Critico" : 51695
},
{
    "date" : "2020-05",
    "Baixo" : 15906,
    "Médio" : 62902,
    "Alto" : 8702,
    "Critico" : 55695
},
{
    "date" : "2020-06",
    "Baixo" : 159,
    "Médio" : 290,
    "Alto" : 870,
    "Critico" : 569
},
{
    "date" : "2020-07",
    "Baixo" : 156,
    "Médio" : 292,
    "Alto" : 872,
    "Critico" : 565
},
{
    "date" : "2020-08",
    "Baixo" : 96,
    "Médio" : 02,
    "Alto" : 82,
    "Critico" : 95
},
{
    "date" : "2020-09",
    "Baixo" : 15,
    "Médio" : 29,
    "Alto" : 87,
    "Critico" : 195
},
{
    "date" : "2020-10",
    "Baixo" : 11,
    "Médio" : 21,
    "Alto" : 81,
    "Critico" : 51
},
{
    "date" : "2020-11",
    "Baixo" : 1,
    "Médio" : 2,
    "Alto" : 3,
    "Critico" : 4
},
{
    "date" : "2020-12",
    "Baixo" : 15,
    "Médio" : 52,
    "Alto" : 53,
    "Critico" : 54
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.baseInterval = {
  "timeUnit": "month",
  "count": 1
}

// Create series
function createAxisAndSeries(field, name, opposite, bullet) {
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  if(chart.yAxes.indexOf(valueAxis) != 0){
    valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
  }
  
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "date";
  series.strokeWidth = 2;
  series.yAxis = valueAxis;
  series.name = name;
  series.tooltipText = "{name}: [bold]{valueY}[/]";
  series.tensionX = 0.8;
  series.showOnInit = true;
  
  var interfaceColors = new am4core.InterfaceColorSet();
  
  switch(bullet) {
    case "triangle":
      var bullet = series.bullets.push(new am4charts.Bullet());
      bullet.width = 12;
      bullet.height = 12;
      bullet.horizontalCenter = "middle";
      bullet.verticalCenter = "middle";
      
      var triangle = bullet.createChild(am4core.Triangle);
      triangle.stroke = interfaceColors.getFor("background");
      triangle.strokeWidth = 2;
      triangle.direction = "top";
      triangle.width = 12;
      triangle.height = 12;
      break;
    case "rectangle":
      var bullet = series.bullets.push(new am4charts.Bullet());
      bullet.width = 10;
      bullet.height = 10;
      bullet.horizontalCenter = "middle";
      bullet.verticalCenter = "middle";
      
      var rectangle = bullet.createChild(am4core.Rectangle);
      rectangle.stroke = interfaceColors.getFor("background");
      rectangle.strokeWidth = 2;
      rectangle.width = 10;
      rectangle.height = 10;
      break;
    case "pipe":
      var bullet = series.bullets.push(new am4charts.Bullet());
      bullet.width = 10;
      bullet.height = 10;
      bullet.horizontalCenter = "middle";
      bullet.verticalCenter = "middle";
      
      var rectangle = bullet.createChild(am4core.Rectangle);
      rectangle.stroke = interfaceColors.getFor("background");
      rectangle.strokeWidth = 2;
      rectangle.width = 5;
      rectangle.height = 15;
      break;
    default:
      var bullet = series.bullets.push(new am4charts.CircleBullet());
      bullet.circle.stroke = interfaceColors.getFor("background");
      bullet.circle.strokeWidth = 2;
      break;
  }
  
  valueAxis.renderer.line.strokeOpacity = 1;
  valueAxis.renderer.line.strokeWidth = 2;
  valueAxis.renderer.line.stroke = series.stroke;
  valueAxis.renderer.labels.template.fill = series.stroke;
  valueAxis.renderer.opposite = opposite;
}

createAxisAndSeries("Baixo", "Baixo", false, "circle");
createAxisAndSeries("Médio", "Médio", false, "triangle");
createAxisAndSeries("Alto", "Alto", false, "rectangle");
createAxisAndSeries("Critico", "Critico", false, "pipe");

// Add legend
chart.legend = new am4charts.Legend();

// Add cursor
chart.cursor = new am4charts.XYCursor();




}); // end am4core.ready()
.chart{
width:100%;
height:500px;
}
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
    <script src="https://www.amcharts.com/lib/4/lang/pt_BR.js"></script>

<div id='chart1' class='chart'>

I need to join the 4 left bars into into one bar. But, I need to order it from 0 to the most high value in my entire json. I looked into amcharts docs and a tried to stack the bars but it mess the number order.

enter image description here

some one can help me please?

Solution

  • If you do not need stacked axes, why not just use the same axis for all series?

    am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chart1", am4charts.XYChart);

//
chart.language.locale = am4lang_pt_BR;
chart.dateFormatter.language = new am4core.Language();
chart.dateFormatter.language.locale = am4lang_pt_BR;

// Increase contrast by taking evey second color
chart.colors.step = 2;

// Add data
chart.data = [{
    "date" : "2020-01",
    "Baixo" : 1596,
    "Médio" : 2902,
    "Alto" : 8702,
    "Critico" : 5695
},
{
    "date" : "2020-02",
    "Baixo" : 596,
    "Médio" : 902,
    "Alto" : 702,
    "Critico" : 695
},
{
    "date" : "2020-03",
    "Baixo" : 156,
    "Médio" : 292,
    "Alto" : 870,
    "Critico" : 569
},
{
    "date" : "2020-04",
    "Baixo" : 11596,
    "Médio" : 21902,
    "Alto" : 81702,
    "Critico" : 51695
},
{
    "date" : "2020-05",
    "Baixo" : 15906,
    "Médio" : 62902,
    "Alto" : 8702,
    "Critico" : 55695
},
{
    "date" : "2020-06",
    "Baixo" : 159,
    "Médio" : 290,
    "Alto" : 870,
    "Critico" : 569
},
{
    "date" : "2020-07",
    "Baixo" : 156,
    "Médio" : 292,
    "Alto" : 872,
    "Critico" : 565
},
{
    "date" : "2020-08",
    "Baixo" : 96,
    "Médio" : 02,
    "Alto" : 82,
    "Critico" : 95
},
{
    "date" : "2020-09",
    "Baixo" : 15,
    "Médio" : 29,
    "Alto" : 87,
    "Critico" : 195
},
{
    "date" : "2020-10",
    "Baixo" : 11,
    "Médio" : 21,
    "Alto" : 81,
    "Critico" : 51
},
{
    "date" : "2020-11",
    "Baixo" : 1,
    "Médio" : 2,
    "Alto" : 3,
    "Critico" : 4
},
{
    "date" : "2020-12",
    "Baixo" : 15,
    "Médio" : 52,
    "Alto" : 53,
    "Critico" : 54
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.minGridDistance = 50;
dateAxis.baseInterval = {
  "timeUnit": "month",
  "count": 1
}

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.line.strokeOpacity = 1;
valueAxis.renderer.line.strokeWidth = 2;

// Create series
function createSeries(field, name, bullet) {

  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.dateX = "date";
  series.strokeWidth = 2;
  series.name = name;
  series.tooltipText = "{name}: [bold]{valueY}[/]";
  series.tensionX = 0.8;
  series.showOnInit = true;
  
  var interfaceColors = new am4core.InterfaceColorSet();
  
  switch(bullet) {
    case "triangle":
      var bullet = series.bullets.push(new am4charts.Bullet());
      bullet.width = 12;
      bullet.height = 12;
      bullet.horizontalCenter = "middle";
      bullet.verticalCenter = "middle";
      
      var triangle = bullet.createChild(am4core.Triangle);
      triangle.stroke = interfaceColors.getFor("background");
      triangle.strokeWidth = 2;
      triangle.direction = "top";
      triangle.width = 12;
      triangle.height = 12;
      break;
    case "rectangle":
      var bullet = series.bullets.push(new am4charts.Bullet());
      bullet.width = 10;
      bullet.height = 10;
      bullet.horizontalCenter = "middle";
      bullet.verticalCenter = "middle";
      
      var rectangle = bullet.createChild(am4core.Rectangle);
      rectangle.stroke = interfaceColors.getFor("background");
      rectangle.strokeWidth = 2;
      rectangle.width = 10;
      rectangle.height = 10;
      break;
    case "pipe":
      var bullet = series.bullets.push(new am4charts.Bullet());
      bullet.width = 10;
      bullet.height = 10;
      bullet.horizontalCenter = "middle";
      bullet.verticalCenter = "middle";
      
      var rectangle = bullet.createChild(am4core.Rectangle);
      rectangle.stroke = interfaceColors.getFor("background");
      rectangle.strokeWidth = 2;
      rectangle.width = 5;
      rectangle.height = 15;
      break;
    default:
      var bullet = series.bullets.push(new am4charts.CircleBullet());
      bullet.circle.stroke = interfaceColors.getFor("background");
      bullet.circle.strokeWidth = 2;
      break;
  }

}

createSeries("Baixo", "Baixo", "circle");
createSeries("Médio", "Médio", "triangle");
createSeries("Alto", "Alto", "rectangle");
createSeries("Critico", "Critico", "pipe");

// Add legend
chart.legend = new am4charts.Legend();

// Add cursor
chart.cursor = new am4charts.XYCursor();




}); // end am4core.ready()
    .chart{
width:100%;
height:500px;
}
        <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
    <script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
    <script src="https://www.amcharts.com/lib/4/lang/pt_BR.js"></script>

<div id='chart1' class='chart'>