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

What is the best way to update the style following the mapping of an array with JavaScript?

I want to update the color of the element "tr.amount" to green if it is greater than 0. Although I attempted to implement this feature using the code below, I encountered an error: Uncaught TypeError: Cannot set properties of undefined (setting 'colo ...

Restricting the frequency at which a specific key value is allowed to appear in JSON documents

Within my JSON file, there is an array structured like this: { "commands": [ { "user": "Rusty", "user_id": "83738373", "command_name": "TestCommand", "command_reply": "TestReply" } ] } I have a requirement to restrict the num ...

Implement the Show/Hide TinyMCE Functionality in your <textarea></textarea> Box

Information I recently added TinyMCE to my website after discovering that a website I frequently visit uses it. While their design and functionality are different, I managed to replicate their look on my own site and now want to implement a specific featu ...

Creating a Copy of an Object in JavaScript that Automatically Updates When the Original is Changed

I am in the process of developing a planner/calendar website with a repeat feature. var chain = _.chain(state.items).filter({'id': 1}).head().value(); console.log(chain); After filtering one object, I am wondering how to create a duplicate of c ...

Dynamic Route Matching in NextJS Middleware

Currently, I am in the process of developing a website that incorporates subdomains. Each subdomain is linked to a file-based page using middleware. Take a look at how the subdomains are being mapped to specific pages: app.com corresponds to /home app.com ...

Tips for managing the return value of a PHP function in AJAX requests

Looking for some help with inserting HTML form data using PHP and Ajax. Below is the code I've written: <!DOCTYPE HTML> <html lang="en"> <head><title>Ajax Test</title> <meta charset="utf-8" name="viewport" con ...

Having trouble with Laravel 5.4 and getting a 500 internal server error when using ajax with csrf field?

I'm attempting to utilize Ajax to send JSON data to a Laravel function, like so: $.ajax({ url: "{{ route('store-formbuilder') }}", type: 'POST', data: { payload: payload, _token: "{{csrf_token()}}" } }) . ...

How should .has(), .get() and .set() be properly implemented for a JavaScript Map() within an ExpressJS server?

Feeling thrown off by javascript Map()? My query revolves around javascript Map() - the set, get, and has() functions. Despite thinking I was an expert, it seems I still have things to learn... Situation: I'm dealing with a 'global' map sto ...

Centered iframe within a div

I am trying to center my iframe within a white box and need some assistance with this. I want the iframe to be in the middle of the white box rather than its current position at the moment. game1.html: <html> <head> <title>R ...

Changing the image source when clicking on it and removing it can be done by using JavaScript

How can I add a class 'selected' to ".swiper-slide" when it is clicked? I also want to change the image src when svg-img1, 2, or 3 is clicked. However, I need the image to revert back to its default src when another swiper-slide is clicked. ...

I'm curious about utilizing jsviews in conjunction with jquery sortable

Check out my jsFiddle Example where I am using jsViews in conjunction with JQuery sortable. By default, the remove function works fine; however, when you change the order of items and then try to delete one, multiple items are removed. How can this issue ...

Challenges with Media Queries post Integration of MUI Library in React

I have been scratching my head for the last few hours. I needed to utilize a react library to design my dog app for a project. Opting for the MUI library, it has been effective for the grid layout. However, the challenge arises when attempting to implement ...

The selection of one drop-down in CodeIgniter relies on the values chosen in two other drop-down

Within this section, there are two independent dropdown menus named "Sub company" and "Role", with a third dropdown menu that is dependent on the selections made in the first two. The objective is to display the third dropdown menu, titled "Manager", only ...

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

I have been utilizing the mark.js library to highlight keywords on a webpage, and it's been working well. However, I now need to insert an extra space or a comma after each tag such as h1, h2, etc. Initially, I thought about using a loop like the one ...

What are the steps for converting a structured text document into a SQL table?

I am currently working on a project that involves the need to save and load a structured text document, similar to MS Word, into/from a MySQL table. For instance, if given a sample document like sample.doc, the goal is to save both the content and formatt ...

The state update is triggering a soft refresh of the page within Next.js

In my Next.js project, I have integrated a modal component using Radix UI that includes two-way bound inputs with state management. The issue arises when any state is updated, triggering a page-wide re-render and refreshing all states. Here is a snippet of ...

Converting a Javascript object to JSON format only once using AngularJS

Is it possible to convert a JavaScript object to JSON using angular.toJson only once in my code? Here is an example: $scope.task.tags = [{"id":22,"tag":"printer","created_at":"2016-03-15" }]; $scope.create = function(task) { tmp.tags = angular.toJson( ...

Using Array.Map() to retrieve the child array within a React component

Here is the data I have retrieved from an API: [ { "id": 1, "appName": "string", "defaultAction": "string", "defaultMessage": "string", "rules": [ { "id": 1, "version": "string", "brand": "string", ...

Retrieve the part of a displayed element

Presently, I am developing a modal system using React. A button is located in the sidebar and the modal is represented as a div within the body. In the render function of the main component of my application, two components are being rendered: MyModal M ...

Join the geomarkers in two datasets using connecting lines

I am currently developing a leaflet.js map incorporating two distinct sets of JSON data layers stored as js-files. The first dataset comprises the geographical locations of various newsrooms along with their respective IDs, while the second dataset contai ...