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:

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

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

Instructions on transferring a JSON object to a RabbitMQ server

I am utilizing spring3 along with spring-amqp to transmit messages from my web application to a rabbitmq server. Currently, I can only send plain text to the rabbitmq server. However, I now desire to send my custom java object as JSON to the server. Upon ...

Unleashing the power of JavaScript: Sharing arrays and data structures effortlessly

Currently, I am utilizing HTML & JavaScript on the client side and NodeJs for the server side of my project. Incorporated in my form are multiple radio buttons. When the user clicks on the submit button, my intention is to post the results to the server. ...

Handling and iterating through unfamiliar objects in AngularJS

I've been exploring the concept of generics in ASP.NET MVC for a while now, and it got me thinking about how generics are used in other languages like AngularJS. Let's say I have 2 endpoints to work with: www.listofstudents.com/all and www.list ...

Utilizing dynamic JavaScript values in URL parameters before sending

When it comes to online payments, I need to send parameters to a specific URL. The calculations on my website are done in JavaScript, but the online payment company requires PHP parameters like MD5 hashing. To address this, I attempted to create a hidden ...

Extract information from a JSON string and present it on the screen

I am a complete novice when it comes to D3 (with very little experience in JS). Here are the lines of code I am working with: <script type='text/javascript'> data ='{"mpg":21,"cyl":6,"disp":160,"hp":110,"drat":3.9,"wt":2.62,"qsec":16. ...

The issue of the keyboard disappearing on Chrome for Android while switching between different input

Issue with Input Switching on Chrome for Android I am facing difficulty when trying to switch between two input fields. The HTML code is as follows: <input type="text"/> <input type="text"/> When I enter text in the first input and click on ...

Utilize JSON data loading instead of directly embedding it onto the page for improved website

I've integrated Mention.js into my website, allowing a dropdown list of usernames to appear when "@" is typed in a designated textarea. <textarea id="full"></textarea> While it's functioning well, the examples provided only show how ...

Utilizing Angular and Express for routing with the seamless integration of html5mode

I'm facing an issue with making angular and express routing work together with html5mode enabled. When I change state from '/' to my admins state, everything works fine until I refresh the page. Then I only get a json result of admins but my ...

Troubleshooting problem with Zscaler and Ajax communication

When making an AJAX call on my website, everything runs smoothly except for when it is accessed behind a Zscaler proxy. In that case, the browser throws a CORS error: "No 'Access-Control-Allow-Origin' header is present on the requested resource. ...

Converting Python data structures to JSON format and then back to YAML

As someone new to Python, I am currently working on a simple program that can parse YAML to JSON and vice versa. Issue arises when using yaml2json as it converts YAML to JSON in a single line format. Despite this, a JSON validator confirms its correctness ...

Restrict access to table records by specifying an array of row identifiers

Hi everyone, I've encountered a small issue. Just to provide some background, I have a table with checkboxes. Each row in the table has an associated ID, and when selected, I receive an array like this: const mySelectedRoles = [1997, 1998, 1999] Once ...

The enableCompression feature is not being recognized by ScriptResource

Currently in the process of migrating an Asp.net 2.0 web application from Windows Server 2003 to Windows Server 2012, encountering a specific error on the new server. “HTTP Error 500.19 - Internal Server Error”. Config Error: Unrecognized attribute &a ...

Display the keys of a nested array in Vue.js when the structure is unknown

Here is a representation of a dynamic array I have: nodes: [ { n1: "Foods", }, { n4: "Drinks", b7: [ { a2: "Beers", a4: [ ...

What is the method to load only specific element contents using .load() rather than the entire web page?

I have a web page that allows users to add, edit, and update different sections. These segments are stored on an external page, and I use the jquery .load() function to achieve this functionality. However, I am facing some concerns regarding this process: ...

Material UI: Easily adjusting font size within Lists

When developing forms with react js and material UI, I encountered an issue with changing the font size within lists to achieve a more compact layout. The code fontSize={10} didn't seem to have any effect regardless of where I added it. Is there a wa ...

Converting a file full of JSON hashes into valid JSON using Ruby

Recently, I encountered a challenge where I received a text file from the server generated by an unalterable script. The contents of this file are formatted like "strings" of JSON data and my goal is to convert them into actual JSON using a Ruby script... ...

Express server continuously returning 404 error for all requests originating from the index page

Experiencing a challenge with the express/gulpfile.js code. Express can serve the index.html without issue, but it fails to navigate to the lib/* directory resulting in all requests for resources at the top of my index.html returning 404 errors. Browser-s ...

Vue-router and middleman combination displaying '404 Error' upon page refresh

I'm in the process of developing a website that utilizes Middleman (Ruby) on the backend and VueJS on the front end, with vue-router managing routing. Specifically, in my vue-router configuration, I am rendering the Video component on /chapter/:id as ...

Transfer the values selected from checkboxes into an HTML input field

I am attempting to capture the values of checkboxes and then insert them into an input field once they have been checked. Using JavaScript, I have managed to show these values in a <span> tag successfully. However, when trying to do the same within a ...

Requesting data from server using Ajax with multiple JSON responses

I'm facing a situation where my Ajax script calls a PHP file to make a query to MySQL and then formats the response in JSON. The challenge is that I need to retrieve data from different tables based on the id sent with the Ajax call. Some tables retur ...