Related
The tooltip in my Highchart is behaving strangely. It is living its own life. It doesn't show the tooltip of the point on which I hover, but shows the tooltip of any point randomly.
Here is a JSFiddle example: http://jsfiddle.net/AeV7h/9/
$(function () {
var data=[[28,0],[24,3],[16,10]];
var param= { WodTag: "cur_spd", Name: "Current speed", Color: "#C6C6C6", LineStyle: "Solid", SeriesType: "line", LineWidth: 2, TickInterval: null, MinValue: null, MaxValue: null, Decimals: 2 };
$('#container').highcharts({
chart: {
height: 700,
width: 400,
plotBorderWidth: 1,
plotBorderColor: '#E4E4E4',
},
xAxis: {
title: {
useHTML: true,
text: param.Name + "( m/s )",
},
gridLineWidth: 1,
min: param.MinValue,
max: param.MaxValue,
gridLineDashStyle: 'Dot',
tickInterval: param.TickInterval
},
yAxis: {
title: {
text: 'Depth(m)',
},
reversed: true,
tickLength: 50,
gridLineDashStyle: 'Dot'
},
title: {
text: null,
},
legend: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
useHTML: true,
formatter: function () {
return this.y;
}
},
series: [{
name: param.Name,
data: data,
color: param.Color,
dashStyle: param.LineStyle,
lineWidth: param.LineWidth,
type: "line"
}]
});
});
Can anyone help and tell me why it is behaving like this, and how I can fix it?
Your problem is that your data is not sorted by increasing X value. If you read the Series.data documentation it says that (API):
Note data must be sorted by X in order for the tooltip positioning and data grouping to work.
You should always sort your data like this before handing it over to Highcharts. Highcharts doesn't sort any data. Doing it by hand for your example your data should look like this:
var data=[[16,10],[24,3],[28,0]];
As in this JSFiddle demonstration, and everything works as intended.
I am trying to generate Dual axes, line and column charts of highcharts .I have tried stackoverflows sugesstions but i couldn't find proper solution.I have the data formatted properly but yet the chart is not generate shows blank.I want this type of [link] http://jsfiddle.net/sunman/dwyNz/8/ .In spline line I want to show 'bsp values' and in column I want to show facilities_total. So below i show my code for this graph.I also pointed my error in index.php.
Here is my Index.php
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Project faclityv Rating'
},
subtitle: {
text: 'testing'
},
xAxis: [{
categories: []
}],
yAxis: [{ // Primary yAxis
labels: {
// format: '{value} Rs.',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Bsp Cost',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'facility rating',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
//format: '{value} out of 100',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Facility Rating',
type: 'column',
yAxis: 1,
data: [],
tooltip: {
valueSuffix: ' out of 100'
}
}, {
name: 'Bsp Cost',
type: 'spline',
data: [],
tooltip: {
valueSuffix: 'Rs.'
}
}]
});
$.getJSON("combochart.php", function(json) {
options.xAxis.categories = json[0]['data']; /*error here: ReferenceError: options is not defined */
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
Here is my combochart.php
$query1 = mysql_query("SELECT projects_detail.Project_name,superfac_rating.faci_total
FROM projects_detail LEFT OUTER JOIN superfac_rating
ON projects_detail.project_id= superfac_rating.project_id ");
$category = array();
$category['name'] = 'Project';
while($row1 = mysql_fetch_array($query1)) {
$category['data'][] = $row1['Project_name'];
$series1['data'][] = $row1['faci_total'];
}
$query2 = mysql_query("SELECT projects_detail.Project_name,superfac_rating.faci_total
FROM projects_detail LEFT OUTER JOIN superfac_rating
ON projects_detail.project_id= superfac_rating.project_id
LEFT OUTER JOIN cost ON gsuperfac_rating.project_id=cost.project_id ");
$series1 = array();
$series1['name'] = 'Project Name';
$series2 = array();
$series2['name'] = 'BSP VALUES';
while($row2 = mysql_fetch_array($query2)) {
$series1['data'][] = $row2['faci_total'];
$series2['data'][] = $row2['bsp'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series1);
array_push($result,$series2);
print json_encode($result, JSON_NUMERIC_CHECK);
I think i have problem in json code thats why i can't fetch data for graph.i checked in my console no errors.but i debug this code and json result shows me(json o/p writes in jsfiddle) but graph not appear in browser. i am explained in jsfiddle[link] jsfiddle.net/sunman/rDYvt/9 please check this. give me solution where i am wrong.So please help me and resolve my query.
Inside your $.getJSON("combochart.php", function(json) you need to setData like this
theChart.xAxis[0].setCategories(json[0]['data']);
theChart.series[0].setData(json[1]['data'], false);
theChart.series[1].setData(json[2]['data'], true);
Ok, it's working now...
Paste this in a JSFiddle to see it working...
$(document).ready(function() {
var json= '[{"name":"Project","data":["Green View","Grand","Arete","Canary Greens","Terra","Beethovens","Ninex City","South Park","Callidora","Lotus","Coban","NCR Green","Kocoon","Estella","NCR One"]},{"name":"Facilities Rating","data":[45,55,55,55,55,55,55,55,55,55,55,55,55,55,55]},{"name":"BSP VALUES","data":[97500,55745,16400,98700,38600,12090,94700,11400,12450,89500,86725,88335,54200,18200,30400]}]'
var jsobj = JSON.parse(json)
var firstSeriesData = [];
var secondSeriesData = [];
jsobj[1].data.forEach(function(seriesOneData){
firstSeriesData.push(seriesOneData);
})
jsobj[2].data.forEach(function(seriesTwoData){
secondSeriesData.push(seriesTwoData);
})
$('#container').highcharts({
chart: {
zoomType: 'xy',
type: 'column',
marginRight: 130,
marginBottom: 50
},
title: {
text: 'Top 12 Projects Facilities Rating and BSP Costs ',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: jsobj[0].data
},
yAxis: {
min: 0,
title: {
text: 'Facilities Rating'
},
plotLines: [{
value: 0,
width:1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
plotOptions:{
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color:'white'
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
borderWidth: 0,
x: -10,
y:110
},
series: [ {
name:'Facilities Rating',
data:firstSeriesData,
id:'dataseries'
},{
name:'BSP',
type:'spline',
data:secondSeriesData
}]
})
});
A couple comments.. your JSON had an unidentified character in it. This is what I got from pasting your JSON string.
Notice that red dot in the middle of the JSON.
Also, make sure you load highcharts modules in this order...
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
And lastly, you have two series in there, but one of them has values below 100 and the other one has values over 100k. So the first series is not gonna show as it almost 0 compared to the second. You'll have to do something about that.
In your function $.getJSON("combochart.php", function(json) you need to explicitly define what options you want. You are also not acutally setting any data. I am assuming that json[0]['data'] is a list of categories like ['Cat1', 'Cat2',...] and that json[1] and json[2] contain the data like [val1, val2, ...]. If so you need to do something like this:
$.getJSON("combochart.php", function(json) {
var theChart = $('#container').highcharts();
theChart.xAxis[0].setCategories(json[0]['data']); /*error here: ReferenceError: options is not defined */
theChart.series[0].setData(json[1]);
theChart.series[1].setData(json[2]);
//chart = new Highcharts.Chart(options);
});
});
I am trying to parse the data from the CSV file and I went through the instructions in http://www.highcharts.com/docs . However, the code provided use the parsed data directly to create a new chart and I cannot understand how to apply it to my current chart. I am trying to take the strings from CSV file and use them as arrays in JavaScript to substitute the numerical arrays in the code below.
This is the graph that needs to be used:
http://jsfiddle.net/strawberry/Cyxv6/
Data that needs to be taken from the file is the following:
categories: ['2010', '2011', '2012', '2013', '2014']
name: 'avocado'
...
data: [1600,1540,1350,1450,1600],
name: 'apples',
...
data: [39000, 40000, 40500, 41000, 42000],
name: 'oranges',
...
data: [8000, 5000, 4000, 4500, 3000],
name: 'bananas',
...
data: [4000, 6000, 4500, 5000, 4600],
The data from CSV file:
year avocado apples oranges bananas
y2010 1600 39000 8000 4000
y2011 1540 40000 5000 6000
y2012 1350 40500 4000 4500
y2013 1450 41000 4500 5000
y2014 1600 42000 3000 4600
The code:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'apples and oranges and bananas and avocado'
},
// subtitle: {
// text: 'Source: WorldClimate.com'
// },
xAxis: [{
categories: ['2010', '2011', '2012', '2013', '2014']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#89A54E'
}
},
title: {
text: 'other',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'fruits',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value}',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
align: 'center',
layout: 'horizontal',
x: 0,
title: {
text: '<span style="font-size: 11px; color: #666; font-weight: normal" >To single out the different datasets, please click on the respective names below:</span>',
style: {
fontStyle: 'italic'
}
}
},
series: [{
name: 'avocado',
color: '#d6bfe3',
type: 'column',
yAxis: 1,
data: [1600,1540,1350,1450,1600],
tooltip: {
valueSuffix: ' '
}
}, {
name: 'apples',
marker: {
enabled: false
},
color: '#4da90c',
lineWidth: 3,
type: 'spline',
dataLabels: {
enabled: 'True'
},
data: [39000, 40000, 40500, 41000, 42000],
tooltip: {
valueSuffix: ''
}
},
{
name: 'oranges',
marker: {
enabled: false
},
color: '#f8a632',
lineWidth: 3,
type: 'spline',
data: [8000, 5000, 4000, 4500, 3000],
tooltip: {
valueSuffix: ''
}
},
{
name: 'bananas',
marker: {
enabled: false
},
color: '#939b9d',
style: "Dash",
lineWidth: 3,
type: 'spline',
dashStyle: 'longdash',
data: [4000, 6000, 4500, 5000, 4600],
tooltip: {
valueSuffix: ''
}
}
]
});
})
At the beginning you need to familiar how our parse works with our data. Then adapt parser to your data, to achive structure (like you have hardcoded). You need to also convert 'y2003' to year, by skipping first letter. (i.e by indexOf or match on string).
I have a Highcharts chart which gets it's data from a JSON request.
function slowips(target){
var options = {
chart: {
renderTo: target,
type: 'spline',
borderColor: '#0072C6',
borderWidth: 3
},
title: {
text: 'Responsetime'
},
subtitle: {
text: 'Nr.1 is slowest'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
yAxis: {
title: {
text: 'Milliseconds'
},
min: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%Y'
},
labels: {
enabled: true,
},
minorTickLength: 0,
tickLength: 0,
},
plotOptions: {
spline: {
animation: false,
enableMouseTracking: false,
marker: {
enabled: false
}
}
},
series: [{}]
};
$.getJSON('graphs/test.php', function(data) {
options.series = data;
var chart = new Highcharts.Chart(options);
});
}
slowips();
This is an example JSON input:
[ { "name":"sddf", "data": [ ["2013-02-01 00:01:00", 2 ], ["2013-02-02 00:02:00", 2.55 ] ] } ]
Also tried:
[ { "name":"sddf", "data": [ [Date.UTC(12, 3, 09), 2 ], [Date.UTC(12, 3, 10), 2.55 ] ] } ]
The first JSON example renders a chart, but with incorrect X axis data. The second JSON does not render the chart.
Please help out!
You need to use timestamps, so when you load first JSON, then you need to parse it by Date.UTC() / Data.parse(), but functions cannot be places in json inside (as you have in second example).
I am attempting to create an area chart based on a timeline and everything works until I add a series marker. I have tried a few different patterns but can't get the chart to render with a marker.
Attempt 1: replace [x,y] item with [{x,y,marker}] object
data: [[1384219800000,2],
[{x:1384269600000,y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
Attempt 2: replace [x,y] item with [x, {y,marker}] object
data: [[1384219800000,2],
[1384269600000, {y:7,marker:{symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"}}],
[1384279900000,1]]
This is the working area chart without the marker. This renders fine until I try to add the marker notation
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
style: {
display: 'none'
}
},
subtitle: {
style: {
display: 'none'
}
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: ''
},
min: 0,
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
legend: {
borderWidth: 0,
enabled: true,
align: 'right',
verticalAlign: 'top',
x: -5,
y: -15,
floating: true
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 0,
lineColor: '#666666',
enabled: false
}
}
},
series:
[{
name: 'Items',
color: '#3399CC',
data: [[1384219800000,2],[1384269600000,7],[1384279900000,1]]
}],
navigation:
{
menuItemStyle: {
fontSize: '10px'
}
},
navigator: {
enabled: true
},
scrollbar: {
enabled: false
},
rangeSelector: {
enabled: false
}
});
});
Your first syntax is close to correct, except you need to drop the [] around the {} and enable the marker for that specific point:
data: [
[1384219800000,2],
{
x:1384269600000,
y:7,
marker:{
enabled: true,
symbol:"url(http://www.highcharts.com/demo/gfx/sun.png)"
}
},
[1384279900000,1]
]
Fiddle here.