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.
Related
I am trying to update and shift my graph along its x-axis, so that it includes a maximum of 5 values on the x-axis. This is what I am trying to achieve essentially. This is what I currently have:
<body>
<div id="chart"></div>
<script type="text/javascript">
var options = {
chart: {
id: 'realtime',
height: 350,
type: 'line',
animations: {
enabled: true,
easing: 'easeinout',
speed: 1000,
dynamicAnimation: {
enabled: true,
speed: 1000
}
}
},
dataLabels: {
enabled: false
},
stroke:{
curve: 'smooth'
},
series: [{
name: "Sales",
data: mData()
}],
title: {
text: 'Ajax Example',
},
noData: {
text: 'Loading...'
}
}
var chart = new ApexCharts(
document.querySelector("#chart"),
options
);
chart.render();
setInterval(function(){
chart.appendData([{
name: "Sales",
data: mData()
}]);
}, 1000);
</script>
</body>
My code already updates my graph, but how can I shift my graph with the current code I have?
You can set max number of elements in xaxis like this
xaxis:{
range: 5,
},
https://apexcharts.com/docs/options/xaxis/#range
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
how can i toggle the data table in high-charts from another button not from the exporting options in high-charts , when i click it once it should show the data table below the chart again i clicked on that it should hide the data-table, and i have the N number of graphs so it should be dynamic for all the charts
<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/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<button onclick="toggleDataTable()">
Toggle Datatable
</button>
<script>
function toggleDataTable(){
var chart= $('#container').highcharts()
chart.update({
exporting: {
showTable: true
}
});
}
Highcharts.chart('container', {
exporting:false,
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Chrome',
y: 61.41,
sliced: true,
selected: true
}, {
name: 'Internet Explorer',
y: 11.84
}, {
name: 'Firefox',
y: 10.85
}, {
name: 'Edge',
y: 4.67
}, {
name: 'Safari',
y: 4.18
}, {
name: 'Other',
y: 7.05
}]
}]
});
</script>
for the reference please go through this link:
https://jsfiddle.net/GnanaSagar/roL5mhu1/6/
First, showTable is an attribute from the exporting options. You cannot set exporting: false then. You must set it like this if you don't want to see the exporting button on top right:
exporting: {
enabled: false
},
Then for the onclick function, you should probably use something like:
function toggleDataTable() {
var chart = $('#container').highcharts()
chart.update({
exporting: {
showTable: !chart.options.exporting.showTable
}
});
}
But it does not remove the table after clicking back.
So I suggest you manually remove the table element when chart.options.exporting.showTable is going from true to false:
if (chart.options.exporting.showTable) {
var element = document.getElementById("highcharts-data-table-0");
element.parentNode.removeChild(element);
}
See updated jsfiddle here.
I'd like to trigger a message when Highcharts groups the data. I want to show the message that this is group data, not real data.
I found some information to disable grouping by:
dataGrouping: {enabled:false}
but I'd like to find an event that fires when data is auto-grouped which can trigger the message.
How can I achieve that?
$.getJSON('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/large-dataset.json', function(data) {
// Create a timer
var start = +new Date();
// Create the chart
Highcharts.stockChart('container', {
chart: {
events: {
load: function() {
if (!window.TestController) {
this.setTitle(null, {
text: 'Built chart in ' + (new Date() - start) + 'ms'
});
}
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2009-2017'
},
subtitle: {
text: 'Built chart in ...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data.data,
pointStart: data.pointStart,
pointInterval: data.pointInterval,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<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>
View on JSFiddle
It can be done by checking the state of hasGroupedData flag when generatePoints function. Both hasGroupedData and genearatePoints belong to a Series object. Highcharts.wrap function makes the code simple:
(function(H) {
H.wrap(H.Series.prototype, 'generatePoints', function(proceed) {
proceed.call(this);
console.log('Data grouping applied: ' + (this.hasGroupedData === true));
});
})(Highcharts);
Live demo: http://jsfiddle.net/BlackLabel/djvrew2h/
Comment out forced: true to check how function works when grouping is not applied.
Doc about wrapping: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
I want to add labels to my pie Highchart so that the label shows the category and amount like in this example
Here is my code:
$('#ro-tier-1').highcharts({
chart: {
type: 'pie'
},
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
endRow: 3,
googleSpreadsheetWorksheet: 16
},
plotOptions: {
dataLabels: {
enabled: true,
format: '{y}',
}
},
title: {
text: 'Tier 1 Schools in 2012, 2013, or 2014 Expansion or Ceiling increase '
},
yAxis: {
min: 0,
max: 25,
tickInterval: 5,
title: {
text: 'Amount of Schools'
},
},
xAxis: {
type: 'category',
title: {
text: 'Result'
}
},
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js">
</script>
</head>
<body>
<div id="ro-tier-1"></div>
</body>
I know my issue is in the format for the data lables, but API documentation is pretty sparse on that.
All you need is to place your dataLabels in correct plotOptions and use point
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.name}:{point.y}',
}
}
}
You can see a working sample here http://plnkr.co/edit/5VI6cAqVoIibhAJ8pYfP
UPDATE
Formatting can also work with {y} format: '{y}', but if you want more advanced expression referencing via point is essential