Learning the process of utilizing Json in Flot to create visually appealing graphs

I'm currently utilizing the Flot Graph Api to showcase bar charts and line charts on my client-side PHP environment. I am attempting to pass Json data to plot the graph as outlined in their examples.

This is how I structure the Json data:

[{"label":"63f9311f-5d33-66ad-dcc1-353054485572","bars":{"show":true},"data":[[-170.44530493708,270.44530493708]]},{"label":"8f6dcf4a-b20c-8059-1410-353054486037","bars":{"show":true},"data":[[-791.50048402711,891.50048402711]]},{"label":"c2b4cf75-3e0b-f9ff-722e-353054485803","bars":{"show":true},"data":[[-1280.0484027106,1380.0484027106]]},{"label":"eb963e23-75cd-6131-867a-353054485894","bars":{"show":true},"data":[[-1487.2604065828,1587.2604065828]]},{"label":"ef413106-d5be-593b-1cda-353054485719","bars":{"show":true},"data":[[-1940.9583736689,2040.9583736689]]}]

Despite formatting the data correctly, the graph does not show up.

$.ajax({                                      
  url: '../c/By_Machine_Controller.php',                  
  data: "",                        
  dataType: 'json',                
  success: function(data)          
  {
    var Up = [];
    var Down = [];
    Up = data[0];              
    Down = data[1];           
    $.plot($("#placeholder"), [ Up , Down ]);
  } 
});

I am unsure if the issue lies with the JSON or if there's an error in my JavaScript code. As a newcomer to Flot, I'm seeking help to troubleshoot this problem.

The solution I've implemented involves writing the JSON data to a temporary file and then accessing it. However, my goal is different:

I generate the data for Flot in the MODEL folder locally and convert it into a JSON array in the CONTROLLER folder. Now, I need to access this JSON data in the VIEW folder on my localhost.

Here's the code snippet from the CONTROLLER:

$json = json_encode($allData);
$myFile = "ReasonByTime.txt";
$fh = fopen($myFile, 'w') or die("can't open file");
$stringData = "Bobby Bopper\n";
fwrite($fh, $json);

fclose($fh);

However, when attempting to access the $json from the CONTROLLER in the VIEW via JS as shown below, it doesn't work. Despite searching online for a solution, I have been unable to resolve it. Can anyone provide guidance on how to fix this?

JS code in VIEW for accessing JSON from CONTROLLER:

$(document).ready(function () {

//var dataurl = '../c/By_Machine_Controller.php';

function onDataReceived(data) {

$.plot(placeholder, data, options);
}
$.ajax({
type: "GET",
url: '../c/By_Machine_Controller.php',
data: 'data',
dataType: 'json', 
success: function(data) { 
alert(data);
}
});
});

Answer №2

After conducting some experiments, I have concluded that

$("#chart").plot(data);

suits my needs perfectly.

Answer №3

This solution is effective for my needs.

 <script language="javascript" type="text/javascript">  
$(document).ready(function(){
$.getJSON('DataByTime.txt', function(data) {
    $.plot($("#chart"),data, {bars: { show: true, barWidth:0.2},xaxis: {ticks: data.ticks}});
});

});

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

Using Jquery and Ajax to add information to a database

One of the challenges I'm facing involves a page with three forms, each containing separate variables that need to be inserted into a MySQL database for viewing. My current script is working fine, even though I am aware that `mySql_` is deprecated but ...

Methods for sending data from Angular to the server and vice versa

Currently, I have an application that utilizes Express along with Jade templates. I am in the process of developing a new version of the app using Angular and client-side HTML. In order to determine user permissions within my Angular code, I require acces ...

Lack of ViewExpiredException thrown during ajax request when j_security_check is implemented on secured JSF page - Continued investigation

ViewExpiredException not thrown on ajax request if JSF page is protected by j_security_check offers a solution for scenarios where the login page is a JSF page. But what if the login page is a JSP page? Here is an example of a JSP login page: <login-c ...

Having trouble assigning a value to a global variable from a function in ajax

