Just starting out with d3 and struggling to display a graph using JSON data

I'm completely new to using d3 and struggling with creating a line graph from JSON data.

Within my ReportBucketDAO.java file, I am generating JSON output based on my database records.

while (rs.next()) 
{
     String currency = rs.getString("currency");

     Timestamp pointDateTimeTs = rs.getTimestamp("point_datetime");
     String pointDateTime = pointDateTimeTs.toString();
     pointDateTime = pointDateTime.substring(0, pointDateTime.indexOf('.'));
     double pointValue = rs.getDouble("sum(`point_value`)");
     org.json.JSONObject jobj = new org.json.JSONObject();
     jobj.put("currency", currency);
     jobj.put("pointDateTime", pointDateTime);
     jobj.put("pointValue", pointValue);
     jArray.add(jobj);
}

The resulting JSON string is: 

[{"pointValue":274,"pointDateTime":"2015-01-20 00:00:00","currency":"GBP"},
 {"pointValue":571,"pointDateTime":"2015-01-20 00:00:00","currency":"SGD"},
 {"pointValue":561,"pointDateTime":"2015-01-20 00:00:00","currency":"USD"}]

I have a JSP file named getVolumeData.jsp which allows me to save the above JSON to "data.json"

<%@page import... // code for saving JSON to data.json - omitted for brevity %>

I am trying to load the d3 content within the home.jsp file but it doesn't seem to be displaying anything. Can anyone provide assistance?

javajqueryjsonnetbeansd3.js

Answer №1

Here are some issues that need attention:

1.) Ensure you have loaded the d3.js library.

2.) Verify that your variables are correctly mapped in this section:

data.forEach(function(d) {
    d.currency = +d.currency; // Note: Avoid using '+' as currency is a string
    d.pointDateTime = parseDate(d.pointDateTime);
    d.pointTime = +d.pointTime; // Check if your JSON uses 'pointValue' instead of 'pointTime'
});

3.) Make sure your date parsing function is correct. It should be:

var parseDate = d3.time.format("%Y-%m-%d %X").parse;

By addressing these issues, you can see an improved version in this example.

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

JavaScript - Capture user input and store it in a cookie when the input field is changed

Any help with my issue would be greatly appreciated. I'm currently working on saving the value of a form input type="text" to a cookie when the input has changed. It seems like I'm close to getting it right, but unfortunately, it's not worki ...

javascriptjquerycookies

Shift the attention from the text box to the AJAX combobox when the enter key is pressed

