c3.js Error: The value of b is not defined

Struggling to create a graph using a JSON object generated in PHP. Despite following the documentation example, I keep encountering a TypeError: b.value is undefined in the JS log. The data seems to be structured correctly.

for($i = 0; $i < 10; $i++){
  $da=date("Y-m-d", strtotime('-'. $i .' days'));
  $a=mt_rand(150,200);
  $b=mt_rand(100,150);
  $ar["date"][]=$da;
  $ar["Score"][]=$a;
  $ar["ScoreB"][]=$b;

}  
 $all=json_encode($ar);      

 <script>
    var arr=<?php echo $all; ?>;
    var chart = c3.generate({
         bindto: '#scoring',
        data: {
            json: arr,
            type: 'spline',
            keys:{
                x:'date'
            }
        },
        color: {
            pattern: ['red', 'orange']
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                }
            }
        }
    });

The Object:

{"date":"2016-05-09","2016-05-08","2016-05-07","2016-05-06","2016-05-05","2016-05-04","2016-05-03","2016-05-02","2016-05-01","2016-04-30"],"Score":[182,163,196,153,180,154,170,177,191,173],"ScoreB":[121,149,138,113,104,107,111,109,119,132]} 

Tried reformatting the object as follows:

[{"date":"2016-05-09","Score":191,"ScoreB":119},{"date":"2016-05-08","Score":166,"ScoreB":140},{"date":"2016-05-07","Score":172,"ScoreB":103},{"date":"2016-05-06","Score":187,"ScoreB":139},{"date":"2016-05-05","Score":162,"ScoreB":100},{"date":"2016-05-04","Score":197,"ScoreB":121},{"date":"2016-05-03","Score":167,"ScoreB":145},{"date":"2016-05-02","Score":160,"ScoreB":137},{"date":"2016-05-01","Score":175,"ScoreB":100},{"date":"2016-04-30","Score":156,"ScoreB":127}] 

However, the same error persists.

Spent a whole day trying to solve this seemingly simple issue but no luck so far. When inputting the same data in "columns" format, it works fine. Need to get this JSON structure working for future use.

Answer №1

I have found that this code snippet works perfectly when pasted into the page. You can observe the changes in the keys section by adding the value field -

The only modification I made was adjusting the binding ID to match the c3 examples page, and using the JSON data directly instead of generating it via PHP.

var arr = [{"date":"2016-05-09","Score":191,"ScoreB":119},{"date":"2016-05-08","Score":166,"ScoreB":140},{"date":"2016-05-07","Score":172,"ScoreB":103},{"date":"2016-05-06","Score":187,"ScoreB":139},{"date":"2016-05-05","Score":162,"ScoreB":100},{"date":"2016-05-04","Score":197,"ScoreB":121},{"date":"2016-05-03","Score":167,"ScoreB":145},{"date":"2016-05-02","Score":160,"ScoreB":137},{"date":"2016-05-01","Score":175,"ScoreB":100},{"date":"2016-04-30","Score":156,"ScoreB":127}]; ;

var chart = c3.generate({
        bindto: '#chart',
        data: {
            json: arr,
            type: 'spline',
            keys:{
                x:'date',
                value: ['Score', 'ScoreB'], // IMPORTANT
            }
        },
        color: {
            pattern: ['red', 'orange']
        },
        axis: {
            x: {
                type: 'timeseries',
                tick: {
                    format: '%Y-%m-%d'
                }
            }
        }
    });

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

How can I use appendChild to place two different elements into a single div?

While exploring similar questions on this topic, I have unfortunately not come across a solution that works for me. My challenge is trying to insert two a elements inside of a newly created div element using appendChild. However, I am unable to append them ...

Divide a JavaScript project into multiple packages using either webpack or npm

I am embarking on the development of an application that needs to be compatible with Windows (PC), Android, and iOS. To achieve this, I plan to use Electron for Windows and React Native for mobile platforms. Both applications will be built using React and ...

Serving pages with Node JS and loading .js files on the client side

