Create compelling visual representations by utilizing Google charts to draw customized charts based on variable

I have been attempting to create a chart using Google Charts by passing some parameters to the function. I am trying to use these parameters to populate the data, but it doesn't seem to be working as expected. Is it possible to include parameters in this function since I am not familiar with what occurs inside the google.charts.setOnCallback() method?

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart(scoreForEachSkill, skillList) {

var data = new google.visualization.DataTable();
data.addColumn('string','Skill');
data.addColumn('number','Score');
for(var i=0;i< scoreForEachSkill.length;i++)
{
    data.addRow(skillList[i],scoreForEachSkill[i]);
}

var options = {'title':'Skills', 'width':610, 'height':390};
var chart = new 
google.visualization.PieChart(document.getElementById('pieChart'));
chart.draw(data, options);
}

The HTML and CSS section:

<div id="pieChart" style="margin-left:-10px;margin-right:-10px;"></div>
javascriptchartsgoogle-visualization

Answer №1

If you're working with the load callback that doesn't accept any parameters, you can handle it by using an intermediary function.

google.charts.load('current', {
  packages: ['corechart']
});

google.charts.setOnLoadCallback(function () {
  drawChart(score, skill);
});

Alternatively, you can place the callback directly within the load statement.

google.charts.load('current', {
  callback: function () {
    drawChart(score, skill);
  },
  packages: ['corechart']
});

Keep in mind that the callback only needs to be called once per page load, not every time you want to draw a chart. You can work around this by calling multiple charts like this:

google.charts.load('current', {
  callback: function () {
    drawChart(score1, skill1);
    drawChart(score2, skill2);
    drawChart(score3, skill3);
  },
  packages: ['corechart']
});

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 challenge of executing JavaScript in the correct order

I am facing an issue where 5 always prints before 4 in my code snippet below. I expected the callback to postUsers within a return statement from matchAgainstAD to wait for the completion of the for loop and ad lookup before returning. What is the simple ...

javascript

Incorporating mootools scripts into a gwt application

My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...

javascriptcssgwtmootools

Guide on sending two values from a form using Ajax and the POST method

How can I send two values, A and B, from a form to check.php using Ajax with the POST method? In the code snippet below, I managed to send two input values to check.php and assign them to variables $A and $B. However, I want to accomplish this without ref ...

javascriptphpjqueryhtmlajax

Guide on invoking an Angular 1.5 component with a button press

Having just started learning Typescript, I'm struggling to figure out how to call my Angular component "summaryReport" on a button click. Here's a snippet of my code: Let's say I have a button that should call my component when clicked with ...

javascriptjqueryangularjs

What sets apart a class from a service in NativeScript?

I am embarking on the journey of learning Nativescript + Angular2, and while reading through the tutorial, I came across this interesting snippet: We’ll build this functionality as an Angular service, which is Angular’s mechanism for reusable classes ...

javascriptangularnativescriptangular2-servicesangular2-nativescript

Is it possible to utilize the Node.JS PassThrough stream as a straightforward input buffer?

In my Node.js application, I am utilizing a subprocess referred to as the "generator" to produce data. The challenge arises when the generator occasionally outputs a large chunk of data at a speed of around 50MB/s, while generally operating at a much slowe ...

javascriptnode.jsasync-awaitnode-streams

Exploring Vue.js: Leveraging v-bind for multiple classes in Vue.js applications

Can someone assist me in figuring out how to apply multiple options to v-bind:class? In my Uno game, I need to determine the text color of cards based on their color property stored as a list of objects like this: ([{ Color: green, Value: 6}]. Here is my ...

javascripthtmlvue.jsvuejs2vue-component

Enhance your Angularfire experience with $firebaseArray by enabling dynamic counting and summing

Is there a way to dynamically count certain nodes if they are defined? The current implementation requires explicitly calling sum(). app.factory("ArrayWithSum", function($firebaseArray) { return $firebaseArray.$extend({ sum: function() { var ...

javascriptangularjsarraysfirebaseangularfire

Having trouble accessing the downloaded file from S3 using Angular and NodeJS

Currently, I am facing an issue while attempting to download a jpg image from amazon S3 using the NodeJs SDK. Although I can successfully retrieve the file object on the backend, encountering difficulties arises when trying to create a blob object and down ...

javascriptangularjsnode.jsamazon-s3

Simple Way to Modify Color of Active Page Link - HTML, CSS, and JavaScript

I found a helpful example on how to change link colors for the current page here. Here is the script I added: <script> // current page highlight $(document).ready(function() { $("[href]").each(function() { if (this.href == window.l ...

javascriptjqueryhtmlcsshyperlink

Tips for designing a Quasar page that dynamically loads content as the user scrolls

I am attempting to develop a component that will render multiple elements as the page is scrolled. I am utilizing the Quasar framework for Vue.js. Below is the code required to render a single block containing information from a JSON file: Quasar comes wi ...

javascriptvue.jsquasar

Show the entire phrase within a Bootstrap modal with the help of jQuery, instead of just the initial

I have a PHP script that fetches a name from a database, and I'm using jQuery to display that name as HTML inside a Bootstrap modal when a button is clicked. However, the issue I'm facing is that when the name contains spaces, only the first word ...

javascriptphpjquerybootstrap-modal

What is the best way to delete a model from a Backbone.Collection?

How can I properly remove a model from a collection in Backbone.js? var item = new Backbone.Model({ id: "01", someValue: "blabla", someOtherValue: "boa" }); var list = new Backbone.Collection([item]); list.get("01").destroy(); After calling ...

javascriptarraysbackbone.js

What is the best way to transfer data from a div tag to an li tag using JavaScript?

https://i.stack.imgur.com/se2qk.pngI am attempting to change the div tag content to li tag. Here is a snippet of the code from inspect for reference. I need to remove the div tag with the "domTitle" class. <li style="display: inline;" id="list_name"> ...

javascripthtmlcss

Is jest the ideal tool for testing an Angular Library?

I am currently testing an Angular 9 library using Jest. I have added the necessary dependencies for Jest and Typescript in my local library's package.json as shown below: "devDependencies": { "@types/jest": "^25.1.3", "jest": "^25.1.0", ...

javascriptangulartypescriptjestjsangular-library

Encountered an issue while compiling code using the Istanbul plugin

I'm currently working on generating a code coverage report for my ReactJS project using the babel-istanbul-plugin. However, when I incorporate "istanbul" as a plugin in my .babelrc file and attempt to build, I encounter the following error: ERROR in ...

javascriptreactjsbabeljsistanbul

Exploring a JSON file to generate a customized array for implementing autocomplete functionality in jQuery

I'm currently working on developing an autocomplete feature for a search bar that will display names of places in Norway. The data is being fetched from a REST API URL provided by a third party. As an example, when the input is "st" there are two res ...

javascriptjqueryjsonrestautocomplete

Using Node/Express to split the request headers with the .split() method

I am currently working on a way to determine if a specific item exists in the req.headers in order to make a decision on what to send back to the user. Here is my code snippet: function serveAppData(req, res) { console.log("CHECKME", req.headers); //var h ...

javascriptnode.jsexpress

Display a specific tab section upon clicking using jQuery or JavaScript

Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items ...

javascriptjquerycsshtml

The Material-ui bug: multiple instances of the modal opening when a button is clicked

I have the following code in my render() method: render() { const classes = this.useStyles(); return ( <Paper style={classes.root}> <Table style={classes.table}> <TableBody> {this.state.deadTopics ...

javascriptreactjsmaterial-ui