I need to make it so that when I press the enter key in a textbox, the focus shifts to an ajax combobox. <script type="text/javascript"> $(document).ready(function () { $("#txtGroupSname").keydown(checkForEnter); function checkF ...

jqueryasp.netajax

[AWS Lambda SDK] - Executing Lambda Function - Processing Payload Response as Unit8Array - Conversion to String

Currently, I am utilizing the npm package @aws-sdk/client-lambda to invoke Lambdas. In my setup, I have two Lambdas - Lambda A and Lambda B, with Lambda A responsible for invoking Lambda B. The invocation of Lambda B from Lambda A is done through the foll ...

node.jsjsonamazon-web-serviceslambdaaws-lambda

Add more JSON entries to the data submission in Express

Purpose: My goal is to ensure that the JSON data I submit is formatted correctly when it arrives in the JSON file, regardless of the number of entries I submit. Challenge: Currently, the data I submit does not append properly in the JSON file. It appear ...

javascriptnode.jsjsonexpressoop

Issue with updating input value during keyup event in Android Chrome specifically

Check out this straightforward jsfiddle: https://jsfiddle.net/gq9jga4q/33/ <input type="text" id="kbdhook" /> <div id="result" >1: </div> <div id="result2" >2: </div> <div id="result3" >3: </div> $('#kbdh ...

javascriptandroidjqueryhtmlgoogle-chrome

Using Ajax post to retrieve data from multiple tables in PHP and MYSQL

I'm attempting to achieve the following: Retrieve TMSGUID from the Campuses table using the ID (primary key). Retrieve TMSGUID from the Sites table. Retrieve ID and Description from the SiteOrganisation table by using Site GUID. The PHP page is bei ...

phpjquerymysqlajaxhttp-post

Switching back and forth between two CSS animations using Jquery

I am working on creating a unique pendulum system using 3 balls. After successfully creating the balls and animating them, I am faced with a challenge in making the animation continuous. Here is my code: .circle { width:30px; height:30px; backgrou ...

jqueryhtmlcss

Can you tell me the distinction between using RemoteWebDriver's executeScript() and Selenium's getEval() for executing

Can you explain the distinction between these two pieces of code: RemoteWebDriver driver = new FirefoxDriver(); Object result = driver.executeScript("somefunction();"); and this: RemoteWebDriver driver = new FirefoxDriver(); Selenium seleniumDriver = ne ...

javajavascriptseleniumwebdriverselenium-webdriver

Search for data in a JSON file using PHP and retrieve the desired result

Looking for a specific item from my JSON File and its corresponding ID? Here's the code snippet to search for the item name based on the provided ID. CODE: $jsonitem = file_get_contents("data.json"); $objitems = json_decode($jsonitem); $findIt ...

phpjson

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

I am looking to implement a feature where I can hide and show overflow content in a div. When I click on the expand button, it expands the content. However, I want this button to toggle and change text as well. Thank you! function descriptionHeightMo ...

javascriptjqueryhtmlcss

I'm struggling to make the jquery parentsUntil function work properly

Would appreciate some help with using the jquery parentsUntil method to hide a button until a radio box is selected. I've been struggling with this for a few days now and can't seem to figure out what I'm doing wrong. Any insights would be g ...

javascriptjqueryhtmlcss

In search of an efficient method to verify JSON input using the Play framework

While I find it easy to read and validate the expected fields in a JSON input, I struggle with properly handling an exception if an unexpected field is found. It would be helpful if the play framework could provide some guidance on this issue. I could manu ...

jsonscalaplayframework

I noticed that when I call my add function from the index view button in AngularJS, the counter value changes but it is not reflecting on the UI. Why is this happening?

FirstController.js function FirstController($scope) { $scope.$apply(function () { $scope.add = function (amount) { $scope.counter += amount; } });} The View - **Addtion.html** <div ng-controller="FirstController"> ...

jqueryangularjs

JSON API Status Reversal

I've been trying to figure out how to check the current status of the PlayStation server. This information is typically displayed on their webpage which can be found here: Interestingly, instead of using PHP database queries, PlayStation seems to uti ...

jsonapi

Learn the process of utilizing AJAX to upload files in CodeIgniter

I have reviewed several solutions How to upload files using ajax in codeigniter File uploads in codeigniter through ajax but none seem to work with my specific code. I am trying to implement a feature where users can upload various types of files (such ...

phpjqueryajaxcodeigniter

How can I generate JSON format in Ruby?

I am facing issues generating the desired format for an API input. The required format is as follows: { "application" : "{\"attributes\":{\"type\":\"genesis__Applications__c\"},\"genesis__Days_Convention__c\":&b ...

ruby-on-railsrubyjson

Exploring a JSON Object with nested properties, crafting changes, and producing a fresh object: A step-by-step guide

I am attempting to manipulate a JSON object with nested properties by replacing numeric values with computed values and returning a new object. The original object looks like this: var obj = { "a0": { "count": 41, "name": "Park", "new": { ...

javascriptjson

Is there a way to seamlessly integrate typeahead.js with jquery.validate?

Currently, I have a website built on ASP.NET MVC 5 which utilizes jQuery validation (specifically 'jquery.validate.js' in the MVC project template). My goal is to implement type-ahead functionality using 'typeahead.js' on an input field ...

javascriptjqueryjquery-validatetypeahead.js

Mobile webpage utilizing jQuery live click event binding

I am currently in the process of creating a mobile-friendly website that includes a list of names. I have successfully implemented a click event using jQuery for all devices, including Android, Blackberry, and Nokia. However, when testing on an iPhone, I ...

iphonejquery

Troubleshoot jQuery in an ASP.NET application

Is there a way to intercept the jQuery function call in my Web app that displays a <div>? I want to identify exactly what triggers the appearance of that <div>. I am looking to display the same div using a different button, but the original bu ...

c#jqueryasp.net