Missing line on chart in popup - highcharts

I wonder if anyone can see where I am going wrong. I am trying to get my line to appear on my chart in a popup. It works OK if I have the chart in a separate div but not in a popup. I am pulling data from Geoserver and I can see all the data fine. I am using leaflet and Highcharts.
Here is the relevant code.
var field_boundaries = L.tileLayer.wms("http://localhost:1997/geoserver/RSAC/wms", {
layers: 'RSAC:results_clipped_with_growth_small_new',
format: 'image/png',
transparent: true,
version: '1.1.0',
attribution: "myattribution"
});
//loads the geojson layer
var owsrootUrl = 'http://localhost:1997/geoserver/RSAC/wms';
var defaultParameters = {
service : 'WFS',
version : '1.1.0',
request : 'GetFeature',
typeName : 'RSAC:results_clipped_with_growth_small_new',
outputFormat : 'json',
format_options : 'callback:getJson',
SrsName : 'EPSG:4326'
};
var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);
var ajax = $.ajax({
url : URL,
dataType : 'json',
jsonpCallback : 'getJson',
success : function (response) {
new L.geoJson(response, {
onEachFeature: function (feature, url) {
// Create div with class name highchart
var div = L.DomUtil.create('div', 'highchart');
// Bind popup to layer with div as content
url.bindPopup(div);
// Handle event when popup opens
url.on('popupopen', function (e) {
console.log(e.target); // layer object
console.log(e.target.feature); // layer's feature object
console.log(e.popup); // popup object
console.log(e.popup.getContent()); // the div
$(".highchart").on('click', function onPopUpOpen(e){
$(".highchart")(e.popup.getContent(),{
chart: {
type: 'line',
renderTo: 'bindPopup'
},
title: {
text: 'Growth'
},
series: {
lineWidth:1,
colour: '#FF0000'
},
xAxis: {
allowDecimals: true,
categories: ['20151114', '20151126', '20151208', '20151220', '20160113', '20160125', '20160206', '20160218', '20160301', '20160313', '20160325', '20160406', '20160418', '20160430', '20160512', '20160524', '20160605', '20160629', '20160723', '20160804', '20160816'],
labels: {
formatter: function () {
return this.value;
}
}
},
yAxis: {
startOnTick: false,
minPadding: 0.05,
title: {
text: 'Crop Growth',
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
pointFormat: '{series.name}{point.y}'
},
plotOptions: {
line: {
dataLabels: {
enabled: false
},
enableMouseTracking: true
}
},
series: [{
cursor: 'pointer',
color: '#4D4D4D',
lineWidth: 3,
name: 'Growth',
data: [parseFloat(feature.properties.Date_20151114),parseFloat(feature.properties.Date_20151126),parseFloat(feature.properties.Date_20151208), parseFloat(feature.properties.Date_20151220), parseFloat(feature.properties.Date_20160113), parseFloat(feature.properties.Date_20160125), parseFloat(feature.properties.Date_20160206), parseFloat(feature.properties.Date_20160218), parseFloat(feature.properties.Date_20160301), parseFloat(feature.properties.Date_20160313), parseFloat(feature.properties.Date_20160325), parseFloat(feature.properties.Date_20160406), parseFloat(feature.properties.Date_20160418), parseFloat(feature.properties.Date_20160430), parseFloat(feature.properties.Date_20160512), parseFloat(feature.properties.Date_20160524), parseFloat(feature.properties.Date_20160605), parseFloat(feature.properties.Date_20160629), parseFloat(feature.properties.Date_20160723), parseFloat(feature.properties.Date_20160804), parseFloat(feature.properties.Date_20160816)]
},
]
});
// Create the chart
//var chart = new Highcharts.Chart(options);
});
}).addTo(mymap);
}
});
}
});

Related

How to display extra data in highcharts bubble chart tooltip with datetime x-axis

I am trying to display some more data in highcharts bubble chart tooltip with no success. How can I access this.point.comments inside the tooltip formatter?
The bubble chart I am using has datetime as x-axis.
$('#chart-bubble').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
plotBorderWidth: 1
},
title: {
text: 'Risk & Profit Vs Date'
},
tooltip: {
useHTML: true,
formatter: function(){
var expectedProfit = '';
if( this.point.z !== 'none' )
{
expectedProfit = formatExpectedProfit(this.point.z);
}
var tooltip = '<table class="table table-bordered" style="width: 300px;"><tbody><tr><td colspan="2"><h5>'+this.series.name.substr(0,75)+'...</h5></td></tr>' +
'<tr><td>Risk:</td><td>'+this.y+'</td></tr>';
if( expectedProfit !== '' )
{
tooltip += '<tr><td>Profit:</td><td>'+expectedProfit+'</td></tr>';
}
else
{
tooltip += '<tr><td>Comments:</td><td>'+this.point.comments+'</td></tr>';
}
tooltip += '</tbody></table>';
return tooltip;
},
followPointer: false
},
rangeSelector: {
enabled:true
},
xAxis:{
type: 'datetime',
dateTimeLabelFormats: {
day: '%e of %b'
}
},
yAxis: {
title: {
text: 'Ri'
}
},
series: prepareData(res.bubble)
});
Here is the prepareData function:
function prepareData(data)
{
for( var i in data )
{
var item = data[i];
for( var k in item.data )
{
var itemData = item.data[k];
if( itemData[0] )
{
var split = itemData[0].split("-");
var y = split[0];
var m = split[1]-1;
var d = split[2];
itemData[0] = Date.UTC(y,m,d);
item.data[k] = itemData;
}
}
data[i] = item;
}
return data;
}
And the res.bubble json returned from PHP:
$list = array();
$list[] = array('name'=>'project 1','color'=>'#FF0000','data'=>array(new \DateTime(),20,'none'),'pointInterval'=>86400000,'comments'=>'this is a comment');
//.... repeating by adding some more elements to this array
You can access all additional properties via point.options[/* property */.
Highcharts.chart('container', {
chart: {
type: 'bubble',
},
tooltip: {
formatter: function () {
return this.point.options.comments[0];
}
},
series: [{
data: [
{ x: 95, y: 95, z: 13.8, name: 'BE', comments: ['this is a comment'] },
]
}]
});
example: http://jsfiddle.net/yd1vjfmp/

Highchart multiseries issue for passing string using spring and jsp

My problem is I have one string which has all the data in json right format but when I am giving this string in Highchart series oprtion it is not coming properly.
below is the scrip which is written in jsp:
<script>
var blocksdata = '["(0-6)", "(6-12)" , "(12-24)", "(24-48)", "(48-72)", ">72"]';
var i;
function chartData (reportDataString) {
$('#TATChart').highcharts({
chart: {
type: 'column'
},
title: {
text: 'TAT Data'
},
xAxis: {
type: 'category',
categories: JSON.parse(blocksdata),
labels: {
rotation: -90,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of candidates verified'
}
},
legend: {
enabled: true
},
series: reportDataString
});
};
var processed_json1 = new Array();
var url ='${pageContext.servletContext.contextPath}';
$.ajax({ url: url+'/bgvservice/getChart',
type: "GET",
dataType: 'json',
success: function (data) {
var names = [];
var values = [];
for(i=0;i<data.finalData.length;i++){
names.push(data.finalData[i].key);
values.push(data.finalData[i].value);
}
var reportdata;
var reportDataString;
for(var i=0;i<names.length;i++) {
reportdata = "{name: \""+names[i]+"\",data: "+values[i]+",dataLabels: {enabled: true,rotation: 0,color: '#FFFFFF',align: 'center',x: 4,y: 10,style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif',textShadow: '0 0 3px black'}}}";
if(reportDataString!=undefined){
reportDataString = reportDataString+','+reportdata;
}
else
reportDataString = reportdata;
}
alert('outside'+reportDataString);
chartData(reportDataString);
}
});
</script>
But chart is not displaying on page.
I not able to find the issue.

using JSON dates with Highstock chart (asp.net MVC)

I am trying to output JSON data on to Highstock chart. Initially I struggled with the JSON formatted date which I resolved by following instruction on other answer on stackoverflow by re-formatting dates. But I'm still unable to get the graph plotted on view page -
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var mydata =[];
chartOjb = new Object();
$.ajax({
type: "GET",
url: "/ReportIntance/DummyCall/2",
data: '{ }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$.each(data, function (index, item) {
chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
chartOjb.data = item.Series1;
mydata.push({
x: new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10)),
y: item.Series1
});
})
},
failure: function (response) {
alert(response);
}
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'Chart1'
},
title: {
text: 'Delivery Price example using Chart'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Price'
}
},
series: [ { data: mydata }]
});
});
</script>
<div id="Chart1" style="height: 500px; min-width: 500px"></div>
My JSON string is -
[{"DayDate":"\/Date(1334704500000)\/","Series1":4.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334705400000)\/","Series1":5.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334706300000)\/","Series1":4.51,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334707200000)\/","Series1":6.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334708100000)\/","Series1":4.71,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709000000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0},
{"DayDate":"\/Date(1334709900000)\/","Series1":7.01,"Series2":0,"Series3":0,"Series4":0,"Series5":0}]
Currently I'm trying to output simple line chart and using only DayDate (X-axis) and 'Series1' as Y-axis.
Highstock chart shows just 'x axis' but no line graph or y axis is shown.
Can someone point me what I'm doing wrong? Any help will be appreciated.
Edit:
After setting turboThresold field I can now see the X Axis on my highstock chart. However values from y axis are still missing.
This is how graph looks without any y axis lines. The data seems to be correct
Here's my updated code -
$(function () {
var mydata = [];
chartOjb = new Object();
// See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
$.getJSON('/ReportIntance/DummyCall/2', function (data) {
// Add a null value for the end date
//data = [].concat(data, [[Date.UTC(2013, 9, 14, 19, 59), null, null, null, null]]);
$.each(data, function (index, item) {
chartOjb.name = new Date(parseInt(item.DayDate.replace("/Date(", "").replace(")/", ""), 10));
chartOjb.data = item.Series1;
mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });
//alert(chartOjb.name + "/" + chartOjb.data);
});
// create the chart
$('#container').highcharts('StockChart', {
chart: {
//type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: mydata
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'Historical prices from June 2012'
},
subtitle: {
text: 'Displaying 20K records using Highcharts Stock by using JSON'
},
plotOptions: {
line: {
turboThreshold: 20450
}
},
xAxis: {
type: 'datetime',
title: 'Time',
minRange: 3600 * 1000/15 // one hour
},
yAxis:{
title: {
text: 'Prices',
style: {
color: '#89A54E'
}
},
lineWidth: 1,
opposite: false,
showEmpty: false //hides empty data series
},
series: [{
data: data,
pointStart: Date.UTC(2012, 6, 1), // first of June
pointInterval: 3600 * 1000/15,
dataGrouping: {
enabled: false
}
}]
});
});
});
Thanks to Sebastian, I can now see the graphs. Only issue I had was that I wasn't pointing to correct 'data' Your suggestion to not convert to datetime improved the performance

