highcharts not plotting json string containing x,y pairs (string, float). how to fix? - highcharts

I just switch from jqplot to highcharts, because i couldn't find an answer for my problem with jqplot.
My problem:
I want to plot the following result from a json string. this string contains out of datapairs in the following format: yyyy00kw (year with 4digits, 00 for padding, weeknumber 2digits) and a value (could be formated to float).
because the x value of the pair could change to yyyymmdd (year month day) or yyyywwdd (year week day) it has to be a string.
My json string contains the following:
[
[
["20050043",12.800000190735],
["20050044",17.39999961853],
["20050045",10.10000038147],
["20050046",5.9000000953674],
["20050048",4.6999998092651],
["20050049",9.8999996185303],
["20050050",9.1999998092651],
["20050051",8.3999996185303],
["20050052",2.0999999046326],
["20060001",2.7000000476837],
["20060002",-1.1000000238419],
["20060004",2],
["20060005",4.9000000953674],
["20060006",6.8000001907349],
["20060007",6.0999999046326],
["20060009",4.3000001907349],
["20060010",3.4000000953674],
["20060011",8.1999998092651],
["20060012",7],
["20060017",11.60000038147],
["20060018",21.60000038147],
["20060019",24.799999237061],
["20060020",16.700000762939],
["20060021",0],
["20060022",0],
["20060024",0],
["20060025",18.10000038147],
["20060026",20.200000762939],
["20060052",2.9000000953674],
["20070001",0],
["20070019",0],
["20070020",0],
["20070024",0],
["20070025",0],
["20070026",0],
["20070027",0],
["20070028",0],
["20070029",0],
["20070030",0],
["20070031",0],
["20070032",0],
["20070033",0],
["20070034",0],
["20070035",0],
["20070036",0],
["20070037",0],
["20070038",0],
["20070039",0],
["20070040",0],
["20070041",0],
["20070042",0],
["20070043",0],
["20070044",0],
["20070045",0],
["20070046",0],
["20070047",0],
["20070048",0],
["20070049",0],
["20070050",0],
["20070051",0],
["20070052",0],
["20080001",0],
["20080002",0],
["20080003",0],
["20080004",0],
["20080005",0],
["20080006",0],
["20080007",0],
["20080008",0],
["20080009",0],
["20080010",0],
["20080012",0],
["20080013",0],
["20080017",0],
["20080018",0],
["20080019",0],
["20080020",0],
["20080021",0],
["20080022",0],
["20080023",0],
["20080024",0],
["20080025",0],
["20080026",0],
["20080027",0],
["20080028",0],
["20080029",0],
["20080030",0],
["20080031",0],
["20080034",0],
["20080035",0],
["20080036",0],
["20080037",0],
["20080038",0],
["20080039",0],
["20080040",0],
["20080041",0],
["20080042",0],
["20080043",0],
["20080044",0],
["20080045",0],
["20080046",0],
["20080047",0],
["20080048",0],
["20080049",0],
["20080050",0],
["20080051",0],
["20080052",0],
["20090001",0],
["20090002",0],
["20090003",0],
["20090004",0],
["20090005",0],
["20090006",0],
["20090024",0],
["20090025",0],
["20090026",0],
["20090028",0],
["20090029",0],
["20090030",0],
["20090031",0],
["20090032",0],
["20090033",0],
["20090034",0],
["20090035",0],
["20090036",0],
["20090037",0],
["20090038",0],
["20090039",0],
["20090040",0],
["20090041",0],
["20090042",0],
["20090043",0],
["20090044",0],
["20090045",0],
["20090046",0],
["20090047",0],
["20090048",0],
["20090049",0],
["20090050",0],
["20090051",0],
["20090052",0],
["20090053",0],
["20100001",0],
["20100002",0],
["20100003",0],
["20100004",0],
["20100005",0],
["20100006",0],
["20100007",0],
["20100008",0],
["20100009",0],
["20100010",0],
["20100011",0],
["20100012",0],
["20100013",0],
["20100014",0],
["20100015",0],
["20100016",0],
["20100017",0],
["20100018",0],
["20100019",0],
["20100020",0],
["20100021",0],
["20100022",0],
["20100023",0],
["20100024",0],
["20100025",0],
["20100026",0],
["20100027",0],
["20100028",0],
["20100029",0],
["20100030",0],
["20100031",0],
["20100032",0],
["20100033",0],
["20100034",0],
["20100035",0],
["20100036",0],
["20100037",0],
["20100038",0],
["20100039",0],
["20100040",0],
["20100041",0],
["20100042",0],
["20100043",0],
["20100044",0],
["20100045",0],
["20100046",0],
["20100047",0],
["20100048",0],
["20100049",0],
["20100050",0],
["20100051",0],
["20100052",0],
["20100053",0],
["20110001",0],
["20110002",0],
["20110003",0],
["20110004",0],
["20110005",0],
["20110006",0],
["20110007",0],
["20110008",0],
["20110009",0],
["20110010",0],
["20110014",0],
["20110015",0],
["20110016",0],
["20110017",0],
["20110018",0],
["20110019",0],
["20110020",0],
["20110021",0],
["20110022",0],
["20110023",0],
["20110024",0],
["20110025",0],
["20110026",0],
["20110027",0],
["20110028",0],
["20110029",0],
["20110030",0],
["20110031",0],
["20110032",0],
["20110033",0],
["20110034",0],
["20110035",0],
["20110036",0],
["20110039",0],
["20110043",0],
["20110044",0],
["20110045",0],
["20110046",0],
["20110047",0],
["20110048",0],
["20110049",0],
["20110052",0],
["20120001",0],
["20120002",0],
["20120003",0],
["20120004",0],
["20120005",0],
["20120006",0],
["20120007",0],
["20120009",0],
["20120010",0],
["20120013",0],
["20120014",0],
["20120015",0],
["20120016",0],
["20120017",0]
]
]
Here is my javascript code:
<script class="code" type="text/javascript">
var data = [];
var chart;
$(document).ready(function() {
//hier geht es los
$.getJSON("120925_sql_bauen.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart1',
type: 'line'
},
title: {
text: 'Wetterdatenprojekt'
},
xAxis: {
//categories: []
},
yAxis: {
title: {
text: 'aktuelle Wetterwerte'
},
plotLines: [{
value: 0,
width: 1
}]
},
series: json
});
});
});
</script>
Unfortunately highcharts shows no plot.
I hope, that highcharts doesn't have the same problem with strings then jqplot :-(

