Can't display another Highcharts chart on my HTML page - Django

Question

Been looking at Highcharts doc and also "Integrating Django and Highcharts" by simpleisbetterthancomplex. I'm not sure what went wrong with my codes, that the second charts ain't display. I'm using Django views.py to retrieve data from the database.

def dashboard_viewUser(request):
  dataset = Profile.objects\
  .values('is_active')\
  .annotate(is_active_count = Count('is_active', filter = Q(is_active = True)),
    not_is_active_count = Count('is_active', filter = Q(is_active = False)))\
  .order_by('is_active')

categories = list()
is_active_series_data = list()
not_is_active_series_data = list()

for entry in dataset:
  categories.append('%s Active' % entry['is_active'])
is_active_series_data.append(entry['is_active_count'])
not_is_active_series_data.append(entry['not_is_active_count'])

is_active_series = {
  'name': 'Active user',
  'data': is_active_series_data,
  'color': 'green'
}

not_is_active_series = {
  'name': 'Inactive user',
  'data': not_is_active_series_data,
  'color': 'red'
}

chart = {
  'chart': {
    'type': 'column'
  },
  'title': {
    'text': 'Active user on Current Platform'
  },
  'xAxis': {
    'categories': categories
  },
  'yAxis': {
    'title': {
      'text': 'No.of users'
    },
    'tickInterval': 1
  },
  'plotOptions': {
    'column': {
      'pointPadding': 0.2,
      'borderWidth': 0
    }
  },
  'series': [is_active_series, not_is_active_series]
}

dump = json.dumps(chart)

return render(request, 'accounts/dashboard.html', {
  'chart': dump
})
`
    
    def dashboard_viewDepartment(request):
        dataset = Department.objects \
            .values('department') \
            .annotate(IT_count=Count('department', filter=Q(department="IT")),
                      Sales_count=Count('department', filter=Q(department="Sales")),
                      Admin_count=Count('department', filter=Q(department="Admin")),
                      HR_count=Count('department', filter=Q(department="HR")),) \
            .order_by('department')
    
        categories = list()
        IT_series_data = list()
        Sales_series_data = list()
        Admin_series_data = list()
        HR_series_data = list()
    
        for entry in dataset:
            categories.append('%s Department' % entry['department'])
            IT_series_data.append(entry['IT_count'])
            Sales_series_data.append(entry['Sales_count'])
            Admin_series_data.append(entry['Admin_count'])
            HR_series_data.append(entry['HR_count'])
    
        IT_series = {
            'name': 'IT',
            'data': IT_series_data,
            'color': 'green'
        }
    
        Sales_series = {
            'name': 'Sales',
            'data': Sales_series_data,
            'color': 'yellow'
        }
    
        Admin_series = {
            'name': 'Admin',
            'data': Admin_series_data,
            'color': 'red'
        }
    
        HR_series = {
            'name': 'HR',
            'data': HR_series_data,
            'color': 'blue'
        }
    
        chart2 = {
            'chart': {'type': 'column'},
            'title': {'text': 'Containers per department'},
            'xAxis': {'categories': categories},
            'yAxis': {
                'title': {
                    'text': 'No.of containers'},
                'tickInterval': 1
                    },
            'plotOptions': {
                'column': {
                    'pointPadding': 0.2,
                    'borderWidth': 0
                }
            },
            'series': [IT_series, Sales_series, Admin_series, HR_series]
        }
    
        dump = json.dumps(chart2)
    
        return render(request, 'accounts/dashboard.html', {'chart2': dump})

<div class="carousel-inner">
  <div class="carousel-item active">
    <div class="border" id="container" style="min-width: 100px; height: 
                                400px; margin: 0 auto;"></div>
    <script src="https://code.highcharts.com/highcharts.src.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      Highcharts.chart('container', {
        {
          chart | safe
        }
      });
    </script>
  </div>
  <div class="carousel-item">
    <div class="border" id="container2" style="min-width: 100px; 
                               height: 400px; margin: 0 auto;"></div>
    <script src="https://code.highcharts.com/highcharts.src.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
    <script>
      Highcharts.chart('container2', {
        {
          chart2 | safe
        }
      });
    </script>
  </div>
  <div class="carousel-item">
    <div class="carousel-caption">
      <h3>Currently Unavailable</h3>
    </div>
  </div>
</div>

Expected two charts to be display on two different panel of the carousel

Answer 1

You don't need multiple jquery/highchart. Just include it once at top of the page and it would work fine for multiple charts. I've updated your code a bit and since I don't have access to your data output from safe method, I've initialised the chart as a blank one.

  <!-- Place your javascripts once -->
  <script src="https://code.highcharts.com/highcharts.src.js">
  </script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="border" id="container" style="min-width: 100px; height: 
                    400px; margin: 0 auto;"></div>

      <script>
        Highcharts.chart('container', {
          title: {
            text: 'Im Chart 1' // Replace your {{ chart|safe }} here.
          },
        });

      </script>
    </div>
    <div class="carousel-item">
      <div class="border" id="container2" style="min-width: 100px; 
                   height: 400px; margin: 0 auto;"></div>

      <script>
        Highcharts.chart('container2', {
          title: {
            text: 'Im Chart 2' //Replace your {{ chart2|safe }} here.
          },
        });

      </script>
    </div>
    <div class="carousel-item">
      <div class="carousel-caption">
        <h3>Currently Unavailable</h3>
      </div>
    </div>
  </div>

Check out this fiddle for a working output.

https://jsfiddle.net/ebkr65ma/

Answer 2

Actually You just need one script src of the highchart and jquery.min.js . Change chart2 to chart.

 <script src="https://code.highcharts.com/highcharts.src.js"> 
 </script>
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script>
<div class="carousel-inner">
 <div class="carousel-item active">
 <div class="border" id="container" style="min-width: 100px; height: 
      400px; margin: 0 auto;"></div>       
  Highcharts.chart('container', {{ chart|safe }});
 </script>
 </div>
 <div class="carousel-item">
 <div class="border" id="container2" style="min-width: 100px; 
 height: 400px; margin: 0 auto;"></div>

 <script>
                      Highcharts.chart('container2', {{ chart|safe }});
                  </script>
        </div>
        <div class="carousel-item">
          <div class="carousel-caption" >
              <h3>Currently Unavailable</h3>
          </div>
       </div>
</div>