I am experiencing an issue with my application where highchart is not loading data via ajax. I have checked a demo provided on the highcharts website for loading highcharts via ajax, but it also seems to be not working. You can find the demo at this URL: highcharts ajax demo
Could you please help me figure out what might be causing this problem?
After making two adjustments, I was able to achieve the desired outcome.
I modified the reference for the analytics.tsv file to search for a csv file within the same directory.
$.get('analytics.csv', function(csv) {I transformed the tsv (tab separated values) into a csv (comma separated values) file.
cat analytics.tsv | sed -e 's/\t/,/g' > analytics.csvIt appears that the issue might arise from attempting to retrieve the .tsv file from Highcharts.com servers, or possibly due to an incorrect relative path specified for analytics.tsv. I have tested a sample available for download here, and their ajax sample functions without any problems.
I recommend looking into the group discussion here.
This conversation revolves around using jQuery AJAX calls to fetch a json file and populate a chart's series with the retrieved data. Hopefully this information proves helpful :)
Make sure to check out the related article at . Additionally, be aware of potential cross domain issues when loading files.
Encountering a similar problem, I faced difficulties when attempting to generate a line chart with dynamically loaded data using AJAX. It turns out that the root of the issue stemmed from a critical omission in the main file holding the container:
<script src="scripts/modules/data.js."></script>
Overlooking this essential script inclusion resulted in the manifestation of the entire problem.
I am currently working on a React/Redux CRUD form that can be found here. ISSUE RESOLVED: I have encountered an issue where the state should be updated by Redux after making an API call instead of using this.setState. The concept is simple: when a user s ...
I feel like using an image would help better illustrate my question. https://i.stack.imgur.com/LJN12.png Whenever I enable crosshairs, they extend from the bottom of the chart to the top. Is there a way to create a crosshair that only intersects at the x ...
Initially, I utilized line charts for my data visualization needs. However, I now require multiple data points on the same X-Axis with tooltips, which has led me to discover HighCharts behavior: "In a line chart, by default, Highcharts will display t ...
I am currently facing a challenge in rendering a React component that includes data fetched from a JSON using the fetch() method. Although the API call is successful, I am experiencing difficulties in displaying the retrieved data. Below is the code snip ...
I am currently working on parsing JSON data retrieved from an Ajax call in order to display it in a table using the React DataTable component. However, I have encountered a problem while trying to store the data in a state variable using the setState metho ...
Currently, I am delving into the world of React, a JavaScript framework. My task involves fetching a token from an API provided by this service: . To achieve this, I must include my X_CONSUMER_KEY in the request. Here is the approach I am taking using the ...
Within my React application, I am faced with the challenge of handling an array of parameters (such as IDs) that need to be passed as parameters in a queue of ajax calls. The issue arises when this array exceeds 1000 items, causing the browser page to beco ...
Currently, I am facing an issue where I am attempting to retrieve a JSON and incorporate it into my state. Interestingly, when I trigger my ajax request using axios within the componentDidMount lifecycle method, and then print out the updated state inside ...
In my development process, I utilize both react and jQuery. Below is a snippet of the code in question. Prior to mounting the react component, an ajax request is made to determine if the user is logged in. The intention is for the state to be set when a ...
Having an issue where I can't remove and redraw the chart in my React Highchart project. I've been unable to find a solution for this problem. Here is the code snippet: import { useState, useEffect, useRef } from "react"; import Highch ...
I have a React application where I need to pass data received in one component to another. After receiving the data successfully, I set the state and then try to pass this data as a property to the next component. However, when I try to access this passed ...
I've been attempting to align nodes, but I'm having trouble finding any options on how to do it. Here is my current code: Highcharts.chart('container', { chart: { type: 'networkgraph', plotBorderWidth: 1 }, title: { ...
When working on implementing a 3d pie chart in React using react highchart, I encountered an issue. Whenever I utilize this.setState() inside the lifecycle method componentDidMount(), the 3d chart shifts from its original position to the right diagonally. ...
I am currently working on a basic todo app using React. Initially, everything was running smoothly when I stored my data in a pre-defined object. However, now that I am retrieving my data from a link (rest) using AJAX, I seem to be encountering some issues ...
I'm attempting to implement a gradient color at the intersection of two series in a Highchart's polar chart within my React project. You can view my JSFiddle link here: https://jsfiddle.net/pgkk/s29d51zt/604/ The desired outcome is as follows: ...