highchart autoupdate(addpoint) cause corrupted chart view

Im using multiple highchart chart inside my page and i use addpoint function to update the chart.
the problem is after some time the chart will be compressed into less than a half of original chart size.
i captured my screen which could be found here for make the problem clear:
http://www.screenr.com/f3E7
sample chart generation code:
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
//var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'ch_trafficio',
type: 'spline',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
var series1= this.series[1];
}
}
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
plotOptions : {
area : {
lineWidth : 1,
marker : {
enabled : false,
states : {
hover : {
enabled : true,
radius : 5
}
}
},
shadow : false,
states : {
hover : {
lineWidth : 1
}
}
}
},
legend: {
enabled: true
},
exporting: {
enabled: true
},
series: [{
name: 'InBound',
type : "area",
color: '#89A54E',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -119; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
},{
name: 'OutBound',
type : "area",
color: '#AA4643',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -119; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}
]
});
chart update functions:
chart.series[0].addPoint([x,data.oid1], false, true);
chart.series[1].addPoint([x,data.oid2], true, true);
chart1.series[0].addPoint([x,data.oid5], true, true);
chart2.series[0].addPoint([x,data.oid3], false, true);
chart2.series[1].addPoint([x,data.oid4], true, true);
chart3.series[0].addPoint([x,data.oid7], true, true);
thanks in advance
you need to add a shifting parameter for your points to shift over the chart
var series = chart.series[0],
shift = series.data.length > 100; // shift if the series is longer than 100
and to change adding point like below
chart.series[0].addPoint([x,data.oid1], true, shift);
example here

Highstock returns incorrect x value (datetime) after zoom for column chart

After any sort of zoom (mouse drag, range selector, date input) the datetime returned from the point click event is usually incorrect. I've not yet found this problem when using an area chart, have found it using both bar and column chart.
To recreate: run the fiddle, zoom using the mouse across a few of the columns, click a datapoint. The alert will show the datetime returned. Notice it's different from the tooltip (which is correct).Usually fails after first click, even for the same datapoint.
BTW useUTC setting doesn't matter.
Fiddle: http://jsfiddle.net/jrEDT/
Code for completeness:
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data,
type: 'column'
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
Highcharts.setOptions({
global: {
useUTC: false // datetime reflects time on db (ie, local) rather than GMT
}
});
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
exporting: {
enabled: false
},
rangeSelector: {
selected: 4
},
yAxis: {
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}],
offset: 25
},
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: true,
point: {
events: {
click: function() {
var series = this.series.name;
var utc = this.x;
var d = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
alert(d);
}
}
}
}
},
tooltip: {
formatter:function(a,b,c){
var d = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x);
return d;
},
enable:true
},
series: seriesOptions
});
}
});
Thanks!
Have you tried to disable datagrouping http://api.highcharts.com/highstock#plotOptions.series.dataGrouping ?

Resources