I've managed to get a basic xChart work. Although, It returns some black screen instead of the graph I want. I've included all requirements such as d3.js and all xCharts's JS. My code and ouput below :
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<figure style="width: 400px; height: 300px" id="myChart"></figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/d3.js"></script>
<script src="js/xcharts.css"></script>
<script src="js/xcharts.js"></script>
<script type="text/javascript">
var data = {
"xScale": "ordinal",
"yScale": "linear",
"type": "bar",
"main": [
{
"className": ".pizza",
"data": [
{
"x": "Pepperoni",
"y": 12
},
{
"x": "Cheese",
"y": 8
}
]
}
],
"comp": [
{
"className": ".pizza",
"type": "line-dotted",
"data": [
{
"x": "Pepperoni",
"y": 10
},
{
"x": "Cheese",
"y": 4
}
]
}
]
}
var myChart = new xChart('bar', data, '#myChart');
</script>
<?php
// put your code here
?>
</body>
</html>
Anybody has any ideas about this and how to fix it?
I think you have simply forgotten to reference the CSS library. Something like:
<link href="xcharts.css" rel="stylesheet">
pointing to where you have stashed the file might do the trick.
Related
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>
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
I am attempting to implement a custom interactive map using the Highcharts Maps JavaScript library (http://www.highcharts.com/maps/). I managed to get the map to appear on screen, but it far to small to view properly.
I took GeoJSON data for a map of Haiti with administrative boundaries.
The map is here: http://haitidata.org/layers/cnigs.spatialdata:hti_boundaries_communes_adm2_cnigs_polygon
This is a direct link to a GeoJSON file of the map data:
http://haitidata.org/geoserver/wfs?srsName=EPSG%3A4326&typename=cnigs.spatialdata%3Ahti_boundaries_communes_adm2_cnigs_polygon&outputFormat=json&version=1.0.0&service=WFS&request=GetFeature
Here is my HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Homepage</title>
<link rel="stylesheet" type='text/css' href="css/normalize.css" type="text/css">
<link rel="stylesheet" type='text/css' href="css/main.css" type="text/css">
<link rel="stylesheet" type='text/css' href="css/responsive.css" type="text/css">
<!-- start JavaScript includes -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="js/haiti.js"></script> }
<!-- end JavaScript includes -->
</head>
<body>
<div id="container">
</div>
<p>This is some text.</p>
</body>
</html>
This is the content of haiti.js, a JavaScript file with the code to initialize the map:
$(function () {
// Prepare random data
var data = [
{
"id_dept": 1,
"value": 5000
},
{
"id_dept": 2,
"value": 10000
},
{
"id_dept": 3,
"value": 15000
},
{
"id_dept": 4,
"value": 20000
},
{
"id_dept": 5,
"value": 25000
},
{
"id_dept": 6,
"value": 30000
},
{
"id_dept": 7,
"value": 40000
},
{
"id_dept": 8,
"value": 5000
},
{
"id_dept": 9,
"value": 60000
},
{
"id_dept": 10,
"value": 70000
},
];
$.getJSON('js/haiti.json', function (geojson) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'GeoJSON in Highmaps'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoom: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
},
series : [{
data : data,
mapData: geojson,
joinBy: ['id_com', 'id_dept'],
name: 'Random data',
dataLabels: {
enabled: true,
format: '{point.properties.id_com}'
}
}]
});
});
});
I have placed the GeoJSON data of the map in a separate file titled haiti.json. See link at top of question.
What I am doing wrong? The map is being displayed far too small and I am not able to click and zoom in on it.
Here is a screenshot of what is displayed on my screen. The container for the map should be 500px by 500px, so the map is showing up much small at just a few pixels width and height.
https://www.dropbox.com/s/844030r2o395zea/Screenshot%202014-08-01%2023.15.50.png
You can use maps from javascript and then use data module to add data to your map, like in the example: http://jsfiddle.net/X85CS/3/
var mapData = Highcharts.geojson(Highcharts.maps['countries/ht/ht-all']);
var data = [{
"value": 1438,
"code": "OU"
}];
I have some JSON data and wanted to try out google charts. I used examples from the documentation from here and here
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API
google.load("visualization", "1", {packages:["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "get-stats.php",
dataType:"json",
async: false
}).responseText;
var options = {
title: 'Stats'
};
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the chart-->
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
When chart.draw() gets called, an error "undefined is not a function" appears on the site.
My JSON file gets loaded like this (get-stats.php)
<?php
$string = file_get_contents("stats.json");
echo $string;
?>
The JSON is formatted like that:
{
"cols": [
{
"id": "date",
"label": "Date",
"type": "datetime"
},
{
"id": "cntall",
"label": "Total",
"type": "number"
},
{
"id": "cntpers",
"label": "Pers",
"type": "number"
}
],
"rows": [
{
"c": [
{
"v": "new Date(2013, 11, 17, 9, 54, 0)"
},
{
"v": 320
},
{
"v": 123
}
]
},
{
"c": [
{
"v": "new Date(2013, 11, 17, 11, 4, 0)"
},
{
"v": 300
},
{
"v": 67
}
]
}
]
}
I suspect it has something to do with the JSON. All the code is from the google examples.
var data = new google.visualization.DataTable($jsonData);
Try this instead
$jsondata => json_encode($jsonData);
and put that with in php tag
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