The problem is that you try to use your reply directly. You need to "remove" one layer of arrays. That is data should be json[0]
I updated my example: http://jsfiddle.net/GgNmY/2/
Regarding previous note that values should be numeric is only true for Y-axis (at least in earlier versions of Highcharts).
Edit: Here is to extract the data point (the values) and the categories.
var data = [];
var cats = [];
json[0].forEach(function(point){
data.push(point[1]);
cats.push(point[0]);
});
Here is an running example: http://jsfiddle.net/GgNmY/3/

In Highchart, you can set your series : data object in the form of the JSON input.
In such a case, if the JSON input is in the form:
[
[1,12],
[2,5],
[3,18],
....
[10,22]
]
Then the following attribute can be added in the chart definition:
series:[{
data: json
}]
Here is the running JSFiddle example

Related

Highcharts - data day sum one day ahead

Good evening (CET),
I collect data, calculate a day sum, store the value in mySQL with a time stamp close to 24h of that day (like August 4, 23:59:30).
In a Highchart Column graph, the value will be shown on the August 5th. (You will see this be hovering over the bar, that the value doesn't fit to the xAxis.)
A working example is at http://jsfiddle.net/bg8yu3ft/
// data
var data = [ [1501624793000, 3389], [1501883993000, 4045], [1501970397000, 6572], [1502056798000, 5836], [1502143193000, 4736], [1502229588000, 6629], [1502315996000, 3981], [1502402391000, 4424] ]
// create the chart
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
}]
});
Looking forward to any advice to center the bar on the day it belongs to.
Assuming all your data is going to be in the same format (i.e. close to midnight) you can do it easily with pointplacement like this: fiddle. Depending on your timezone you might have to adjust the value a little.
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
pointPlacement: -1.2
}]
});
Another option would be to move the ticks, API.
You could change your x data to the closes full day then in the chart all will work fine and axis, point, tooltip will show x values as full days.
If you need to have precise day in the tooltip, then you could show it as an info. Demo: http://jsfiddle.net/BlackLabel/7uhdfcj4/
// data
var data = [
[1501624793000, 3389],
[1501883993000, 4045],
[1501970397000, 6572],
[1502056798000, 5836],
[1502143193000, 4736],
[1502229588000, 6629],
[1502315996000, 3981],
[1502402391000, 4424],
];
Highcharts.each(data, function(d, i) {
var realTime = d[0],
date = Highcharts.dateFormat('%Y:%m:%d:%H:%M:%S:%L', realTime).split(':'),
day = (+date[2]) + ((+date[3]) > 19 ? 1 : 0);
data[i].push(realTime);
data[i][0] = Date.UTC(+date[0], +date[1], day);
});
// create the chart
Highcharts.stockChart('container', {
series: [{
type: 'column',
data: data,
keys: ['x', 'y', 'realTime'],
tooltip: {
pointFormat: '{point.realTime: %Y.%m.%d %H:%M:%S}'
}
}]
});
<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"></div>

