CODEWITHSUNDEEP
javascriptjsonamcharts
linkundefined
linkundefined

Reputation: 13

How to generate a table with 4 criterions in amcharts

I'm a newbie in programming and due to my lack of skills and knowledge I'm stuck on my problem. I tried to create a table like this in amcharts =>> This is the chart I need to create

but I can only successfully create a table like this=>>This is the chart I have made using amcharts The problem is I don't know how to generate the table for the chart. I already saw some tutorial on how generate a table but the chart has a category and I don't have any idea on how to do it.

This the code I have made and it doesn't execute when I added the addInitHandler `

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="plugins/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="plugins/amcharts/serial.js" type="text/javascript"></script>

<style>

#chartdiv {
  width: 900px;
  max-width: 100%;
  height: 300px;
  border: 2px solid #eee;
  border-bottom: none;
}

#chartdata {
  width: 900px;
  max-width: 100%;
  border: 2px solid #eee;
  border-top: none;
}

#chartdata * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#chartdata table {
  width: 100%;
  border-collapse: collapse;
}

#chartdata table th,
#chartdata table td {
  text-align: center;
  padding: 5px 7px;
}

#chartdata table th {
  background: #999;
  color: #fff;
}

#chartdata table td {
  border: 1px solid #eee;
}

#chartdata table td.row-title {
  font-weight: bold;
  width: 150px;
}
</style>

<script>
/**
 * A plugin to automatically creata a data table for the chart
 * The plugin will check if the chart config has the following setting set: "dataTableId"
 */
AmCharts.addInitHandler(function(chart) {

  // check if export to table is enabled
  if (chart.dataTableId === undefined)
    return;

  // get chart data
  var data = chart.dataProvider;

  // create a table
  var holder = document.getElementById(chart.dataTableId);
  var table = document.createElement("table");
  holder.appendChild(table);
  var tr, td;

  // construct table
  for (var i = 0; i < chart.graphs.length; i++) {

    // add rows
    tr = document.createElement("tr");
    table.appendChild(tr);
    td = document.createElement("td");
    td.className = "row-title";
    td.innerHTML = chart.graphs[i].title;
    tr.appendChild(td);

    for (var x = 0; x < chart.dataProvider.length; x++) {
      td = document.createElement('td');
      td.innerHTML = chart.dataProvider[x][chart.graphs[i].valueField];
      tr.appendChild(td);
    }
  }

}, ["serial"]);

/**
 * Define chart data
 */
var chartData = [{
    "category": "Operations-25",
    "quarter": "25",
    "averageyears":"0.1",
    "numofemployees":"12"
  },{
    "category": "Operations-28",
    "quarter": "28",
    "averageyears":"3.00",
    "numofemployees":"22"
  },{
    "category": "Operations-29",
    "quarter": "29",
    "averageyears":"5.00",
    "numofemployees":"2"
  },{
    "category": "Operations-30",
    "quarter": "30",
    "averageyears":"6.02",
    "numofemployees":"4"
  },{
    "category": "Main Office-25",
    "quarter": "25",
    "averageyears":"2.05",
    "numofemployees":"12"
  },{
    "category": "Main Office-26",
    "quarter": "26",
    "averageyears":"4.05",
    "numofemployees":"12"
  },{
    "category": "Main Office-27",
    "quarter": "27",
    "averageyears":"2.00",
    "numofemployees":"12"
  },{
    "category": "Main Office-29",
    "quarter": "29",
    "averageyears":"1.05",
    "numofemployees":"12"
  },{
    "category": "Main Office-30",
    "quarter": "30",
    "averageyears":"6.05",
    "numofemployees":"12"
  }]

}];

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "dataProvider": chartData,
    "dataTableId": "chartdata",
    "legend": {
        "horizontalGap": 10,
        "position": "bottom",
        "useGraphSettings": true,
        "markerSize": 10
    },
    "valueAxes": [{
        "id":"v1",
        "axisColor": "#FF6600",
        "axisThickness": 2,
        "axisAlpha": 1,
        "position": "left",
        "title":"Average Of Years in Service"

    }, {
        "id":"v2",
        "axisColor": "#FCD202",
        "axisThickness": 2,
        "axisAlpha": 1,
        "position": "right",
        "title":"Number of Employees"
    }],
    "graphs": [{
        "valueAxis": "v1",
        "color": "#FF6600",
        "type":"column",
        "title": "Average Of Years in Service",
        "valueField": "averageyears",
        "columnWidth":0.6,
        "fillAlphas": 0.8
    }, {
        "valueAxis": "v2",
        "color": "#FCD202",
        "type":"column",
        "title": "Number of Employees",
        "valueField": "numofemployees",
        "clustered": false,
        "columnWidth":0.3,
        "fillAlphas": 0.8
    }],
     "categoryField": "category",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0.5,
    "gridAlpha": 0,
    "position": "left",
    "fontSize": 12,
    "boldLabels": "bold" ,
   "guides": [ {
      "category": "Main Office-25",
      "toCategory": "Main Office-30",
      "lineAlpha": 5,
      "tickLength": 30,
      "expand": true,
      "label": "Chowking Main Office",

    }, {
      "category": "Operations-25",
      "toCategory": "Operations-30",
      "lineAlpha": 5,
      "tickLength": 30,
      "expand": true,
      "label": "Chowking Operations",

    } ],
    "labelFunction": function( label, item ) {
      return item.dataContext.quarter;
    }
  }
} );
</script>
    </head>
    <body>
      <div id="chartdiv"></div>                   
      <div id="chartdata"></div> 
    </body>
