[SOLVED] Extjs 3 How to remove chart and display new chart without refreshing the screen

Extjs 3 How to remove chart and display new chart without refreshing the screen

Flash Player will be going away and I need to find a fix to display chart items. I found extjs3-chartjs-extension. I am able to create the Pie chart and I am having issues of removing the chart and replace it with a new pie chart.

I add the following to the php demo.v.php

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Demo Report</title>
  </head>

    <body>
      <div id="container"></div>
    </body>
</html>

demo.js

    function showChart(category, type){
      var container = new Ext.Container({ 
        items: [
          new Ext.Panel({
            title: category,
            height: 320,
            width: 600,
            layout: "fit",
              items: [
              new Ext.ux.Chartjs({
               type: "Pie",
               data: [
                 {
                   value: 300,
                   color:"#F7464A",
                   highlight: "#FF5A5E",
                   label: "Red"
                 },
                 {
                   value: 50,
                   color: "#46BFBD",
                   highlight: "#5AD3D1",
                   label: "Green"
                 },
                 {
                   value: 100,
                   color: "#FDB45C",
                   highlight: "#FFC870",
                   label: "Yellow"
                 }
               })
             ]
           })
          ],
            renderTo: "container"
        });

I have tried using

document.getElementById('container').remove();

continue to build the new Pie Chart. I receive the following error in console.log error:

Uncaught TypeError: Cannot read property 'dom' of null

Solution

try this document.getElementById('container').parentElement.innerHTML = ""

It should remove everything inside the parent of the container element

If you have other elements inside you body then just surround the container with a element for example