How to display tooltip only for last point?

I am using live random data in my chart . Here i want to display current feed value in right side of chart which will travel along with chart's last point.
I am trying to display tootip in last point which series will added dynamically. But i am unable to add tootip to last point alone.
Can anyone help me to achieve this.
Here is jsfiddle and what i am trying is
To show a tooltip you could use toolip.refresh(point).
Example: http://jsfiddle.net/a6pshutt/7/
...
setInterval(function () {
var x = (new Date()).getTime(),
y = Math.random();
len = series.data.length;
series.addPoint([x,y], false, true);
series2.data[0].update([x,y]);
tooltip.refresh(series2.data[0]); // <----------here
}, 1000);
...
To show a dataLabel you could enable it for the scatter point in your scatter series.
Example: http://jsfiddle.net/83kp2d4t/
...
events: {
load: function () {
var tooltip = this.tooltip,
series = this.series[0],
len = series.data.length;
this.addSeries({
id: 'end point',
type: 'scatter',
marker: {
enabled:true,
symbol:'circle',
radius:4,
fillColor:'white',
lineColor: 'black',
lineWidth:2
},
dataLabels:{
enabled: true // <----------here
},
data: [[
series.data[len - 1].x,
series.data[len - 1].y
]]
});
...

Highcharts for multiple plot lines each with a different color and show tooltip?

I have a flask app in which I am using Highcharts to plot data, and if the user enters a lot of inputs for which he needs a graph, I plot multiple plot lines on the graph with different colors. But after 8-10 plot lines the color repeat and hence its not useful coz its not distinguishable.
<script type="text/javascript">
$('document').ready(function(){
window.seriesOptions = [];
window.yAxisOptions = [],
window.seriesCounter = 0,
window.colors = Highcharts.getOptions().colors;
generate_graph( {{ coordinates| safe }} , {{ graph_name | safe }} );
});
</script>
/*
Generate graph function takes two input parameters i.e. Coordinates - which is an array of [x, y] points AND graph_name which is an array of the (service_name,server_name) pair and generates
seriesOptions and calls createChart function.
*/
function generate_graph(coordinates, graph_name){
$.each(graph_name, function(i, name) {
window.seriesOptions[i]= {
name : graph_name[i],
data : coordinates[i],
type : 'line'
};
seriesCounter++;
if (seriesCounter == graph_name.length) {
createChart();
}
});
$('#add-to-dashboard-button').show();
}
/*
createChart function generates the actual graphs and sets the different properties of the graph.
*/
function createChart(){
$('#chart').highcharts('StockChart', {
chart: {
zoomType: 'x'
},
rangeSelector: {
selected: 4
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.value);
}
}
},
title : {
text : 'Graph'
},
legend: {
enabled: true,
layout: 'vertical',
labelFormat: '<span style="color:{color}">{name}</span> - <b> x : ({point.x:.2f}) , </b> y : ({point.y:.2f}) <br/>',
maxHeight: 100
},
series : seriesOptions
});
}
</script>
How to make sure that every time a plot is generated its in a different unique color and hence distinguishable.
Also The tooltip doesn`t appear even though the data for x axis is sorted?
If you don't specify any colours when creating a chart or adding a series, highcharts will pick one from it's default colours. There are a limited number of defaults.
However, you can tell highcharts about a new set of default colours, so you could give it more to chose from, up to the maxumum you want to support. This code sets 9 defaults, but you can add as many as you want, you just need to come up with some unique colours:
Highcharts.setOptions({
colors:[
'#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Make this the first thing you call.

Formatting Tooltip Value on Series

I'm creating a multichart (line and column) and I need to format the tooltip value for only one of my series. The thing is: formatter doesn't seem to work inside series.
I have a point value like: 212575200
In tooltip it's being formatted into 2.125.752,00
But I need it to be formatted into: 2.1 M (for million)
(K for thousand, M for million, B for billion)
How can I format a tooltip value for only one of my series?
This is the code I'm using:
series : [{
name : ((tipoGrafico == 'line' || tipoGrafico == 'column')?'ult':' '),
data : dadosJson,
pointStart: dadosJson[0][0],
pointInterval: 24 * 3600 * 1000,
yAxis: 0, // Em qual grafico do eixo Y irĂ£o esses dados
tooltip: {
valueDecimals: CASAS_DECIMAIS,
}
},{
type: 'column',
name: nomeEstudo,
data: volume,
pointStart: dadosJson[0][0],
pointInterval: 24 * 3600 * 1000,
yAxis: 1,
tooltip: {
valueDecimals: ((nomeEstudo != "neg") ? CASAS_DECIMAIS : 0),
pointFormat: '<tspan style="color:{series.color}"> {series.name}: </tspan><tspan> ' + formatNumber(('{point.y}'/formataValores('{point.y}').divisor))+formataValores('{point.y}').letra + '</tspan>'
},
}],
Notice that I'm trying pointFormat, but It's returning a NaN from my other JS functions, because it can't figure out in time '{point.y}' is actually a Number, not a String.
In the formatter you can check which serie is displayed in the tooltip, then use condition (i.e based on the id of serie or name or index) and return content.
Following kind of function will help you:
tooltip:
{
formatter: function() {
for(var temp=0,tempLength = this.points.length;temp<tempLength; temp++)
{
//You will get the point value here by using following code
var Value = this.points[temp].y;
//Now you can apply any format to this value
}
}
}

highcharts converting area range to multiple lines on plot

Need a hand deciphering the Highcharts methodology please.
I have input data that is a lot of records with three fields (timestamp, min, max) that I'd like to generate a plot from. Goal is to have two lines, one with max-vs-time and the other with min-vs.time, both on that one plot.
I got an arearange to work (fiddle here) but if I change the plot type to spline, I just get one line graph with min vs. time (i.e., it ignores the last data parameter).
Same thing happens when I mess with the Highcharts arearange example, so I'm guessing that my series is not defined correctly, but I'm not deciphering the right terminology to figure out how to ask the question yet I guess. Any help appreciated....
// data is timestamp,min,max for the day
// - this currently plots only the min for each day
// - intent is two lines, one for min and one for max
var data = [
[1186124400000, 57.2, 75.6],
[1186210800000, 51.8, 74.7],
[1186297200000, 53.8, 74.8],
[1186383600000, 56.7, 72.7],
[1186470000000, 59.0, 76.1]
];
var options = {
chart: {
renderTo: 'container',
type: 'arearange'
},
title: {
text: 'historical temperatures'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'outsideTemp (F)'
}
},
legend: {
enabled: false
},
series: [{
legend: {
enabled: false
},
data: data
}]
};
$(document).ready(function () {
var chart1 = new Highcharts.Chart(options)
});
You need to create two separate series.
So this:
var data = [
[1186124400000, 57.2, 75.6],
[1186210800000, 51.8, 74.7],
[1186297200000, 53.8, 74.8],
[1186383600000, 56.7, 72.7],
[1186470000000, 59.0, 76.1]
];
Will need to be two separate arrays, each with a single y value, and the same x values:
var data1 = [
[1186124400000, 57.2],
[1186210800000, 51.8],
[1186297200000, 53.8],
[1186383600000, 56.7],
[1186470000000, 59.0]
];
var data2 = [
[1186124400000, 75.6],
[1186210800000, 74.7],
[1186297200000, 74.8],
[1186383600000, 72.7],
[1186470000000, 76.1]
];
Updated Fiddle:
http://jsfiddle.net/jlbriggs/5q5HJ/12/
If your x values are at consistent intervals, you can use the pointStart and pointInterval properties and skip specifying the x values
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval

Resources