Toggle amchart Graph type without recalling function

I have multiple graphs in function which are depended on previous one. that is working fine but issue arises when I add toggle button in it, and try to toggle. Function need data again. So without reintiallizing graph i want to toggle graph type,from column to line. Is there any way to do so. help will be appreciated

var dataset = [{
    "category": "category 1",
    "column-1": 8,
    "column-2": 5
  },
  {
    "category": "category 2",
    "column-1": 6,
    "column-2": 7
  },
  {
    "category": "category 3",
    "column-1": 2,
    "column-2": 3
  }
]
AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-1",
      "title": "graph 1",
      "type": "column",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-2",
      "title": "graph 2",
      "type": "column",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "title": "Axis title"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Chart Title"
  }],
  "dataProvider": dataset
});

<!DOCTYPE html>
<html>

<head>
  <title>chart created with amCharts | amCharts</title>
  <meta name="description" content="chart created using amCharts live editor" />

  <!-- amCharts javascript sources -->
  <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>


  <!-- amCharts javascript code -->
  <script type="text/javascript">
  </script>
</head>

<body>
  <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>

</html>

Solution

You can set any public property in the graph and call validateData() to redraw the chart without having to provide the entire dataset/makeChart config again. Assuming you stored the chart instance into a variable:

chart.graphs.forEach(function(graph) {
  graph.type = /* set new type */;
});
chart.validateData();

Here's a demo that switches graph type and other visual aspects on an external button click:

var dataset = [{
    "category": "category 1",
    "column-1": 8,
    "column-2": 5
  },
  {
    "category": "category 2",
    "column-1": 6,
    "column-2": 7
  },
  {
    "category": "category 3",
    "column-1": 2,
    "column-2": 3
  }
]
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "categoryField": "category",
  "startDuration": 1,
  "categoryAxis": {
    "gridPosition": "start"
  },
  "trendLines": [],
  "graphs": [{
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-1",
      "title": "graph 1",
      "type": "column",
      "valueField": "column-1"
    },
    {
      "balloonText": "[[title]] of [[category]]:[[value]]",
      "fillAlphas": 1,
      "id": "AmGraph-2",
      "title": "graph 2",
      "type": "column",
      "valueField": "column-2"
    }
  ],
  "guides": [],
  "valueAxes": [{
    "id": "ValueAxis-1",
    "title": "Axis title"
  }],
  "allLabels": [],
  "balloon": {},
  "legend": {
    "enabled": true,
    "useGraphSettings": true
  },
  "titles": [{
    "id": "Title-1",
    "size": 15,
    "text": "Chart Title"
  }],
  "dataProvider": dataset
});

document.getElementById('toggle-type').addEventListener('click', function() {
  chart.graphs.forEach(function(graph) {
    if (graph.type == "column") {
      graph.type = "line";
      graph.fillAlphas = 0;
      graph.bullet = "round";
    }
    else {
      graph.type = "column";
      graph.fillAlphas = 1;
      graph.bullet = undefined;
    }
  });
  chart.validateData();
});

<!DOCTYPE html>
<html>

<head>
  <title>chart created with amCharts | amCharts</title>
  <meta name="description" content="chart created using amCharts live editor" />

  <!-- amCharts javascript sources -->
  <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>


  <!-- amCharts javascript code -->
  <script type="text/javascript">
  </script>
</head>

<body>
  <button id="toggle-type">Toggle line/column</button>
  <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>

</html>