Generally speaking, will a chart that reads embedded JSON also read a JSON file?
For example, my current chart looks like this:
anychart.onDocumentReady(function() {
chart = anychart.fromJson({
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
}, {
x: "February",
value: 12000
}, {
x: "March",
value: 18000
}]
}],
container: "container"
}
}).draw();
});
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
Now, instead of the JSON being embedded, it's in a file called myData.json. Will that chart read the JSON file? Or does that depend on the chart?
Original post:
As you can see at the following example, the same data can be stored to an Object named data and then create the chart by using chart = anychart.fromJson(data).draw();
Since you want to get this data from a json file, you will have to use something like this: How to get JSON from URL in Javascript?
$.getJSON('http://your_json_url', function(data) {
anychart.fromJson(data).draw();
});
anychart.onDocumentReady(function() {
data = {
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
}, {
x: "February",
value: 12000
}, {
x: "March",
value: 18000
}]
}],
container: "container"
}
}
chart = anychart.fromJson(data).draw();
});
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<div id="container"></div>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
Edit - working example:
file: test_data.json (take it as it is)
{
"chart": {
"type": "line",
"series": [{
"seriesType": "spline",
"data": [{
"x": "January",
"value": 10000
}, {
"x": "February",
"value": 12000
}, {
"x": "March",
"value": 18000
}]
}],
"container": "container"
}
}
file: index.html (modify the url of the json file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
$(document).ready(function(){
$.getJSON('http://localhost/json_chart_test/test_data.json', function(data) {
console.log(data);
anychart.fromJson(data).draw();
});
});
</script>
Related
I have 2 arrays of data that I want to insert into a pie chart.
so I have this code:
new Chart(document.getElementById("pie-chart"), {
type: 'pie',
data: {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}]
},
options: {
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
}
}
});
Instead of writing the label and data, I want to get this information from 2 arrays (one for labels and one for data).
How can I do it?
Please use the following jsfiddle , created for you, this might help you.
https://jsfiddle.net/ua5hsj7k/
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Pie</title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
<div class="chart-container">
<div class="pie-chart-container">
<canvas id="pie-chartcanvas-1"></canvas>
</div>
</div>
<!-- javascript -->
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
</body>
</html>
# code in js file
var piechart = $("#pie-chartcanvas-1");
var data1 = {
labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
datasets: [
{
label: "Population (millions)",
backgroundColor:
["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: [2478,5267,734,784,433]
}
]
};
var chart = new Chart(piechart,{
type:"pie",
data : data1,
options:{}
})
I'm an beginner in js code and i want to use Highcharts to construct a treemap with color from a csv.
My csv looks like that :
Name,Value,colorValue
The first column is the name.
The second one is the percentage of activity.
The third one is a color attribute to say if the percentage (of the 2nd column) has been increase or decrease (Color red to green).
Do someone has an example ?
Because it doesn't work, nothing happen (no error too), i think it come from the csv load.
Here my actual code :
HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<pre id="data" style="display:none">Name,Value,colorValue
A,1,1
B,10,25
C,20,0
D,30,16
E,40,78
F,50,85
G,60,20
H,70,35
I,80,9
</pre>
<div id="container"></div>
<script src="Highcharts/code/highcharts.js"></script>
<script src="Highcharts/code/modules/heatmap.js"></script>
<script src="Highcharts/code/modules/treemap.js"></script>
<script src="Highcharts/code/modules/data.js"></script>
<script src="index.js"></script>
</body>
</html>
my Js :
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
}
}],
title: {
text: 'Highcharts Treemap'
}
});
The CSV data properties should not be inside a series object but chart object, like that:
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
keys: ['name', 'value', 'colorValue']
}],
title: {
text: 'Highcharts Treemap'
}
});
Demo:
https://jsfiddle.net/BlackLabel/L4uo8h13/1/
API reference:
https://api.highcharts.com/highcharts/data.csv
I'm currently using the following chart to display data. The chart currently reads json data embedded into the javascript.
I need to be able to read from file any.json instead of the embedded json object. I've been searching for some type of documentation, but have found nothing.
Any help is appreciated.
any.json looks like this:
[{x: "January", value: 10000},{x: "February", value: 12000},{x: "March", value: 18000}]
And here's the current html:
anychart.onDocumentReady(function() {
chart = anychart.fromJson({
chart: {
type: "line",
series: [{
seriesType: "spline",
data: [{
x: "January",
value: 10000
},
{
x: "February",
value: 12000
},
{
x: "March",
value: 18000
},
{
x: "April",
value: 11000
},
{
x: "May",
value: 9000
}
]
}],
container: "container"
}
}).draw();
});
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.13.1/anychart-ui.min.css" />
<div id="container"></div>
<script src="https://cdn.anychart.com/js/7.13.1/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css">
You can use https://api.anychart.com/7.13.1/anychart.data#loadJsonFile method. There is a sample: https://playground.anychart.com/api/7.13.1/modules/anychart.data.loadJsonFile-plain
I am generating one image using High-Charts library but i have 40000 polygon series so it takes lot of time in plotting all those points.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function () {
var options = {
chart :{
type: 'polygon',
renderTo: 'container',
zoomType:'x'
},
title: {
text: ''
},
yAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
xAxis: {
title: false,
gridLineWidth:0,
lineWidth:0,
labels:{
enabled: false
}
},
plotOptions: {
series: {
lineWidth: 1,
lineColor:'black',
}
},
series: []
};
$.getJSON('data.json', function(data) {
options.series=data;
var chart = new Highcharts.Chart(options);
})
$.getJSON('title.json', function(title) {
options.title.text=title;
var chart = new Highcharts.Chart(options);
})
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://highcharts.base.is/highcharts-downsample.js"></script>
<script src="http://highcharts.base.is/demo_data.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
sample data.json file
[{"showInLegend": false,"color": "#FFFFFF", "data": [[61448208.5, 10791], [61453100.5, 20575], [61451242.5, 24291], [61446350.5, 14507]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453100.5, 20575], [61453544, 21462], [61451686, 25178], [61451242.5, 24291]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453544, 21462], [61453681.5, 21737], [61451823.5, 25453], [61451686, 25178]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61453681.5, 21737], [61459631.5, 33637], [61457773.5, 37353], [61451823.5, 25453]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61459631.5, 33637], [61462023.5, 38421], [61460165.5, 42137], [61457773.5, 37353]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462023.5, 38421], [61462226, 38826], [61460368, 42542], [61460165.5, 42137]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462226, 38826], [61462340, 39054], [61460482, 42770], [61460368, 42542]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462340, 39054], [61462372.5, 39119], [61460514.5, 42835], [61460482, 42770]] }
,{"showInLegend": false,"color": "#FFFFFF", "data": [[61462372.5, 39119], [61462429.5, 39233], [61460571.5, 42949], [61460514.5, 42835]] }
]
Is there any way to down sample multiple series to some 100's or create a mouse event on selection of area so that plot can regenerate plot based on coordinates and read chunk of json data within that range.
If your data sets sizes are 50,000 points and beyond, you can consider using the Highcharts Boost module, released in the beginning of 2017 if memory serves. There are some great examples, like this Highcharts line chart with 600,000 data points across 600 series.
You just include the highcharts Boost module, either directly in a separate tag, or if using NPM just import the boost module from the highcharts package:
import boost from 'highcharts/modules/boost'
Then, you can add some boost options in your Highcharts options object, as an example:
{
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts Boost'
},
series: [{
boostThreshold: 1, // Boost when there are more than 1
// point in the chart.
data: [[0, 1], [1, 2], [2, 3]],
}]
};
I've found that module to be of great help as I'm working with multiple series of > 100,000 data points each and multiple charts on one page.
I've searched for a few hours and looked for tons of examples, but in the end noting has worked for me.
My problem: I want to use a server-side json for a Line-Highchart. In the examples, which I've found the json comes either from a database or in an already preformated json-file.
For my use case it looks like the following: I want to visualize the value "depending" on their timestamp.
sampleData.json
[{
"timestamp": "2014-05-22T02:15:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T02:30:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T02:45:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:00:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:15:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:30:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T03:45:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:00:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:15:00+02:00",
"value": 234.0
}, {
"timestamp": "2014-05-22T04:30:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T04:45:00+02:00",
"value": 235.0
}, {
"timestamp": "2014-05-22T05:00:00+02:00",
"value": 235.0
}]
This json file is read by my getData.php
<?php
// It reads a json formatted text file and outputs it.
$json_o = file_get_contents("sampledata.json");
echo $json_o;
?>
The output looks exactly like the input, so exactly like the sampleData.json itself.
Now I use my highchart.html to create a Highchart.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
</div><style type='text/css'></style>
<script type='text/javascript'>
$(function () {
$(document).ready(function () {
$(document).ready(function () {
function requestData() {
$.ajax({
url : 'getData.php',
datatype : 'json',
success : function (data) {
alert(data);
chart.series[0].setData(data[0]);
},
cache : false
});
}
var chart;
//Chart bits
chart = new Highcharts.Chart({
chart : {
renderTo : 'container',
type : 'line',
events : {
load : requestData
}
},
title: {
text: 'Line Chart'
},
xAxis: {
type: 'datetime',
minRange: 1 * 24 * 3600000 // one day
},
yAxis : {
title : {
text : 'Value'
}
},
legend: {
enabled: true
},
series : [{
name : 'Random data',
data : [0]
}
]
});
});
});
});
</script>
</head>
<body></body>
</html>
I've also put all of it in a JsFiddle (unfortunately with a "XMLHttpRequest cannot load"-Error) but maybe it is useful: http://jsfiddle.net/ft8hc/1/
Now we come to my actual questions:
Until now I get no data into my Chart. Although it is created, but there is no data loaded. The json itself is loaded - alert(data) shows me the sampleData.json.
Although I've looked through existing examples, I could not figured out, how to define the attributes, which should be used to draw the line and the axes. For me timestamp and value should be used.
Additionally I am not sure, if the json Format is the right one that can be used by Highchart. Is it okay like this or do I have to parse it differently?
Would be absolutely awesome if someone could help me. I've tried it for hours without success :-(
This is because you have no data specified in your chart definition.
See:
series : [{
name : 'Random data',
data : [0]
}]
Upon getting the JSON data, you must PUSH that data into this Series.data and generate the chart thereafter.
You can refer to this solution : https://stackoverflow.com/a/8169187/3660930
Your json should
- use values x/y instead of your custom names
- date should be timestamp (time in miliseconds) [number type]
- value should be number