I am having trouble charting a json file in highcharts javascript. Below is my code. Any help would be greatly appreciated.
My test.json file simply contains: [1, 2]
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var a = $.get('test.json');
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
series: [{
data: [a]
}]
});
});
</script></head>
<body>
<div id="container"></div>
</body>
</html>
I'm pretty sure that if you're not seeing anything (or a weird graph) it's cause you should have:
data: a
as opposed to
data: [a]
The data field is supposed to be an array of integers. As it stands now it looks like an array of array of integers which will be misinterpreted by Highcharts.
you are passing the array as an element inside a array resulting a array of array of integers. this makes it plot only in some odd cases but not always
odd case means [[1,2,3,4]], this will not be plotted
for example
[[1,2], [2,4]] indicates 2 points to be plotted at (1,2) and (2,4) positions in the chart.
so in your case it plots only point at (1,2) instead of 2 points at you want,
[1,2] indicates 2 points with y value of first at 1 and second at 2
I think that is the issue you are getting, instead of 2 points only one point is plotted
so it should be
date: a
but not
data: [a]
I think the problem is with your AJAX call, according to docs, you should use callback:
<script type="text/javascript">
$(function () {
$.get('test.json', function(data) {
$('#container').highcharts({
chart: {
type: 'line'
},
series: [{
data: data
}]
});
});
});
</script>
So: create chart in callback, which is called after data from AJAX comes to the JS.
You should initialise your chart in the $.get() callback, because then you avoid missing data.
$(function () {
var a = $.get('test.json',function(data){
$('#container').highcharts({
chart: {
type: 'line'
},
series: [{
data: data
}]
});
});
});
Related
I have a Highcharts line chart and I would like to add a range selector to it. To do this, I read that you have to use Highstock, so I am trying to re-make the chart but it won't load the csv data. There is no error message or anything in the console, the lines just don't show up. Is there a different format/syntax I have to use? Here is the relevant code:
$(function() {
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
title: {
text: 'My chart'
},
data: {
csv: document.getElementById('csv').innerHTML
},
});
});
Thanks in advance!
Loading data in Highchart and Highstock works the same. Notice, that data requires the data module to be loaded additionally. Your options seem good, so it can be the issue.
Highcharts data documentation:
It requires the modules/data.js file to be loaded.
Check the demo:
https://jsfiddle.net/wchmiel/afy6m3tb/
HTML:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container"></div>
<h3>Raw data</h3>
<pre id="data">Date,series A, series B, series C, series D, series E, series F
3/01/2001,100,100,100,100,100,100
4/01/2001,100.0723,100.0766,100.1225,100.1446,100.1687,100.1325
5/01/2001,100.0399,99.9775,100.0809,100.3502,100.1117,100.5127
6/01/2001,100.3103,100.3867,100.2974,100.5214,100.4256,100.6885
7/01/2001,101.3379,102.0689,100.686,100.6031,100.9522,100.7648
</pre>
JS:
window.chart = Highcharts.stockChart('container', {
data: {
csv: document.getElementById('data').innerHTML
}
});
I've created a simple map with basic configurations. Labels are showing in the incorrect position. Any idea?
var map_chart;
function init_map(){
map_chart = new Highcharts.chart({
chart: {
type: 'map',
renderTo: 'map_container'
},
series: [{
mapData: Highcharts.maps['custom/world'],
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
});
}
$( document ).ready(function() {
init_map();
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="map_container">
</div>
For proper way of creating maps using Map collection
From highmaps docs
In the map collection reference, each map name is followed by a link to an example. View the source of this example to get started. In short, the GeoJSON version of the map is loaded in a script tag in the page. This GeoJSON object is then registered to the Highcharts.maps object, and applied to the mapData option in the chart setup.
Add the map as a JavaScript element:
<script src="http://code.highcharts.com/mapdata/custom/world.js">
You can alternatively link to a specific version or subversion of the map at http://code.highcharts.com/mapdata/1.1/custom/world.js.
Load it in series.mapData:
mapData: Highcharts.maps['custom/world'],
Alternatively, you can set the default map for all series with the chart.map option:
map: 'custom/world'
Join your data with the map. By default Highmaps is set up to map your data against the hc-keyproperty of the map collection, allowing you to define your data like this:
data: [['us-ny', 0], ['us-mi', 5], ['us-tx', 3], ['us-ak', 5]]
For other data joining options, see the series.joinBy and series.keys options.
Fiddle demo link
This seems to be caused by how the highmaps object is initiated.
replacing
map_chart = new Highcharts.chart({
with
map_chart = new Highcharts.Map({
solves the problem, JSFiddle
Basically I wanna define a function function makeChart(data) which creates a line chart with the data given.
I tried the following:
function makeChart(data) {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
series: [{
name: 'London',
data: data
}]
});
};
alert("going to do it");
makeChart([1,2,3]);
alert("done");
The first alert message is printed, but the second one is not. Could it be I did not import some files? My html is currently:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src = "render.js"></script>
<div id="container"></div>
I am new to how javascript. So please anyone explain how can I do this please?
You're not calling the function correctly, simply change
$(makeChart([1,2,3]);)
to
makeChart([1,2,3]);
See the DEMO here
To call the function it's just makeChart([1,2,3]);.
The $() is the jQuery selector. For example, $('#container').
I am trying to add programmaticallya string to the x axis, instead than declaring it in the chart creation.
So for example, I have my chart:
$.(document).ready(function{) {
chart=new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'line'
}
yAxis: {
title: { text: 'theYaxis'}
}
series: [1,2,3,4]
});
});
Now I want to change the yAxis title, so I create a small function; so it will look like this:
var titleY;
function loadme(){
$.get('names.csv', function(data){
var lines= data.split('\n');
titleY=lines[0].split(','[0];
});
}
$.(document).ready(function{) {
chart=new Highcharts.Chart({
chart:{
renderTo: 'container',
type: 'line'
}
yAxis: {
title: { text: titleY}
}
series: [1,2,3,4]
});
loadme();
});
This will result in the title being empty.
I am checking to be sure that the value is correctly retrieved, using console.log, and the value is collected and printed. What is wrong here? I get the same issue if I populate the $.get function with data that I want to add to the series in the chart: the data is never add to the chart, even if it is correctly retrieved.
I have created a demo fiddle to dynamically change y-axis title. Refer this JSFIDDLE
HTML:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<input type="button" value="Change Y-axis Title to 'My text'" id="my_btn">
JS (part of thec code to update the y-axis title on a button click):
var chart = $('#container').highcharts();
$('#my_btn').click(function(){
//alert('hey');
chart.yAxis[0].update({
title:{
text:"My text"
}
});
alert('Y-axis title changed to "My text" !');
});
Refer Highcharts 'update' function documentation for further details.
You have two options:
use axis.setTitle() - good performance, I advice use that solution for setting title
use axis.update() - lower performance, because it recreates whole axis, while first method only changes title
I am using HighCharts JS for making a bubble chart. It's a pretty self-explanatory but what I am trying to do is a changed mechanism.
the graph loads the chart perfectly, but it loads all the columns (or series) at the same time. What I am hoping to do is that it loads each column one-by-one.
You can see the example graph at this link:-
http://www.highcharts.com/demo/bubble
As you can see in the sample graph shown above, they have three series, and they all load simultaneously; I was hoping that it loads one-by-one.
Any idea,
Thanks.
You can remove series from options, and add all of them in load event. Demo: http://jsfiddle.net/qc8bS/
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
events: {
load: function () {
var chart = this;
function addSeries() {
if (s.length > 0) {
chart.addSeries(s[0]);
setTimeout(addSeries, 1000);
s.splice(0, 1);
}
}
addSeries();
}
}
},
title: {
text: 'Highcharts Bubbles'
},
series: []
});