Is there a way to integrate a Highcharts solidgauge into a Django application?

I'm trying to incorporate a highcharts solidgauge (https://www.highcharts.com/demo/gauge-solid) into my Django and Python3.8 app. However, most of the examples I have come across are designed for Angular.

tldr: I keep receiving a red error message from highcharts (No. 17), stating that the requested series type does not exist.

Here's the detailed version: Without much guidance, I downloaded four JavaScript files (, , , and ). I placed them in my Django's static folder and ran manage.py collectstatic.

In my views.py file, I attempted to replicate an example from the highcharts page, but I am unable to get it to render properly. The code snippet looks like this:

def landingpage(request):        
   chart = {
       'chart': {
           'type':'solidgauge',
       },
       'title': {'text':'Example gauge'},
       // more chart configuration here...
       }
   }
   dump = json.dumps(chart, cls=CustomJsonEncoder)             
   gauge = {'chart':dump}
   context['chart_example'] = gauge['chart']
   return render(request, templ_folder_name + 'landingpage.html', context)

// Custom JSON Encoder class definition here...

Within my template file, I have included this:

{% block content %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <h2 class="page-header">Dashboard</h2>
        <br>
        // rest of the template structure...
        <br>
        </div>
    {% load static %}
        // script tags loading required JS files and initializing Highcharts

{% endblock %}

Can someone please point out where I might be making a mistake?

Update: I am not familiar with using developer tools in Firefox, but I managed to capture a screenshot of the error message displayed. Check it out https://i.sstatic.net/wSM0P.png.

Answer №1

I managed to find a solution, although I must admit that I don't fully grasp it. After trying out different combinations of includes, I discovered one that appears to be effective (although further testing is needed!). Here is the code snippet:

<script type="text/javascript" src="{% static 'highcharts/highcharts.src.js' %}"></script>
<script type="text/javascript" src="{% static 'highcharts/modules/bullet.src.js' %}"></script>
<script type="text/javascript" src="{% static 'highcharts/highcharts-more.js' %}"></script>
<script>
    Highcharts.chart('hccontainer_chart1', {{var1|safe}});
</script>
<script>
    Highcharts.chart('hccontainer_chart2', {{chart2|safe}});
</script>
<script type="text/javascript" src="{% static 'highcharts/modules/solid-gauge.js' %}"></script>
<script>
    Highcharts.chart('hccontainer_chart3', {{chart3|safe}});
</script>

I'm still puzzled by the specific order in which these scripts need to be loaded. Initially, I intended to sequence them as highcharts -> highcharts-more -> bullet -> solidgauge. Additionally, I assumed that using .js or .src.js extensions wouldn't matter, but apparently, it does. If someone more knowledgeable about this could shed some light on it, I would greatly appreciate it so that I can avoid similar pitfalls in the future.

Thank you!

Answer №2

In my opinion, your issue could potentially be resolved by ensuring that the highcharts solidgauge module is initialized after the highcharts-more module. This is because certain properties are inherited from the more module. You can verify this by testing it out on the following demo link: https://jsfiddle.net/BlackLabel/gqLhm3cr/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Knockout.js client-side validation system

Currently working on a sophisticated client-side web application and I'm in search of the perfect framework for handling validations. I experimented with JQuery validation plugin, but unfortunately it didn't integrate smoothly with knockout.js da ...

The axios method remains dormant even after submitting the form in React

When working with a form that allows file uploads, I encountered an issue where adding the type="submit" attribute to my 'upload' button prevented the axios method in handleSubmit from being called. However, if I remove the type="s ...

SimpleLightBox refuses to function

Having trouble getting SimpleLightBox to work properly? It seems like when you click on an image, it opens as a regular image on a blank page. I've added the JS and CSS files correctly (I double-checked in the source code) and included the HTML and JS ...

Check to see if the ContentEditable div is currently focused

I'm struggling to determine if a contenteditable div has focus with my current code. Here is what I have so far: if ($("#journal-content:focus")) { alert("Has Focus"); } else { alert("Doesn't Have Focus"); } The issue I'm encounter ...

Reverse the Angular component to AngularJS

I'm currently working on downgrading an Angular component for use in an AngularJS app. To test this, I created a simple Angular component: // my-test.component.ts @Component({ selector: 'my-test', template: '<h1>Hello Wor ...

Retrieving an assortment of objects from a database and showcasing them using React

Attempting to retrieve an array of objects led me to this issue. Please excuse the messy code, I am still learning. export class App extends Component { state ={ character:[] } componentDidMount(){ fetch('https://swapi.dev/api/people/ ...

What is the best way to JSON serialize a Django queryset in python?

When working with AJAX responses, I encountered an error while trying to serialize a queryset. The error message was: TypeError: 'Font: FontName' is not JSON serializable The code snippet using JSON response looks like this: ... return Json ...

Typescript: The .ts file does not recognize the definition of XMLHttpRequest

I have encountered an issue with a .ts file containing the following code: var xhttp = new XMLHttpRequest(); After running the grunt task to compile the ts files using typescript, no errors were reported. However, when I attempt to instantiate the class ...

"WP Admin Ajax in WordPress can be quite unpredictable - one moment it's functioning perfectly, the next it

I am attempting to perform form validation using the WordPress and jQuery Validate plugin. Here is my JavaScript code: <script type="text/javascript"> var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>"; // submit reg ...

Executing a Knex RAW MySQL query to insert new records into a database table

As someone new to working with MySQL, I have previously used PSQL in a similar manner. However, the following code is generating an error. return await db .raw( `INSERT INTO users(firstName, lastName, email, ...

When a page first loads in Next.js with Firebase, the useEffect hook may return an undefined value

My component is designed to retrieve a subcollection from firestore: import { useEffect, useState } from "react"; import { db } from '../firebase/firebaseInit' import {useAuth} from '../components/AuthContextProvider' import { ...

What are the best methods for conducting a load test on a JavaScript/AngularJS application?

I'm working on a JavaScript/AngularJS application that communicates with a server using websockets. Is there an efficient method to conduct a load test? I want to simulate what will occur if the app receives 100 calls simultaneously (resulting in 100 ...

Exploring the ins and outs of building JavaScript objects using constructors

When creating a new object with var obj = new Object(value); and assigning property values with obj.value = newValue, I encountered an issue where only one of these actions would work at a time. Is there a way to make both work within the same object decla ...

What mistakes am I making in this PHP code as I try to work with the select option?

Currently, I am developing a form that involves selecting values. If the user chooses 'yes', I want to display a text box section. However, the code below is not functioning as expected. <select id="gap" name="gap" onclick="gap_textbox();"> ...

Is there a way to pass a variable from a JavaScript to a PHP script?

Let’s say I have a variable let message = "hello"; What is the process to send it to PHP and then post it? ...

Using a slider in Cordova application

Currently, I am in the process of developing an app using Cordova. However, I have encountered an issue with the slider feature. HTML <body> <div id="slider"> <div id="custom-handle" class="ui-slider-handle"></div> </di ...

The latest URL is not launching in a separate tab

Looking for some assistance with this code snippet: <b-btn variant="primary" class="btn-sm" :disabled="updatePending || !row.enabled" @click="changeState(row, row.dt ? 'activate' : 'start&apo ...

Managing Django Integrity Errors: A Guide to Handling Data Integrity Issues

After working on a website for user registration that includes fields like first name, last name, and phone number, I have successfully connected it to MySQL database. As a beginner, I am facing issues with IntegrityError handling in Django. When two use ...

webpack is encountering difficulty resolving the node_modules material-icons directory

Encountering an Error ERROR in ./node_modules/material-icons/iconfont/material-icons.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_mod ...

What is the correct way to upload an image using the Express static middleware?

Just diving into express, I have this setup in my server: app.use(express.static(path.join(__dirname, 'includes'))); When it comes to my client-side JavaScript, I'm simply using the URL like so: var img = $("<img />").attr('s ...