Incorporating data sets from an already established highcharts chart

I created a chart using highcharts and I am looking to update it, but I am struggling with this particular line of code that is adding random data instead of the data I want to use from JavaScript.

// Add the new series.
chart.addSeries({ data: Highcharts.map(Array(12), Math.random) }, false);

Additional code:

 $(".test").change(function() {
    var value = this.getAttribute("value");
    while (chart.series.length > 0) {
        chart.series[0].remove(true);
    }
    if (value == 'a') {
        loadA(chart);
    } else if (value == 'b') {
        chart.xAxis[0].update({categories: ['Sun', 'Mon', 'Tue']});
        chart.addSeries({
            name: 'Rainfall4',
            type: 'column',
            color: '#FF00FF',  
            data:[100, 280, 300, 490, 670, 900]             
        });            
        chart.yAxis[0].setTitle({ text: "Raw" });
    } else if (value == 'c') {
        chart.xAxis[0].update({categories: ['Oranges',  'Pears', 'Pinneaples',  'other']});

Check out the Jsfiddle link below:

http://jsfiddle.net/VnCgx/9/

For a similar effect, you can use:

  chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4] );
});

Answer №1

here is the solution for you

function updateChartData(chart) {

// Clear all existing data points.
/*
while (chart.series.length > 0) {
    chart.series[0].remove(false);
}
*/

// Add new data points to the series.

 chart.series[0].setData([120.5, 139.8, 165.2, 129.3, 142.7, 212.6, 199.3, 100.8, 58.2, 31.5, 70.7,   105.2]);
chart.redraw();

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

The system encountered an issue while trying to access the 'bannable' property, as it was undefined

message.mentions.members.forEach(men => { let member = message.mentions.members.get(men) if (!member.bannable) return message.reply(not_bannable) const reason = args.slice(1).join(" "); member.ban({reason: reason ...

Unable to display the string following a space in the value attribute of an hbs file

<input type="text" class="form-control" id="exampleInputEmail2" name="productName" value={{product.productName}} > When I input 'Smart Phones' into product.produc ...

Unable to locate an element on the webpage due to a JavaScript-based error, which then becomes hidden after a few seconds. (Registration form)

While completing a registration form, I encounter a hidden message after clicking on the register button. Struggling to locate this elusive element has been an ongoing challenge for me. Unfortunately, my attempts to find the element have been unsuccessful ...

The number of child notes can vary depending on the browser being used

Having an issue with a JavaScript function that is supposed to read an XML file. function readXML() { alert("readXML"); if(xmlDoc.readyState == 4 || xmlDoc.readyState == 'complete') { for(var i=0; i < xmlDoc.getElementsByT ...

Tips for retrieving page source with selenium Remote Control

Looking to Develop a Basic Java Web Crawler. WebDriver driver = new HtmlUnitDriver(); driver.get("https://examplewebsite.com"); String pageSource=driver.getPageSource(); System.out.println(pageSource); The result is as follows: <!DOCTYPE html PUBLIC ...

Customize the appearance of radio buttons in HTML by removing the bullets

Is there a way for a specific form component to function as radio buttons, with only one option selectable at a time, without displaying the actual radio bullets? I am looking for alternative presentation methods like highlighting the selected option or ...

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

I have exhausted all options and tried various email hooks without success. I inherited an outdated PHP code that was developed by someone else, which I updated for new woocommerce hooks (since the code is 4 years old). Everything is functioning smoothly e ...

Encountering the error "Cannot access property 'stroke' of undefined" when utilizing constructors in React and p5

Hi there, I'm having trouble with my React code and could really use some assistance. Being new to React, I'm trying to create a collision system between multiple bubbles in an array, but I keep running into this undefined error: https://i.sstat ...

Unable to cache new entry at the specified location (/Users/android/.gradle/7.5.1/checksums/sha1-checksums.bin) due to a java.io.IOException with the message "Bad file descriptor"

I encountered two errors when trying to run my React Native project. Issue 1: Failed to add entry '/Users/saadafridi/.gradle/.tmp/gradle_download14928641310389655157bin' to cache sha1-checksums.bin (/Users/saadafridi/Desktop/mobileapp/android/.g ...

Changes are not being detected in new Angular 2 files

Currently, I am enhancing an Angular 2 project by incorporating new modules. However, the changes I made in these files are not being recognized within the project. I have attempted to research how change detection functions in Angular 2, but have not bee ...

Having trouble obtaining the serialized Array from a Kendo UI Form

I am working on a basic form that consists of one input field and a button. Whenever the button is clicked, I attempt to retrieve the form data using the following code: var fData = $("#test").serializeArray(); Unfortunately, I am facing an issue where I ...

Exploring the possibilities of combining DOM and Express in web development

app.post('/result.html',function(req,res){ var num1 = req.body.Num1 ; var num2 = req.body.Num2 ; var operator = req.body.Operator ; var result =0 ; switch (operator) { case '+': result = Number(num1)+Number(num2) ; ...

AngularJS - Array binding issue not updating in directive

I am currently developing a directive that has the ability to display a series of controls. Each individual control is implemented as a directive named fsFilter. In the controller managing the parent element, I establish a binding between the filters arra ...

Unexpected Issue with JavaScript Ajax (Using jQuery.post): The Promise State Turns to "Rejected"

Recently, I've been encountering some issues while trying to debug my jQuery.post() call. The responses I'm getting are quite puzzling and I'm at a loss on how to proceed next. If anyone has any suggestions or insights, I would greatly appre ...

Creating a fixed sidebar that remains visible while scrolling in Next.js

Currently, I am faced with the challenge of implementing two components - a feed and a sidebar. The sidebar contains more content than it can display at once, so I want it to be able to overflow. My goal is to have the sidebar scroll along with the content ...

The <b-list-group-item> component in a Vue.js CLI application using bootstrap-vue is failing to render

My Vue-CLI app uses Bootstrap-vue and axios to fetch JSON data. The HTML code in my App.vue displays the data using UL and LI tags: <p v-if="loading">Loading...</p> <ul v-else> <li v-for="(value, key) in post" :key="key"> ...

Enhance efficiency of repetitive tasks involving accessing the Mongo database

Currently, I am developing a chat bot using MeteorJS/NodeJS, which engages with approximately 2,000 active users on a daily basis. Tracking the number of individuals who interact with the bot each day is made possible by storing their activity information ...

Continuously unveil a circle in a repetitive sequence

I'm currently working on a project that involves a scanline effect, and I have a Codepen snippet displaying my progress (Codepen link). However, I want to take it a step further by gradually changing the color after the scanline has passed, similar to ...

Develop a custom JavaScript code block in Selenium WebDriver using Java

Recently, I came across a JavaScript code snippet that I executed in the Chrome console to calculate the sum of values in a specific column of a web table: var iRow = document.getElementById("DataTable").rows.length var sum = 0 var column = 5 for (i=1; i& ...

JavaScript module encounters an uncaught error: Attempting to assign a value to a constant variable

In another module, I defined a variable in the following manner: // module1.js let directory; export { directory }; Now, I am trying to access it in a separate module like so: // module2.js import { directory } from '../js/module1.js'; directo ...