Is it possible to modify the colors of both columns in Google's material column chart?
Here is the code I am using for options:
var options = {
chart: {
title: 'Event Posting',
subtitle: 'Kairos event posting and student registration',
colors: ['#b0120a', '#ffab91'],
}
};
Unfortunately, the colors attribute doesn't seem to have any effect.
It looks like the color scheme is functioning as expected, but have you considered updating your options array to include colors at the root level? Here's an example of how you could structure it:
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawMaterial);
function drawMaterial() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var options = {
title: 'Motivation and Energy Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
colors: [
'#00f',
'#ff0'
]
};
var materialChart = new google.charts.Bar(document.getElementById('chart_div'));
materialChart.draw(data, options);
}<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>After encrypting an email address using Hiveware Enkoder, the result can be found below. obfuscated code I typically include it directly inside the div as is. However, I would like to streamline my code by placing it in an external file. While I know ho ...
I'm currently working on validating phone numbers using intl-tel-input, following the example provided at Below is the code snippet I've been using: var telInput = $("#phone"), errorMsg = $("#error-msg"), validMsg = $("#valid-msg"); // initial ...
I am encountering an issue with parsing JSON on my server using the body-parser NPM module and Express. The JSON data is not appearing correctly on the server for some reason. Here is a snippet of my server code: ... app.use(bodyParser.json()); app.use(bo ...
I need assistance with my website's "team" section. I am trying to ensure that the member_body divs within the same column as the member img and member header can be adjusted in width. However, they are not aligning vertically or maintaining the same ...
Having difficulty grasping the task at hand. As a Mac user, my goal is to construct a 3D portfolio but I'm facing challenges. The issue lies in JavaScript not appearing on Variants. Upon entering "npm init vite.js/app," a framework is generated, follo ...
Here is the information I have: {product_quantity: {quantity: 13, code: "AAA", warehouse: "1000",}} The product_quantity field is part of a JSON object in a MongoDB database. I am looking to convert it into this format: {"produ ...
Adding some context, I utilize Redux to manage updates in a shopping cart list. Essentially, I retrieve the list, add an item to it, and then update the entire list. However, after executing an action, my cartList does not seem to update. Despite consulti ...
I have a loop hash data stored in a variable called rec. var rec = { }; for (var b = 0; b < 2; b++) { rec['id'+b] = b</p> } Next, I have a piece of JavaScript code that creates a template for a table. var template ='<tab ...
Looking to create a chatroom using node.js. Utilizing the socket.io template for this project. var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); var fs = require(&ap ...
<div style="background-image:url('19.jpg');height:40px;position:fixed;width:1274px">hello </div> I'm trying to keep this div tag in a fixed position, but I also need to set a width for it. It seems like the background image is c ...
Can someone help me? I am trying to display only the unique values of Barangay, specifically 'Talojongon', without any duplicates. Currently, my output looks like this: | Barangay | Disease | __________________________________ | Ta ...
Is there a way to change the key name for result.row when utilizing findAndCountAll in Sequelize? For pagination purposes, I am implementing findAndCountAll. The data structure I receive is as follows: { "count": 8, "rows": [ { ...
Struggling to develop a JS Bookmarklet that scans the source code of the current page for a specific code like "G1_Value_client." If found, I need it to trigger alert A; if not found, trigger alert B. Seeking assistance as I am facing some challenges with ...
In the past, I had a feature that allowed me to change the color of the text from red to green by clicking on a table cell. After introducing Material-UI in my React app and replacing the <td> tags with <TableRowColumn> tags, I noticed that th ...
Looking to modify the style of a div based on screen resolution. Here is an example: @media only (width: 320px){do something} I attempted using this code but it was not successful. Appreciate any assistance! ...
Here is what I have tried: <textarea rows='2' onChange={e => setSomething(e.target.value)} className='form-control text-area ' value={something} placeholder='write something'> </textarea> output: Expected ...
Looking for a way to display text vertically one by one with CSS? While the rotation method produces this result: https://i.stack.imgur.com/utAiN.png However, I aim to achieve something more like this: https://i.stack.imgur.com/fuVyb.png If you have an ...
I've created a basic form: <form class="dataform" method="post" id="settings" action="/"> <input type="radio" name="shareSetting" value="n"/> <input type="radio" name="shareSetting" value="y"/> <input type="button" na ...
I am currently developing a project in three.js where I aim to load a GLTF file consisting of geometric shapes. My goal is to extract information, specifically the name, of the shapes that are clicked within the GLTF file. At this stage, I am using console ...
I currently only have the following code snippet: const Sequelize = require('sequelize'); const sequelize = new Sequelize('database', 'root', 'passwd', { host: 'localhost', dialect: 'mysql', ...