I am new to amCharts and javascript. My html file looks like:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="">
<title>chart created with amCharts | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "output.json",
"format": "json"
},
"valueField": "count",
"titleField": "date"
});
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;"></div>
</body>
</html>
My json file:
[{
"date": "2015-11-17",
"count": "1"
}, {
"date": "2015-11-28",
"count": "1"
}, {
"date": "2016-01-13",
"count": "1"
}, {
"date": "2016-01-22",
"count": "1"
}]
By using http-server -o, Local host opens up in the Chrome browser.
http://127.0.0.1:8080/test2.html
test2.html and output.json are in the same directory
I can see from the chromeconsole, it is loading the json file properly.
I am not able to figure out why the data is not showing up in the chart. I tried browsing and looking at other examples, kind of stuck.
Your chart is missing a few pieces that you can find in any of the line/column demos on the amCharts site. Here's what you're missing:
You're missing a graphs array. This is required for a serial chart (it looks like you started from a pie chart, which is completely different). Each graph object in the graphs array contains a valueField.
Your chart is missing a categoryField.
It looks like your data has dates, so you'll need to create a categoryAxis and set parseDates to true. You'll also want to set a dataDateFormat string in the top level of your chart config as well so that the chart knows how to parse your dates consistently across all browsers.
Assuming you want a line chart, here's the bare minimum makeChart call you need for your data:
AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataLoader": {
"url": "output.json",
"format": "json"
},
"graphs": [{
"valueField": "count"
}],
"categoryField": "date",
"dataDateFormat": "YYYY-MM-DD",
"categoryAxis": {
"parseDates": true
}
});
Demo
Related
I have the question regarding an already provided solution at
Update the dataset of multiple AmCharts with a Single Dropdown Change Event
I needed the same solution for one of my tasks. I have downloaded and saved all the css,js, jquery and json dataset files in the same directory and changed the addresses of those in src tags in my html file. Also changed the address in index.js file for the default dataset json. But this does not work. drop down menu shows but both charts are not even showing. Can you please help. Here is the code in my index.htm file
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Dynamically loading chart datasets</title>
<link rel="stylesheet" href="style.css"></head>
<body>
<script type="text/javascript" src="amcharts.js"></script>
<script type="text/javascript" src="serial.js"></script>
<script type="text/javascript" src="pie.js"></script>
<script type="text/javascript" src="none.js"></script>
<p class="selector">
<select onchange="setDataSet(this.options[this.selectedIndex].value);">
<option value="data1.json">Data Set #1</option>
<option value="data2.json">Data Set #2</option>
<option value="data3.json">Data Set #3</option>
</select> < Select a data set
</p>
<div id="barchart"></div>
<div id="piechart"></div>
<script src='jquery-1.11.2.min.js'></script>
<script src="index.js"></script>
</body>
</html>
in case the index.js code is also needed to be seen for any correction/amendment :
AmCharts.loadJSON = function(url) {
if (window.XMLHttpRequest) {
var request = new XMLHttpRequest();
} else {
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
request.open('GET', url, false);
request.send();
return eval(request.responseText);
};
var bar_chart = AmCharts.makeChart("barchart", {
"type": "serial",
"theme": "none",
"dataProvider": AmCharts.loadJSON('data1.json'),
"valueAxes": [{
"gridColor":"#FFFFFF",
"gridAlpha": 0.2,
"dashLength": 0
}],
"gridAboveGraphs": true,
"startDuration": 1,
"graphs": [{
"balloonText": "[[category]]: <b>[[value]]</b>",
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "visits"
}],
"chartCursor": {
"categoryBalloonEnabled": false,
"cursorAlpha": 0,
"zoomable": false
},
"categoryField": "country",
"categoryAxis": {
"gridPosition": "start",
"gridAlpha": 0,
"tickPosition":"start",
"tickLength":20
}
});
var pie_chart = AmCharts.makeChart("piechart", {
"type": "pie",
"theme": "light",
"dataProvider": AmCharts.loadJSON('data1.json'),
"valueField": "visits",
"titleField": "country",
"balloon":{
"fixedPosition":true
}
});
function setDataSet( dataset_url ) {
bar_chart.dataProvider = pie_chart.dataProvider =
AmCharts.loadJSON(dataset_url);
bar_chart.validateData();
pie_chart.validateData();
}
I have an offline Leaflet map, where the countries are drawn from a huge Javascript variable with coordinates.
index.html is as such(an example from codepen, I load the libraries locally):
<html>
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 800px;"></div>
</body>
</html>
And Map.js is as such:
var map = L.map('mapid').setView([0, 0], 2);
// Huge geojson of every country, one country sample here.
var countries = "type": "FeatureCollection",
"features": [{
"type": "Feature",
"id": "AFG",
"properties": {
"name": "Afghanistan"
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[61.210817, 35.650072],
[62.230651, 35.270664],
[62.984662, 35.404041],
[63.193538, 35.857166],
[63.982896, 36.007957],
[64.546479, 36.312073],
[64.746105, 37.111818],
[65.588948, 37.305217],
[65.745631, 37.661164],
[66.217385, 37.39379],
[66.518607, 37.362784],
[67.075782, 37.356144]
// .... goes on
]
]
}
}]};
L.geoJSON(countries, {
style: function(feature) {
return {
fillColor: "#D3D3D3", // Default color of countries.
fillOpacity: 1,
stroke: true,
color: "grey", // Lines in between countries.
weight: 2
};
}
}).bindPopup(function(layer) {
return layer.feature.properties.name;
}).addTo(map);
This produces a nice looking output, which can be seen here: http://codepen.io/anon/pen/zZNjBy
However, I wish to color potentially each country depending on an input. Let's say we open an object with the potential input:
let colorratio = {
1:"green",
2:"blue",
3:"yellow",
4:"red"
};
I then receive the following:
let colorinput = {
AFG: "1",
DNK: "2",
SWE: "3",
USA: "1"
};
Where we in layman's terms want to color Afghanistan green, color Denmark blue, Sweden yellow, and USA blue. The remaining countries should just stay at the default color value(greyish).
These abbreviations match the "ID" key in the countries variable.
My question therefore goes on how to approach this issue; Obviously, I need to match the keys in the huge GeoJSON file. But it's almost 13000 lines long.
Apart from that, in the L.geoJSON where we call the countries variable, we return a default color of countries. Where do I potentially access a key to color each country? Should this variable be moved into the countries variable for each country, as a key that is then overwritten?
I've tried looking at the Leaflet documentation and examples; but most assume that you retrieve tiles online, which is not a possibility here. It must work offline without contacting a CDN or similar - which poses some challenges, needless to say.
Please see Leaflet's choropleth tutorial. It shows how to the style option in L.GeoJSON can be a function that returns a different style depending on the properties in the GeoJSON feature.
I have an array of timestamps like [1485343314150, 1485343314150, 1485343314150, 1485343314300, 1485343314300, 1485343314400,1485343314450].
Here there are 3 values for 1485343314150, 2 values for 1485343314300 and 1 value each for 1485343314400 and 1485343314450
So while plotting on the graph
X = [1485343314150,1485343314300,1485343314400,1485343314450]
Y = [3,2,1,1]
I need a way to represent these X and Y such that Xs values are converted to a human readable datetime like 24-February 5:25 PM.
Can it be done via Chart.js or amCharts? I searched but couldn't find anything.
In AmCharts you can set parseDates to true in your categoryAxis (which is the same as the X axis) if you're using a serial chart (line, smoothed line, or column). AmCharts' XY chart can also handle dates as well by setting one of the valueAxes' type to "date", but the chart types available are limited to lines/bullets
When you enable parseDates, the chart will automatically format them to use readable date strings. You can adjust the format by specifying your own dateFormats array in the categoryAxis. You can find more information on that here.
Here's an example using a serial chart. Your data frequency is in incrments of milliseconds, so I set the categoryAxis' minPeriod to accommodate:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": [{
"timestamp": 1485343314150,
"value": 3
},{
"timestamp": 1485343314300,
"value": 2
},{
"timestamp": 1485343314400,
"value": 1
},{
"timestamp": 1485343314450,
"value": 1
}],
"graphs": [{
"bullet": "round",
"type": "smoothedLine",
"valueField": "value"
}],
"categoryField": "timestamp",
"categoryAxis": {
"parseDates": true,
"minPeriod": "fff"
}
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can further format the axis' output through the dateFormats property as mentioned before. In this scenario, you'll want to change the string in the fff period. Depending on the amount of data, you may need to change the larger periods as well.
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