Hello, I am new to utilizing ajax in my coding journey so please be patient with me. Below is the code that I have been working on: function checkempid(){ var status; xmlHttp=GetXmlHttpObject(); var urlemp="postemployee"; urlemp=urlemp+" ...

Adjusting the dimensions of a tri-fiber canvas prior to saving it

I have a unique inquiry regarding Three Fiber. Once the download button is clicked, it generates a base64 using toDataURL, which can then be downloaded. The resulting image adopts the height and width of the canvas, which in turn matches the height and w ...

What could be causing my Bootstrap carousel to only slide once?

I'm currently working on integrating a Bootstrap Carousel into my website, but I've encountered an issue where it moves only once and then becomes unresponsive. After checking the file order, I couldn't find any issues there. So, I'm qu ...

Instructions on obtaining a distinct daily array from the weather API array that provides a detailed 5-day weather report every 3 hours

Seeking assistance with my weather app development on React using axios with the openweathermap.org API. Currently stuck on getting data formatted in a specific way from the 5-day forecast it provides, totaling 40 reports over the 5 days. The API response ...

Transfer the index of a for loop to another function

Can you explain how to pass the 'i' value of a for loop to a different function? I want to create a click function that changes the left position of a <ul> element. Each click should use values stored in an array based on their index posi ...

Impact when returning a React.FC Component

Using React, I have encountered a challenge with my site: I have a function that generates a Card component displaying information about my store's products (#1). To display this on the screen, I map through the array returned by the backend and pass ...

"Troubleshooting: IE compatibility issue with jQuery's .each and .children functions

I have created an Instagram image slider feed that works well in Chrome, Safari, Firefox, and Opera. However, it fails to function in all versions of Internet Explorer without showing any error messages. To accurately determine the height of images for th ...

Do AJAX forms require the use of a submit input?

Is it essential to include a submit input in my AJAX forms, given that: 1-)The forms are designed to function with AJAX, meaning users without JavaScript won't be able to use my app ...

Building Individual Elements in Angular 2

My task involves creating two distinct components in Angular 2, the Users component and the Clients component. These components are not nested and do not have any relationship. To call these components separately, I typically use main.ts as the main entry ...

How can jQuery be used to split a string and isolate the desired string in the center? For example, if we have a string like: sample_str[targeted_str][other_str

http://jsfiddle.net/150aby4u/ There are several dropdown menus, each with a unique field name that is incremented. The objective is to extract the number in the middle of the string/text after making changes to the dropdown. In this case, we want to retr ...

Sending query strings to jQuery load

I have a website page that dynamically loads data using jQuery.load() based on the selected filters by the user, which could be city, category, or both. To make it work, I implemented onchange events for the two dropdown filters: $('#filter1'). ...

Sprockets could not locate the file for jquery.atwho

I have been attempting to integrate the jquery-atwho-rails into my application, a Rails gem designed for at.js. I have followed all the steps provided, executed bundle install, included the necessary code in both application.js and application.css, stopped ...

Check to see if a variable has been assigned a value in the form of a jquery

Scenario: <div> <div class="application-section active"></div> <div class="application-section"></div> </div> I need to define the following variables var $activeSection = $("div.application-section.active") ...

Retrieving Array keys from PHP using jQuery

As a beginner in jQuery, I am eager to learn how to retrieve Array keys from a php file using jQuery. Currently, I have jQuery code set up to send input to file.php and execute a query on every keyup event. When file.php echoes the result, it looks somet ...

Tips for resolving the error: finding the right loader for handling specific file types in React hooks

data = [{ img: '01d' }, { img: '02d' }] data && data.map((item) => ( <img src={require(`./icons/${item['img']}.svg`).default} /> )) I am facing an issue with the message Error: Module parse failed: U ...

Attempting to eliminate the padding from the unordered list (ul) element within the pop-up box

Upon clicking the chip with chipName="button test IPA", a popup window appears. I am attempting to remove the padding from the ul tag within that popup. The issue I'm facing is that I cannot locate the ul tag in my HTML or JSX code. I have assigned a ...

Comparing Mongoose and MongoDB in Node.js: Weighing the Benefits of Each

Just starting out with Node.js and noticing the multitude of libraries available to work with MongoDB. The two most popular options appear to be mongoose and mongodb. Can someone provide a comparison of the pros and cons of these extensions? Are there any ...