The error message "Data type must be consistent across all series on a single axis in Google Chart" may cause confusion

I'm struggling with an error message that appears when I try to run my Google chart. Here is the code I am using to generate the chart.

function (resultVal) {
    var arrMain = new Array();//[];
    for (var i = 0; i < resultVal.length; i++) {
        var arr = new Array(resultVal[i].ScaleMin, resultVal[i].CountryNo, resultVal[i].ScaleMax, resultVal[i].Currency);
        arrMain.push(arr);
        }
        var data = new google.visualization.DataTable();
        data.addColumn({ type: 'number', id: 'ScaleMin', label: 'ScaleMin' });
        data.addColumn({ type: 'number', id: 'CountryNo', label: 'CountryNo' });
        data.addColumn({ type: 'number', id: 'ScaleMax', label: 'ScaleMax' });
        data.addColumn({ type: 'string', id: 'Currency', label: 'Currency' });
        data.addRows(arrMain);
        var options = {
        'title': 'Salad Entry',
        'width': 800,
        'height': 600
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        $.ajax({
        url: "SaladEntry/SaveToLocal",
        type: "POST",
        data: { 'jsonData': chart.getImageURI() },
        success: function (ret) {
        alert(ret);
        }
        });
        });
        chart.draw(data, options);

Upon loading the chart, I encountered this error message:

https://i.sstatic.net/pEJq9.png

Additionally, here is the array I have set as the datasource of my chart:

https://i.sstatic.net/ave9Z.png

javascriptjsonajaxchartsgoogle-visualization

Answer №1

When using a chart, remember that only the 'string' data type can be used on the x-axis or as the first column.

However, there are exceptions when it comes to annotations, tooltips, or other column roles.

If you encounter an issue with a particular column, such as the currency column below:

data.addColumn({ type: 'string', id: 'Currency', label: 'Currency' });

If you wish to include currency as an annotation, you need to specify the role property:

data.addColumn({ type: 'string', id: 'Currency', role: 'annotation' });

This will display the value in the currency column as a label above each point for the series column named 'ScaleMax'.

Remember, column roles only affect the series column immediately following them.

Each chart type has a specific data format indicating what types of data each column can contain.

These rules apply across various common chart types like line, area, column, bar, and more.

EDIT

Below is a working code snippet demonstrating how to work with Google Charts:

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn({type: 'string', label: 'x'});
    data.addColumn({type: 'number', label: 'y'});
    data.addColumn({type: 'string', role: 'style'});
    data.addRow(['one', 1, 'color: green']);

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, {
      legend: 'none'
    });
  },
  packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

Tips for preventing an MVC 4 ajax application from automatically redirecting to LogIn.Aspx

For our latest project, we are transitioning from MVC 3 to MVC 4 and implementing Ajax calls to fetch most of the content from the server. In MVC 3, we had the following configuration in the web.config file: <authentication mode="Forms"> ...

c#ajaxasp.net-mvcauthenticationasp.net-mvc-4

Unit Testing Angular: Mastering Unit Testing for the .map() Function

I am in need of testing a service method, but I am unsure about how to achieve complete coverage for the code that gets executed as a result of calling another injected service method. The Service Method to be tested: @Injectable() export class BomRevisi ...

javascriptangularunit-testingjasmineangular-unit-test

Creating a dynamic model that is serializable involves following a specific set of steps

I'm currently working on developing a dynamic serializable model. Here is an example of the JSON serialization format: { "Job" : { "LensJobId" : "123546" "JobTitle" : "Manager" "PostingDate" : "2013-11-20" } "Job ...

c#.netjson

The collaboration between a JSON response and Node.js allows for seamless

