Generate a fresh chart for every additional page

After gathering responses from users in a JSON format using SurveyJS, I have data like this:

var surveyJSON = {pages:[{name:"page1",elements:[{type:"rating",name:"How confident are you conducting market analysis?",description:"5 - most confident"},{type:"rating",name:"How confident are you evaluating the feasibility of a new opportunity?",description:"5 - most confident"},{type:"rating",name:"How confident are you discovering new ways to improve existing products?",description:"5 - most confident"}]},{name:"page2",elements:[{type:"rating",name:"How confident are you targeting new markets and customers?",description:"5 - most confident",isRequired:true},{type:"rating",name:"How confident are you reacting quickly to take advantage of business opportunities?",description:"5 - most confident",isRequired:true},{type:"rating",name:"How confident are you creating new products and services and/or developing new ideas?",description:"5 - most confident"}]}]}

Now, I want to generate individual charts for each page of responses using HighCharts. Each Page corresponds to a unique chart - how do I achieve this when the number of pages is dynamic?

I currently have a HighCharts implementation that displays all responses in one chart, but that's not what I need:

    Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Your confidence levels'
    },
    xAxis: {
      categories: titleArray,
    },
    yAxis: {
        title: {
            text: 'Your confidence levels',
            align: 'high'
        }
    },
    series: [{
        data: valuesArray
    }]
    });

Answer №1

Instead of manually fetching the length of pages in your survey JSON data, why not use surveyJSON.pages.length? Or if you have access to your surveyjs model, you can directly retrieve it using survey.pages.length.

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

Alter the content of a div by simply clicking on it without leaving the current page

I am facing an issue where the main topics in my menubar only have text introductions and no images. I would prefer a solution where when clicking on "about me", instead of loading a full page, only the content of that particular div changes. The idea is t ...

The dropdown height feature is experiencing issues in the Chrome browser

3 radio buttons and a single select box are displayed on the page. When clicking on the first radio button, the select box should show contents related to the first radio button. However, when selecting the second or third radio buttons, the select box hei ...

The app.get() method in Node JS and Express requires three parameters, and I am seeking clarification on how these parameters work

Hey there, I'm new to this and have a question regarding my code using passport-google-oauth20. app.get('/auth/google/secrets', passport.authenticate('google',{failureRedirect: '/login'}), function(req,res){ res.redirec ...

Generating random objects in a straight line with Javascript and HTML5: A step-by-step guide

In my current project, I am developing a game using Javascript/HTML5 (within a canvas element) that features two distinct types of objects (referred to as object type A and object type B) falling from the top of the canvas. The goal for players is to swip ...

AngularJS: Choosing items from a dropdown menu, not an object or array

Need help creating a select list from a simple list, not an array or object with keys. All the resources I've come across are focused on keyed data types. $scope.numbers = ['tweedle', 'beetle', 'battle']; With the follo ...

What is the method for breaking down a React useState hook into separate variables within a namespace?

Personally, I like to group React props into namespaces for better organization. When using the useState hook, I follow this approach. function MyComponent() { const [todoCount, setTodoCount] = useState(100); const [doneCount, setDoneCount] = useSta ...

Serializing model instances with dependencies in DjangoorHow to serialize Django

When serializing a queryset of TestChild model objects, I want the json data to also include related TestParent objects. This is my current code: from django.db import models class TestParentManager(models.Manager): def get_by_natural_key(self, fie ...

Using angular.js variables in the script tag: A step-by-step guide

Currently, I am working on a project that involves displaying elements on a view using Angular.js and attempting to connect these DOM elements using jQuery connections. While the elements are being displayed correctly, I am encountering an issue when tryin ...

How can I locally include an ID in an HTML tag using Angular?

Hey there, I'm not facing any issue currently, but I have a question out of curiosity. Is it possible in Angular to locally add an ID to an HTML tag? I want this ID to be accessible only by the component that defines it. My intention is to set the ID ...

Using a toolbar to insert a hyperlink for hypertext communication

My journey with Javascript and React began this week, so I'm still getting the hang of things, especially in the front end domain. In my project, there's a link button within a toolbar. The idea is to click on it, have a text box pop up where yo ...

Adjusting the X-Axis Labels on a Scatterplot using Chart.js 2

I'm working with Chart.js 2 to create a scatter plot using Epoch timestamps for the x coordinates and integers for the y coordinates. Is there a way to customize the x-axis labels on the graph to show dates in a more readable format? Update: I am cur ...

Tips for adding a texture to THREE.ExtrudeGeometry

const circleShape = new THREE.Shape(); circleShape.moveTo( 50, 10 ); circleShape.absarc( 10, 10, 40, 0, Math.PI*2, false ); const textureMap = new THREE.ImageUtils.loadTexture('moon.jpg'); const shapeGeometry = new THREE.ExtrudeGeometry(circleSh ...

Experience the absence of occurrences when utilizing ng-include

As a newcomer to HTML/CSS/JS, I am facing an issue with creating a list of a specific component. While my componentA works perfectly, I encounter problems when trying to include multiple instances of it in componentB using ng-include as it seems to lose th ...

Trustpilot Authentication Error: Grant_type Not Recognized

I am attempting to utilize the Trustpilot API for sending email review invitations. Before making the call, I need to obtain an access token as per Trustpilot's documentation. However, when implementing the function below, I am encountering an error i ...

CodeMirror version 5.62.3 is experiencing some challenges with the scrollbar functionality, editor size, and line wrapping

During my HTML/CSS/JS coding session, I encountered a challenge with CodeMirror version 5.62.3. Specifically, I was striving to make the scrollbar visible in the code editor, using C# as the language mode. However, despite setting the editor's height ...

Make necessary adjustments to the structure of an AppFog Database for improvements and enhancements

After creating an app in NodeJS using ExpressJS, I successfully hosted it on AppFog. Recently, I made some updates to my local version of the app. Now, I am facing a challenge as I try to update the AppFog version with the changes. The problem arises from ...

Tips on storing JSON array data in mongoose via req.body?

I've been struggling with this issue for some time now. After successfully using JSON and req.body to save data to my MongoDB database in Postman, I decided to work with arrays for the first time. However, I'm encountering difficulties. (Just t ...

Resolve the Prototype_Pollution vulnerability detected by Checkmarx

When executing the code line window.location.search.substring(1) with the word 'substring(1)', an error related to Prototype_Pollution occurs. This error is caused by assigning external properties without proper validation, which can lead to obje ...

Having difficulty parsing JSON data in Swift

My goal is to fetch JSON data from my server and load it into my IOS application. This is the JSON data I am working with: [ { "BankName": "bank1", "CurrencyName": "cur1", "SellRate": "0.65", "BuyRate": "0.55", "OfficialRate": "0.6" ...

Adding elements to an array in MongoDB with PHP 7.2

push() method is supposed to append data, but I'm facing a strange issue. My PHP script is quite simple - it retrieves JSON data and based on that, it searches for an entry in MongoDB to update a specific field. Here's the JSON data from my Mong ...