I want use highstock to show my data in the web ，but i have someproblem with the json data，
the Example of basic-line :http://www.highcharts.com/stock/demo/basic-line
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
i change the javascript file the
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data)
to the
$.getJSON('data.json', function(data)
i want use the json data in my web folder and i put data in the json file like :
[[1143072000000,60.16],
[1143158400000,59.96],
[1143417600000,59.51],
[1143504000000,58.71],
[1143590400000,62.33],
[1143676800000,62.75],
[1143763200000,62.72],
/* Apr 2006 */
[1144022400000,62.65],
[1144108800000,61.17],
[1144195200000,67.21],
[1144281600000,71.24]]
but i can see nothing in my web, what is wrong with me? is it the json data Format wrong？or others thanks for give me some help
In case when you use JSON, then you should get rid of all comments.
So JSON should looks like:
[[1143072000000,60.16],
[1143158400000,59.96],
[1143417600000,59.51],
[1143504000000,58.71],
[1143590400000,62.33],
[1143676800000,62.75],
[1143763200000,62.72],
[1144022400000,62.65],
[1144108800000,61.17],
[1144195200000,67.21],
[1144281600000,71.24]]
and chart code:
$.getJSON('data.json', function(data) {
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
series : [{
name : 'AAPL',
data : data
}]
});
});
Rename your file to data.js . For javascript file and not JSON. It's like that for me :)
Related
Say I have a JSON Array called 'blogPost' like below:
[
{
"date" : "2020.11.25",
"title" : "Getting help on Stack overflow"
},
{
"date" : "2020.11.18",
"title" : "Putting my site together"
},
...
]
and a folder of images with the post date like below:
2020.11.25.jpg, 2020.11.18.png, 2020.11.03.gif, etc ...
I was hoping to bring in, edit, and .append() a template html snippet using my JSON array - the "date" would populate both some text and a file path in the html snippet:
<div>
<img src="blog/images/{date}.{extension}" alt="{date}">
<h5>{date} - {title}</h5>
</div>
Jquery:
$.getJSON( "blog/posts.json", function(data) {
$.each(data, function(index,item) {
let extension = 'jpg' || 'png' || 'gif';
$("<div>").load("blog/blog-snippet.html", function() {
$(this).html($(this).html().replaceAll("{date}", item.date));
$(this).html($(this).html().replaceAll("{title}", item.title));
$(this).html($(this).html().replaceAll("{extension}", extension));
$("#content").append($(this).html());
});
});
});
The idea was to use "date" from the array multiple times just to slim and automate the process.
I can change the name of each text and image file using the looped array. However is there a way to generate the correct file extension (jpg, png, etc...) for each image file using html or js/jquery? My current extension variable doesn't find the "correct" extension - it just uses jpeg. This results in only some of the correct file paths.
I suppose my other option would be to add an "image" option to the JSON Array and include the correct file extension.
Any advice is welcome!
I would like to use dynamic data to inject into the pie. I have been doing this so far : https://codepen.io/Surunairdopera/pen/gOPgKrv
I have before this code a CSV file which I transform into a JSON file by using Papa parse. I create a json object composed of the 5 data I want to use in my pie. But highcharts doesn't accept this data.
$(document).ready(function() {
let file = "X.csv";
Papa.parse(file, {
download: true,
header: true,
delimiter:";",
complete: function(results) {
let dataDetail = results.data;
objJSONDetail = dataDetail.find(element => element.ticket == ticket);
let objJSONX = {
Donnee1: objJSONDetail.donnee1,
Donne2: objJSONDetail.donnee2,
Donnee3: objJSONDetail.donnee3,
Donnee4: objJSONDetail.donnee4,
Donnee5: objJSONDetail.donne5
}
console.log(objJSONX['Donnee1']);//return the data, i would like to use for the pie
}
I'm new at using Highcharts so, be nice ;)
UPDATE
I found the reason why :
I wrote variable as STRING. Highcharts expects numerical values. So it works with a parseFloat :
parseFloat(objJSONDetail.donnee1);
I am trying to figure out how to plot data from a local '.JSON' file using angular2-highcharts example.
I followed the example in 'https://www.npmjs.com/package/angular2-highcharts' to first understand how to plot .JSON data and it worked. I took the data available for the example and created a local .JSON file (copied the content from 'https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK' in notepad and saved it with UTF-8 encoding as a .JSON file), and replaced the file path for the JSON request to this. When I do this though, I get an error - response with status 200.
constructor(jsonp : Jsonp) {
//jsonp.get('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=JSONP_CALLBACK').subscribe(res => {
jsonp.get('./data.json').subscribe(res => {
this.options = {
title : { text : 'AAPL Stock Price' },
series : [{
name : 'AAPL',
data : res.json(),
tooltip: {
valueDecimals: 2
}
}]
};
});
}
options: Object;
};
Since I am not super familiar with json data/ Javascript or angular2 I am not sure if I am missing something very basic here. Any help is appreciated.
as far as I know, Response Status 200 specifies that request was successful. i.e. your request was successfully handled. perhaps you want to try checking response data.
check your callback for response data.
Using http instead of json helped. I made use of the suggestion in this answer https://stackoverflow.com/a/36305814/4567096.
I'm a newbie about Ajax but I'm trying to do this:
I've got a local Json file and I have to do some Ajax calls to read the Json file and insert the values in the HTML file. My Json file is:
{
"item": {
"name": "blabla",
"details": "blablablabla",
"composition": "blablablabla",
"modelDetails": [
"blablablabla",
"blablablabla",
"blablablabla"
],
"images": [
"http://...jpg",
"http://...jpg",
"http://...jpg",
"http://...jpg"
]
}
}
What is the best way to do this? I would like that pushing the button number one will call the first json file, with button two the second json file,...
Thank you
Edit:
The links are very usefull! Thank you!
Here's a nice example of ajax call to retreive JSON data from file and parse JSON data. Hope it helps :)
http://code.runnable.com/UhY_jE3QH-IlAAAP/how-to-parse-a-json-file-using-jquery
IF link doesnt work :) Then try this script
$(document).ready(function() {
//after button is clicked we download the data
$('.button').click(function(){
//start ajax request
$.ajax({
url: "data.json",
//force to handle it as text
dataType: "text",
success: function(data) {
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(data);
//now json variable contains data in json format
//Now you can get your data like json.name, json.object
}
});
});
});
I just working with JSON data and am playing around with jQuery and Ajax requests. Pretty basic stuff, but here's my problem.
I have a basic data set which I was using for time tracking. I know how to parse the simple JSON data like this:
{
"end" : "1/18/2011",
"start" : "1/18/2011",
"task" : "Code Review",
},
It's the more complicated stuff I'm trying to parse like this where I'm trying to pull the "time" data out.
{
"end" : "1/17/2011",
"start" : "1/17/2011",
"task" : "Exclusive Brands",
"time" : {
"analysis" : 4,
"documentation" : 3,
"meetings" : 2
}
This is the code for the script I've been using to parse the simple data:
$(function() {
$('.load').click(function(){
$.getJSON("data.js",function(data){
$.each(data.timesheet, function(i,data){
var div_data ="<div class='box'>"+data.start+" "+data.task+"</div>";
$(div_data).appendTo("#time-tracking");
});
}
);
return false;
});
});
My question is what's the format to parse the time data, or what's the best way to parse the information nested inside the time element?
Any help will be greatly appreciated.
A JSON string will be parsed into an object. When parsed, the time is the key of one object. You could retrieve the value of this object through the dot operator (.).
data = JSON.parse('{"end":"1/17/2011", "start":"1/17/2011", "task":"Exclusive Brands", "time": {"analysis":4, "documentation":3, "meetings":2 } }')
// => obj
data.time.analysis
// => 4
In your case similarly you could use the data.time.meetings to access your data from remote server.
Unless I am terribly mistaken, since jquery already converted data into a javascript for you, you should be able to access time as if it was a javascript object like so:
var analysis = data.time.analysis;
var documentation = data.time.documentation;
var meetings = data.time.meetings;
etc...