Within my node app, I am passing a series of queries as an Object. It is crucial for me to structure the request in an exact format. Here is an example of my request: {q0:{query0},q1:{query1},q2:{query1}} The expected response should look like this: {q0 ...

jsonnode.js

Troubleshooting issue with setting variables in Firefox's JavaScript

I have created a small JavaScript script that defines a value (referred to as stock), which I want to set as the maximum in a dropdown list. It will be set as the maximum value if it exceeds 6. Below is the code snippet: <script type="text/javascript" ...

javascriptfirefoxvariables

How can I reference MyClass.new as a method in Typescript?

Within my code, I have an array of objects and each object is structured like this: { id: 'string', name: 'string' } There's a class defined as follows: class User { constructor(obj: Record<string, string>) { Object.as ...

javascripttypescript

Transmitting the character symbol '&' within a string from Angular to PHP

My goal is to transmit a string, such as "the cat & the dog", from Angular to PHP using GET method. I have used encodeURI(note) in Angular and in PHP $note = $_GET['note']; $note = mysql_real_escape_string($note); However, when it gets inse ...

javascriptphpangularjs

Eliminating backslashes when transforming data in Mule 4 with DataWeave

I'm currently working on a data integration project in Mule 4 where I am retrieving information from an SQL Server Database and converting it into JSON. However, I have encountered an issue where my input contains a single backslash that gets transfor ...

jsondataweave

Data not displaying in selected option after selection

I'm having an issue retrieving the list of "states" once I choose a "country". The country list displays correctly, but upon selecting a country, the states do not appear in the dropdown selection. I am using ajax to send data to ajaxData.php from i ...

phpjquerymysqlajax

MongoDB does not recognize Db.Collection as a valid function

A lot of people have been inquiring about this specific error, but after thorough investigation, I couldn't pinpoint a similar issue. So I'm reaching out in the hopes that someone might be able to identify and help rectify it. Let me provide som ...

javascriptnode.jsmongodbexpress

What is causing setTimeout to not function as intended?

I'm having some trouble moving a <div id="box"> whenever my mouse hovers over it. Currently, the element only moves when I trigger the mouseover event on the div itself instead of when my mouse is actually hovering over it. document.getElements ...

javascripthtmldhtmlx

Attempting to modify the information within the #content division of a webpage through the activation of a linked image within a jquery slideshow

I'm completely stuck on this one, even though I'm relatively new to jquery. My goal is to design a webpage where there is a slideshow of products at the top, and when a user clicks on one of the products, it should update the main #content div w ...

javascriptjquery

ES6 component rendering is malfunctioning on CodePen

class PlayfulPaws extends React.Component { constructor(props) { super(props); }; render() { return ( <div> <DIV /> <JSX /> <aClassDiv /> </div> ); }; }; ReactDOM.render(&l ...

javascriptreactjsjsxes6-class

Confirming the browser exit on IE9

While searching on stackoverflow.com, I noticed an abundance of inquiries about a specific issue, but unfortunately, there doesn't seem to be a clear answer available. Apologies if this adds to the duplicate questions. In my Ajax-based web applicatio ...

javascriptjqueryinternet-explorer-9

When converting to a React Functional Component using Typescript, an error occurred: The property 'forceUpdateHandler' could not be found on the type 'MutableRefObject<Spinner | null>'

Looking to convert the App component in this CodePen into a Functional component using Typescript. Encountering an error when attempting to run it: ERROR in src/App.tsx:13:14 TS2339: Property 'forceUpdateHandler' does not exist on type 'Mu ...

javascriptreactjstypescriptreact-typescript

Error message "Jquery smooth scrolling issue: Unable to retrieve property 'top' as it is not defined"

I'm currently working on a script for a back to top button that will be placed in the footer of my website. However, I'm running into an issue where I'm getting an error message saying "Cannot read property 'top' of undefined". Any ...

javascriptjqueryhtmlscrolljquery-animate

What is the best way to use scrollIntoView() to display an additional item at the top or bottom of the visible area

When implementing scrollIntoView() with navigation buttons (up and down), I aim to display two items at a time to signal to the user that there are more items to navigate. However, the first and last items should retain their default behavior so the user u ...

javascriptcssscroll

Encountering an error while attempting to fetch JSON data from the JSON column type in MySQL 5.7 through Laravel 5.2

I am currently utilizing MySQL 5.7, Laravel 5.2, and PHP 5.6.17 within my application. Initially, I created a migration table with the following schema: public function up() { Schema::create('admin_login_history', function (Bluep ...

jsonlaravel-5php-5.6mysql-5.7

Achieving ajax loading with URL change without triggering a page redirection

When browsing on Facebook, you may have noticed that when moving from one page to another, the entire page does not reload or redirect; instead, the URL changes as you navigate. This is especially noticeable when chat windows are open, as they stay in plac ...

ajaxurl

Exploring Symfony2 controller integration with Javascript arguments

I am currently working on a project with Symfony2 and I have a question regarding receiving arguments from a template in a controller. My goal is to take the value of the argument and store it in the database. The argument's value will be generated by ...

phpjavascriptjquerysymfony