Related
I have a json array consisting of fields
[{"id":"JP", "name":"Japan", "nodes":12, "percent":1.2, "ips":[...]}, {...}, {...}]
I would like to view per country nodes and percent in a map bubble using Highcharts. Something very similar to https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/map-bubble/
I have loaded this JSON file into javascript but I can't figure out how to tweak the HighCharts series code to suit to my requirements. Seeking out for help. Thanks!
You have to bind your data with map data using series.joinBy property:
var data = [{
id: "JP",
name: "Japan",
nodes: 12,
percent: 1.2,
ips: [],
z: 100
}];
Highcharts.mapChart('container', {
chart: {
borderWidth: 1,
map: 'custom/world'
},
title: {
text: 'World population 2013 by country'
},
subtitle: {
text: 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series: [{
name: 'Countries',
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
name: 'Population 2016',
joinBy: ['iso-a2', 'id'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.properties.hc-a2}: {point.z} thousands'
}
}]
});
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container"></div>
Demo:
https://jsfiddle.net/BlackLabel/zjsxn6rp/
API reference:
https://api.highcharts.com/highmaps/series.mapbubble.joinBy
I'm new to Javascript and got the following Code working:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Temperatur</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$.getJSON('sqltojson.php', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'hour',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'minute',
count: 360,
text: '6 hour',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'all',
text: 'all',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 0
},
title: {
text: 'Temperatur'
},
series: [{
name: 'Temperatur',
type: 'spline',
data: data,
color: '#0000FF',
tooltip: {
valueSuffix: '°C'
}
}]
});
});
});
$(function () {
$.getJSON('sqltojson2.php', function (data) {
// Create the chart
$('#container2').highcharts('StockChart', {
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'hour',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'minute',
count: 360,
text: '6 hour',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}, {
type: 'all',
text: 'all',
dataGrouping: {
forced: true,
units: [['minute', [1]]]
}
}],
buttonTheme: {
width: 60
},
selected: 0
},
title: {
text: 'Luftfeuchte'
},
series: [{
name: 'Luftfeuchte',
type: 'spline',
data: data,
color: '#FF0000',
tooltip: {
valueSuffix: '%'
}
}]
});
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<div id="container2" style="height: 400px; min-width: 310px"></div>
</body>
</html>
I now want to get both of the graphs into one Chart, and it should Update every Minute.
At the Moment I have two php scripts. One for [Timestamp, Temperature] and ohne for [Timestamp, Humidity].
I tried several Code snippets I found here, but i couldn't change it to my needs, because of my not present Javascript knowledge.
Could someone please give me a hint what I should try, or where I could find something that explains what I have to do?
Thank you in advance.
Use setInterval() to run your javascript every time interval as you choose.
http://www.w3schools.com/jsref/met_win_setinterval.asp
is a good tutorial to get to know how it's done.
I hope rest you can do from your current javascript knowledge. Name current two functions, run it inside another function defined inside setInterval function.
If you want to draw two charts on top of each other, pass it as a two-D array to HighChart.
http://www.highcharts.com/demo
contains lot of examples, and you can follow that.
For example,pass an array to a function which contains your code to draw the graph, then use that variable to give value to series.
function draw_first_chart(div_id,x_axis,data_input)
{
$(div_id).highcharts({
chart: {
// ..//
},
title: {
// ..//
},
xAxis: {
// ..//
},
categories: x_axis
},
yAxis: {
// ..//
},
tooltip: {
// ..//
},
legend: {
// ..//
},
series: data_input
});
Here, if you want to display finite values in x axis, send an array to variable x_axis and other data to data_input as an array. If not just ignore variable x_axis and pass an array to data_input. Make sure in the
data_input[i]['name']
should contain all graph titles (Humidity, Tempreture) and
data_input[i]['data']
contains data. i is the number for each graph.
Hope this helps.
Currently I am using spiderweb highcharts with ColdFusion. Can i set two axis in the spiderweb? Besides that, how can i link to another page when i click on the x-axis'label with data passing?
Below is my code. TQ
<cfscript>
categories= ['Overall','Appt Booking', 'Reception', 'Service Advisor', 'Completion Delivery Process'] ;
series = [{
'name': 'Last Month',
'data': [3.775,3.5, 3.9, 4, 3.7],
'pointPlacement': 'on'
}, {
'name': 'MTD',
'data': [ 3.775, 3.7, 3.5, 3.9, 4],
'pointPlacement': 'on'
}, {
'name': 'Target',
'data': [3.725, 3.8,3.5, 3.7, 3.9],
'pointPlacement': 'on'
}];
</cfscript>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<script src="highcharts-more.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -1000
},
pane: {
size: '70%'
},
xAxis: {
categories: <cfoutput>#serializeJson(categories)#</cfoutput>,
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: [{
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 3,
endOnTick: true,
showLastLabel: true,
tickPositions: [3,3.5, 4, 4.5, 5]
}],
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.2f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: <cfoutput>#serializeJson(series)#</cfoutput>
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I am not sure about limitation in ColdFusion, but in Highcharts you can simply use xAxis.labels.formatter to use <a> tags in labels, see demo in the docs.
For multiple yAxes - it's the same, Highcharts supports multiple yAxes, simply use structure as yAxis: [ { ... }, { ... } ] and you will get two axes. Second yAxis will be empty, so don't forget to connect specific series to that axis using series.yAxis.
I am creating a chart and have so far found that a scatter and errorbar combination chart is the best fit. I have hit a problem when adding an extra pair of series that because I have used a scatter, that they are placed on top of each other.
This is the standard view for the chart which is correct:
This is what I WANT to happen when I add an extra pair of series data:
But this is what happens:
var chart;
$(function () {
$('#container').highcharts({
title: {
text: 'Chart'
},
tooltip: {
enabled: false
},
xAxis: [{
categories: ['Col1', 'Col2', 'Col3']
}],
yAxis: [{ // Primary yAxis
title: {
text: 'Chart'
}, opposite: true
}
, { // Secondary yAxis
title: {
text: 'Score'
}
}],
plotOptions: {
scatter: {
dataLabels: {
enabled: true,
x: 0,
y: 10
},
enableMouseTracking: false
},
errorbar: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'Value',
type: 'scatter',
yAxis: 1,
data: [1001.418, 1000.006, 1005.237],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[0],
padding: 3,
color: '#ffffff',
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1000.46, 1002.376], [999.071, 1000.941], [1002.753, 1007.721]]
},
//START extra data
{
name: 'Compare',
type: 'scatter',
yAxis: 1,
data: [1001.918, 1000.506, 1005.737],
dataLabels: {
backgroundColor: Highcharts.getOptions().colors[1],
padding: 3,
style: {
"textShadow": "none",
"lineHeight": "13px"
},
useHTML:true
},
marker: {
symbol: "square"
},
}, {
type: 'errorbar',
whiskerColor: '#555',
stemColor: '#555',
yAxis: 1,
data: [[1001.46, 1003.376], [1000.071, 1001.941], [1003.753, 1006.721]]
},
//END extra data
{
//force the ErrorBar icon into the legend
name: 'ErrorBar',
type: 'scatter',
marker: {
symbol: "url(data:image/gif;base64,R0lGODlhDwAMAIAAAFVVVf///yH5BAEHAAEALAAAAAAPAAwAAAIXhI8ZywEN4Yt0UnmjzWtzn4GXWFXJeRQAOw==)"
},
data:[null]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
http://jsfiddle.net/ewurrLgk/
I have taken a look through the API and I have tried to use other chart types like Line and Column and although they do align correctly, the error bar pretty much disappears because those chart types start from zero. I've also tried pointPlacement but that just moves them both into the middle. Is what I am trying to do just not possible using a scatter?
You should use pointPlacement, but set per particular series. I prepared a minified demo for you:
series: [{
type: 'scatter',
pointPlacement:-0.2,
data: [51,73]
},{
type: 'scatter',
pointPlacement:0.2,
data: [8,7.6]
},{
type: 'errorbar',
pointPlacement:-0.2,
data: [[48, 51], [68, 73]]
}, {
type: 'errorbar',
pointPlacement:0.2,
data: [[6, 8], [5.9, 7.6]]
}]
http://jsfiddle.net/6e749xx9/1/
This is the high chart graph code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I want to add trend line for this chart, i searched in google and got the code from this link : https://github.com/virtualstaticvoid/highcharts_trendline
and i added the trend line code like this .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="regression.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
var chart_linear = new highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
enableMouseTracking: false
}
},
series: [{
type: 'scatter',
data: sourceData
},
{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
});
</script>
</head>
<body>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
and the trend line that acts according to the x-axis and y-axis values but on the x-axis values are date wise and the y-axis values are numbers ,please find the screen shot for the first code :
And this the trend line snapshot. please find.
please share any one of the code that i would like to add the two graphs in the same page , i have tried but the x-axis and y-axis values are different for the two graphs.
Thanks.
Numerous problems.
1.) You didn't really integrate the regresssion code into your plot, you just cut/pasted from the example and are over-drawing your plot. You need to add the regression line as a second series to your plot:
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: sourceData
},{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
2.) This is not valid javascript:
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
Those are strings and they aren't quoted. Regardless, strings won't cut it for the regression, it needs numbers. Since your dates are really categories, just use:
var sourceData = [
[0, 99.75], [1, 99.77],
[2, 99.78], [3, 99.84],
[4, 99.82], [5, 99.82],
[6, 99.76], [7, 99.78],
[8, 99.8], [9, 99.65],
[10, 99.94], [11, 99.8]
];
3.) Your series name is way too long for a right side legend (it squished the plot). In my example I moved it to the bottom.
Here's a example putting all this together.
You can use this Plugin that I believe will do what you want to.
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
$('#container').highcharts('StockChart', {
title : {
text : 'AAPL Stock Price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
xAxis: {
ordinal: false
},
yAxis: {
title : {
text : 'Price'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series : [{
name: 'Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name: 'Linear Trendline',
linkedTo: 'primary',
showInLegend: true,
enableMouseTracking: false,
type: 'trendline',
algorithm: 'linear'
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://rawgithub.com/laff/technical-indicators/master/technical-indicators.src.js"></script>
<div id="container" style="min-width: 500x; height: 400px; margin: 0 auto"></div>
Source:
http://www.highcharts.com/plugin-registry/single/16/technical-indicators