What is the best way to display label information on a Google line chart?

line graph column graph

My graph continuously calls the Controller to fetch recent data from the Database.

There are two lines on the graph, and I would like to display the names of each line (column) such as red=counts of something // brown=counts of something else.

On my other bar graph, there is a line information with color, and column names highlighted. How do I include that information?

Below are snippets of code related to my line graph:

o.data = new google.visualization.DataTable();
        o.data.addColumn('string', 'time');
        o.data.addColumn('number', o.name);
        o.data.addColumn('number', o.name2);
        o.data.addRow(['', 0, 0]);

Answer №1

It seems like you may need to create an options object and customize your chart according to your preferences, such as adding a legend to your bars or lines.

Here's an example from the Google Chart documentation:

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

function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
     'Western', 'Literature', { role: 'annotation' } ],
    ['2010', 10, 24, 20, 32, 18, 5, ''],
    ['2020', 16, 22, 23, 30, 16, 9, ''],
    ['2030', 28, 19, 29, 30, 12, 13, '']
  ]);

  var options = {
    width: 600,
    height: 400,
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '75%' },
    isStacked: true,
  };

  var view = new google.visualization.DataView(data);

  var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
  chart.draw(view, options);
}

Fiddle: https://jsfiddle.net/b0jghv4z/

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

Steps to ensure my collapsible is open from the start

Is there a way to have the collapsible content open by default without much hassle? I'm a bit lost here and could use some guidance. I must confess, I'm not very familiar with this, so hopefully, it's not too complicated. While my question ...

The jQuery .click() function is not triggering when clicked

$("#backButton-1").click(function() { $("#form-2").empty(); $("#form-1").show(); }); I am experiencing trouble with this code snippet. The form-1 element is hidden, and the backButton-1 is created after the end of for ...

JavaScript function to convert a string of characters into a readable time format

Is there a way to input a string in an 'input type="time"' field in my HTML code? <label class="item item-input"> <span class="input-label">Departure Time </span> <input type="time" ng-model="heur ...

Failed to access the 'totalQty' property as it is undefined

I have developed a cart object that can hold products in a shopping cart. The issue arises when an item is undefined before it gets added to the cart. How can I ensure that the cart is defined even when it's empty during the session? I am using ejs. ...

What is the best way to utilize variables in order to style this image inside a selector?

Struggling with adding dynamic styling to an image inserted into a div through a selector. Despite successful testing of the style changes, I am stuck on how to assign variable values for the properties. Various syntax attempts have failed so far. functi ...

Guide to invoking a server-side function through JSON data?

Here is the code I am working on: <script type="text/JavaScript> var myarray = new array(); function getsvg1() { $.ajax({ alert("hello"); type: "post", url: "WebForm1.aspx/getsvg1", ...

What is the best way to align text in the center of a div?

I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...

Accessing composable variables in Vue 3 without having to redefine refs from within a function

Currently, I am implementing a parent companyList component along with a reusable Table component and an useFetch composable in vue 3.2. Prior to integrating the Table component, my code looked like this: companyList <script setup> import { com ...

In my specific scenario, what is the most effective method for retrieving data from an EntityFramework database using JavaScript?

Currently, within my ASP.NET MVC Core2 project, I have a model in the EF database that contains multiple properties: public class SchoolEvents { public long ID { get; set; } [Required] [StringLength(40, ErrorMessage = "Max 40 c ...

Utilizing React JS to Activate the Glyphicon Calendar Icon on Click

Could someone please advise on how to make the calendar glyphicon activate the datetime picker upon clicking? I have a button currently but it is not functional. I've been searching for React-specific solutions without success. <div className={cla ...

Displaying Vue v-for data in console.log

One interesting issue arises when printing a list in HTML and checking the output in HTML versus in console.log. It seems that the output is duplicated in the console. After some investigation, I made the following observations: Not showing the product ...

Implementing dynamic title insertion into a popover element using jQuery

My goal is to assign a title to my popover object in a local project. I have already included the following files: bootstrap.css v4.2.1 jquery.min.js v2.2.0 bootstrap.min.js v4.2.1 popper.min.js v1.11.0 Initially, there was a basic button present. <i ...

The mystery of why gulp-watch fails to remove files

I need help figuring out why my gulp-watch task isn't deleting files from the /dest directory when I delete them from /src. Can someone spot the issue? var watch = require('gulp-watch'); var imagemin = require('gulp-imagemin'); ...

Prevent any further dissemination if I continue typing repeatedly

As I develop a custom search engine for a website, the search functionality operates through AJAX on keyup events. This means that when you begin typing (assuming you type more than two characters and after any leading or trailing spaces are removed), an A ...

Having trouble accessing an element after parsing JSON using jQuery, ending up with an "

Here is a snippet of code with a text and a button: <div id="divtest"> <h1> Bla </h1> </div> <button id="dugme1"> dugme </button> When the user clicks the button, the following script will be executed: $("#dugme1").cl ...

Ways to showcase a JSON menu with a single level

I have a json file containing links to all the images in a specific folder, as shown below: ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"] I would like to create a <ul> list using this data, but I'm not sure how to d ...

Is React failing to insert a span element in the client-side code?

First off, I'm a beginner in the world of react and recently tackled this guide on creating a real-time Twitter stream To cut to the chase, I wanted to include a link next to each tweet that followed its text. To achieve this, I simply added props to ...

The JOI validation process is failing to return all error messages, even though the "abort early" option

I have been encountering an issue while trying to validate my payload using a joi schema. Instead of returning the errors specified in the schema, only one error is being displayed. Even when I provide a payload with name as "int", it only shows one custom ...

What is the process for clearing the cache of a crawling URL?

Currently, I am operating a crawler that gets triggered through an expressjs call. However, whenever I make the same request again, the crawler runs once more but indicates that all routes have already been completed. I even went to the extent of deleting ...

What is the best method to determine the current scroll position using JavaScript?

Presently, I am focusing on implementing scroll to top button functionality. The button appears when the content is scrolled to the bottom. My goal is to store the last position when the scroll to top button is clicked so that the user can return to that ...