</html>

`

Upvotes: 1

Views: 1066

Answers (1)

xorspark
xorspark

Reputation: 16012

The reason why your data isn't showing up is because of the extra }]; line in your data definition that is causing a syntax error. You can spot this by using your browser's Developer Toolbar/Console (usually accessible by hitting F12). Removing the offending line will make the chart and table work, but you'll need to fine-tune the CSS, chart margins, and settings to get something close to what you're looking for.

Legends can't be placed in the table, but you can mimic the look by adding a <span> to the row title that mimics the colored box. Here's the modified line in the table plugin:

td.innerHTML = '<span style="width: 12px; height: 12px; background:' + chart.graphs[i].color + ';  display:inline-block; margin-right:6px"></span>' + chart.graphs[i].title;

You'll need to remove the chart's own legend definition.

From there, I added synchronizeGrid: true in your config to synchronize the grid lines, disabled the chart's autoMargins settings and set my own margins to help align the chart with the table:

var chart = AmCharts.makeChart("chartdiv", {
    // other config omitted
    "synchronizeGrid": true,
    "autoMargins": false,
    "marginLeft": 150,
    "marginBottom": 55,
    "marginRight": 60,
    // ...

Next, I updated your categoryAxis' tickPosition to "start" so that the labels appear in between the ticks like your desired screenshot. Afterwards, I increased the guides' tickLength so that it can connect to your table and adjusted the labelOffset as increasing the tickLength shifts the label downward. Note that tickAlpha and other alpha values range from 0-1. 5 is the same as 1:

  "categoryAxis": {
    "gridPosition": "start",
    "tickPosition": "start",
    "tickLength": 15,
    "axisAlpha": 0.5,
    "gridAlpha": 0,
    "fontSize": 12,
    "boldLabels": "bold",
    "guides": [{
      "category": "Main Office-25",
      "toCategory": "Main Office-30",
      "lineAlpha": 1,
      "tickLength": 60,
      "expand": true,
      "label": "Chowking Main Office",
      "labelOffset": -30

    }, {
      "category": "Operations-25",
      "toCategory": "Operations-30",
      "lineAlpha": 1,
      "tickLength": 60,
      "expand": true,
      "label": "Chowking Operations",
      "labelOffset": -30
    }],

Lastly, I added a class for the data cells in the plugin and updated the CSS so that the table fonts matched the chart's default font and adjusted the cell sizes so that the grids more closely lined up. You can probably fine-tune it more but this seemed good enough.

Here's a fiddle with all of my changes: https://jsfiddle.net/m5nm9chL/3/

This is pretty much the closest you're going to get to your desired screenshot, but feel free to adjust the CSS/margins further.

Upvotes: 1

Related Questions