score:0

Accepted answer

D3 should be able to handle that pretty easily. You can use d3.request (e.g. d3.json) to call the data (in separate requests if necessary). Then d3.scale to set your min/max values to defined points on an svg chart, then plot your scatter points/lines etc. to those points using the data requested.

Mess about with axes and tooltips for a bit and you should have a functional chart.

score:1

You can use simple CSS to get that.

position: absolute, some positioning coordinates top & left, and dimentions width & height.

z-index to decide what would be on top of what.

And transparent background for both of them.

The rest is just configurations in the config JSON of the chart.

AmCharts.makeChart("chartdiv", {
  "type": "serial",
	"autoMargins": false,
	"marginBottom": 0,
	"marginLeft": 0,
	"marginRight": 0,
	"marginTop": 0,
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "fillAlphas": 1,
      "fillColors": "#4DCD11",
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-1",
      "title": "graph 1",
      "type": "column",
      "valueField": "column-1"
    },
    {
      "fillAlphas": 1,
      "fillColors": "#070AB5",
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-2",
      "title": "graph 2",
      "type": "column",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "allLabels": [],
  "balloon": {},
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": " "
  }],
  "dataProvider": [{
      "category": "1",
      "column-1": 8,
      "column-2": 5
    },
    {
      "category": "2",
      "column-1": 6,
      "column-2": 7
    },
    {
      "category": "3",
      "column-1": 2,
      "column-2": 3
    }
  ]
});

AmCharts.makeChart("chartdiv2", {
  "type": "serial",
  "theme": "light",
	"autoMargins": false,
	"marginBottom": 0,
	"marginLeft": 0,
	"marginRight": 0,
	"marginTop": 0,
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "id": "AmGraph-1",
      "lineThickness": 6,
      "noStepRisers": true,
      "title": "graph 1",
      "type": "step",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "id": "AmGraph-2",
      "lineThickness": 6,
      "noStepRisers": true,
      "title": "graph 2",
      "type": "step",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "title": " "
  }],
  "allLabels": [],
  "balloon": {},
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": " "
  }],
  "dataProvider": [{
      "category": "1",
      "column-1": 8,
      "column-2": 5
    },
    {
      "category": "2",
      "column-1": 6,
      "column-2": "2"
    },
    {
      "category": "3",
      "column-1": "7",
      "column-2": 3
    },
    {
      "category": "4",
      "column-1": "9",
      "column-2": 3
    },
    {
      "category": "5",
      "column-1": "7",
      "column-2": 1
    },
    {
      "category": "6",
      "column-1": "8",
      "column-2": 2
    },
    {
      "category": "7",
      "column-1": "7",
      "column-2": "6"
    }
  ]
});
#chartdiv,
#chartdiv2 {
  position: absolute;
  background-color: transparent;
}

#chartdiv {
  z-index: 100;
  top: 0;
  left: 0;
  width: 600px;
  height: 400px
}

#chartdiv2 {
  z-index: 120;
  top: 120px;
  left: 100px;
  width: 400px;
  height: 180px
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
<div id="chartdiv2"></div>


Related Query