Adding fresh data to a C3.js line graph

Question

Adding fresh data to a C3.js line graph

I am attempting to dynamically update a C3.js line chart using a function that retrieves a set of x and y values from a database. The function I want to use for inserting the data is:

function insertGraph(yAxis, xAxis, Header) {
    setTimeout(function () {
        console.log("starting");
        chart.load ({
            bindto: "#graph",
            xs: {
                'y':'x'
            },
                columns: yAxis, xAxis   
        });
    }, 100);
}

The input data for the function looks like this: yAxis:

["y", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]

xAxis:

["x", 0, 131.35, 26971.3, 27044.75, 27351.4, 27404.483333333334, 27419.416666666668, 33128.96666666667, 33549.13333333333, 34049.48333333333, 77464.26666666666, 77609.71666666666, 174171.85, 259166.98333333334]

Header:

MakeModeChange #just a string

It seems there may be an error in my approach, any assistance would be greatly appreciated

javascript d3.js c3.js

Answer 1

Answer №1

If you ever find yourself needing a solution, I was able to resolve my issue by tweaking the "columns" section (it must be enclosed in square brackets []). Below is the corrected code for your reference:

function generateChart(yAxis, xAxis, Title) {
    setTimeout(function () {
        chart.update ({
            bindto: "#graph",
            xs: {
                'y-axis':'x-axis'
            },
            columns: [
                yAxis,
                xAxis
            ]   
        });
    }, 100);
}

Answer 2

If you ever find yourself needing a solution, I was able to resolve my issue by tweaking the "columns" section (it must be enclosed in square brackets []). Below is the corrected code for your reference:

function generateChart(yAxis, xAxis, Title) {
    setTimeout(function () {
        chart.update ({
            bindto: "#graph",
            xs: {
                'y-axis':'x-axis'
            },
            columns: [
                yAxis,
                xAxis
            ]   
        });
    }, 100);
}

Adding fresh data to a C3.js line graph

Answer №1

Similar questions

Having trouble accessing functions in Typescript when importing JavaScript files, although able to access them in HTML

Could there be a more efficient method to enable support for all video formats?

Highlight text when the user is scrolling the page - using JQUERY

When interacting with the iframe in an Ionic3 app, it suddenly crashes

Transfer information via query or retrieve from storage in Vue

JavaScript for beginners: show a specified amount of search results and insert a loading indicator at the end

Discover the basics of incorporating libraries using npm

Is there a way to determine the actual time or percentage completion of a file upload using Telerik RadUpload?

Understand which form has been submitted

What could be causing my function to not successfully retrieve elements based on their text content?

Tips for dynamically assigning unique IDs to HTML form elements created within a JavaScript loop

Tips for sending a property to a function that is imported and produces a component in React

The .get function is functioning properly during development, but encountering issues in the production environment

A guide on removing an element from a state array in a React functional component for a To-Do List application

How to enhance mouse tracking beyond browser window boundaries in Three.js and across various page elements

When you click on the submit button, it triggers the associated event

Transitioning to the Bootstrap library from the jQuery library with the use of several image modals

In Snowflake, SQL error handling block fails to execute

Enter your text in the box to search for relevant results

Tips on avoiding a page reload following a form submission using JQuery