Here is a simple JS file that will be familiar to those who have worked with Socket.IO in NodeJS and Express: var express = require('express'), app = express(), server = require('http').createServer(app), io = require(&apos ...

Using JQuery to Customize Navigation Menu Targeting

On my website, I am trying to make an href button and a menu fade in as the page loads. However, I am struggling to find the correct code due to its placement within multiple tags, especially since I am new to JS and JQuery. I have provided a fiddle with a ...

Combine two events in jQuery using the AND operator

Can I create a condition where two events are bound by an AND logic operator, requiring both to be active in order for a function to be called? Let's say you have something like this: foobar.bind("foo AND bar", barfunc); function barfunc(e) { al ...

Creating beautifully formatted PDFs using pdfmake in AngularJS

I have a HTML popup displaying data retrieved from the server, and I am attempting to download this data as a PDF using the pdfmake plugin. While I am able to generate the PDF file, the challenge lies in replicating the HTML page layout in the PDF. Here is ...

Modifying the autocomplete feature to showcase options in a dropdown menu

I have a form that requires country states to be displayed in a dropdown menu. Despite having autocomplete functionality, I am only able to see the response as an array in the console.log when searching for a specific state. I have tried to switch from aut ...

Limit how API call costs are set in a function by throttling based on an argument

I am currently implementing express-throttle to restrict the number of API calls per IP address each day. I would like to dynamically set the 'cost' parameter in the 'options' array based on a value from the API request (refer to commen ...

Struggling to develop a C# (asmx) Web service utilizing the POST method and accepting FormData input

Could you kindly share a link with me so that I can follow it to create my first web service? This service needs to take data in form data and output it in JSON using the POST method. I am developing this service for both Android and iOS apps. Note: I am ...

Python does not recognize the Json-like response

After receiving a response using urllib3 (also tested with requests), I decoded it and then used json.loads on it. The data, post-decoding with decode('utf-8'), that I would like to convert into JSON is as follows: json_thing = b'{\n& ...

Iterating through every image displayed on a webpage

Two inquiries: What is the best way to efficiently loop through every image on a specific webpage and open each one in a new browser tab? Similar concept, but instead of opening in a new tab, I am interested in substituting different images for the ...

Steps to generate a newline-separated JSON-lines file from a collection of Python dictionaries

To meet the requirements for online prediction on Google Cloud AI platform, I am working on creating a JSON-lines file containing my data. My data is currently stored as a list of dictionaries, structured like this: data = [{'values': [0,1,0], ...

Enhancing code readability in vim with custom Javascript syntax highlighting

Is anyone else experiencing issues with VIM's syntax highlighting for Javascript? I have noticed that at times, the highlighting seems to disappear and I have to scroll around to get it adjusted properly. Does anyone know of any workarounds or soluti ...

Unable to set default headers with Restangular

I'm having trouble sending a post request using Restangular. I need to pass JSON in the content, so I added default headers to the post request. However, I keep getting a 415 Unsupported Media Type error. When I checked the request headers in the brow ...

Can Selenium successfully scrape data from this website?

I am currently attempting to extract Hate Symbol data (including the name, symbol type, description, ideology, location, and images) from the GPAHE website using Selenium. As one of my initial steps, I am trying to set the input_element to the XPATH of the ...

Is it possible to scroll by using the dragenter event?

Looking for a way to achieve incremental scroll up and scroll down using jQuery without jQuery UI? Here's the scenario - I have two divs: <div class="upper" style="height:35px;background-color:red;right:0;left:0;top:0;position:fixed;width:100%;z-i ...

Can Hibernate classes be mapped to multiple sets in Json format?

Here is a piece of code that I have mapped into Hibernate: @OneToMany(cascade=CascadeType.ALL) @JoinColumn(name="hall_id") Set<Literature> literatures; @OneToMany(cascade=CascadeType.ALL) @JoinColumn(name="hall_id") Set<RecycleFacility> rec ...

How can you create a smooth transition between two images in React Native?

I'm looking to create a cool effect with two images that gradually fade into each other. My initial approach involved layering one image over the other and adjusting its opacity using timing or animation functions, but I've been struggling to ge ...

Troubleshooting: PHP AJAX call to update MySQL database not working as expected

Having some trouble updating a field in my database using PHP and AJAX. The data being sent is correct, but the PHP script responsible for handling the update isn't working as intended. Currently, all I see is the "else" response in the conditional ...

Validate the error value of the confirmation message box

I wrote a script to create a confirmation popup window. However, when I implement it in our aspx.cs page, it seems to be returning incorrect values. Here is my script: <script type="text/javascript"> function Confirm() { var confirm_value = docu ...