I have a High Charts Line chart feeding from a MySQL database via php and javascript. I have the chart displaying correctly, both lines are appearing as they should. The only issue is the tooltip(I believe it's called) when I have it set as shared: true, it will share the data points, BUT it won't display any tooltip, and removes the crosshair even though the crosshairs is selected to true, but when I remove shared, and set to 'false' it will do the correct behavior, selecting them individually and displaying the tooltip, name with the value. I have changed it, and at a loss.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacked area chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container'
},
legend: {
enabled: true,
backgroundColor: '#FFFFFF',
layout: 'vertical',
align: 'right',
floating: true,
reversed: true,
verticalAlign: 'top',
y: -20.0,
x: -20.0
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'DPMO'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
crosshairs: true,
animation: true,
shared: Boolean,
formatter: function() {
return '<b>'+ this.series.name +'</b><br>'+
this.x +': '+ this.y;
}
},
title: {
text: '12 Week IRDR DPMO',
x: -20 //center
},
subtitle: {
text: 'http://xxxxxxx.com/',
x: -20
},
plotOptions: {
line: {
allowPointSelect: false,
cursor: '',
events: {
legendItemClick: ' '
},
showInLegend: true
}
},
series: [{
color: Highcharts.getOptions().colors[2]}
]
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Here is what it is doing:
Here is what I would like the behaviour to be, but more multiple data points.
Desired Behaviour:
When your tooltip is shared you can't access this.series in your formatter function, you need to reference each series separately with this.points[i].series, and similarly for your y values, e.g.
tooltip: {
crosshairs: true,
animation: true,
shared: true,
formatter: function() {
return this.x + '<br>'
+ this.points[0].series.name + ': ' + this.points[0].y + '<br>'
+ this.points[1].series.name + ': ' + this.points[1].y;
}
}
See http://jsfiddle.net/5EgLN/ for a working demo.
Related
I have tried to create a column chart using highcharts in nodejs and data is getting fetched from mongodb.
I am getting stuck in series option Please help me to get out of it.
The below is my code for ejs file -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie Highcharts Example</title>
<!-- Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="/javascripts/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/highcharts.js"></script>
<!-- Optional: the exporting module -->
<script type="text/javascript" src="/javascripts/exporting.js"></script>
<!-- Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
chartdata= <%-JSON.stringify(data)%>
var category = [];
var dname=[];
var kdata=[];
for(j=0;j<chartdata.length;j++){
category[j]=[chartdata[j].catname]
// name[j]=[chartdata[j].seriesname]
// data[j]=[chartdata[j].wdata,chartdata[j].hdata,chartdata[j].cdata]
}
for(k=0;k<chartdata.length;k++){
dname[k]=[chartdata[k].seriesname];
}
for(i=0;i<chartdata.length;i++){
kdata[i] = [chartdata[i].wordval,chartdata[i].codeval,chartdata[i].highval];
}
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'Monthly Average data'
},
xAxis: {
categories: category
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
legend: {
layout: 'vertical',
backgroundColor: '#FFFFFF',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 40,
floating: true,
shadow: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y ;
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth: 0
}
},
series: [{
name: dname[0],
data: kdata[0]
},
{
name: dname[1],
data: kdata[1]
},
{
name: dname[2],
data: kdata[2]
}
]
});
});
</script>
</head>
<body>
<!-- Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
#NishithChaturvedi - When I am doing this way its working so only the problem with loop I know I am asking silly question but didn't able to rectify.
Thank you for your time I have fixed the problem I was facing in series value
I just created another array var and store the name and data to it and pass that array in series.
I would like to be able to toggle between my groupings, (time/priority). I have a stacked column chart. there is a option to do this example. But it appears that it may only work with data already in a table, and I am bringing in my data as JSON.
my javascript is:
var chart_ops_support_times = new Highcharts.Chart({
chart: {
renderTo: 'chart_ops_support_times',
type: 'column'
},
title: {
text: '',
align: 'left'
},
subtitle: {
text: ' '
},
xAxis: {
categories: [
'one hour','2 hours','4 hours',
'8 hours','one day','2 days',
'one week','> one week'
]
},
yAxis: {
min: 0,
title: {
text: 'counts'
}
},
legend: {
align: 'left',
verticalAlign: 'top',
floating: true,
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
symbolHeight: 10,
symbolWidth: 10
},
tooltip: {
formatter: function () {
return "<b>" + this.x + "</b><br/>" +
this.series.name + ': ' + this.y + "<br/>" +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: data
});
Data module won't work with JSON.
The Data module provides options for loading data from external sources, like CSV files, HTML tables or Google Spreadsheets, in a convenient way, using a declarative options set.
(http://www.highcharts.com/docs/working-with-data/data-module)
Instead of using data module for this, you could parse your data from JSON to be used one way or another.
Other option is to create hidden HTML table with data from JSON and later use Highcharts with data module and use table.
I need to create a bargraph on my webpage using Highcharts. I am using the following code but nothing is displayed. I am new to scripting webpages so I am not sure what is wrong.
<div id="container1" style="width:100%; height:400px;"></div>
function create_graph(graph) {
chart = new Highcharts.Chart ({
chart: {
height: 600,
width: 1200,
renderTo: container1,
type: 'column'
//reflow: false
},
title: {
text: graph["graphTitle"]
},
xAxis: {
categories: graph["xAxisLabels"]
},
yAxis: {
min: 0,
title: {
text: graph["yaxisTitle"]
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: generateLineData(graph)
});
}
graph = {"graphTitle": "Title" ,"xAxisLabels" : xAxisLabels, "xAxisTitle" : "Properties", "yAxisTitle" : "Average percentile", "yAxisValues" : array1}
You must have the javascript vars xAxisLabels , array1 initialized before creating object graph. Then, of course, following the logic of your code, you should have a call to create_graph(graph);. Finally, your generateLineData() function should look like the following:
function generateLineData(g) {
return [{ data: g["yAxisValues"] }];
}
if all these premises are fulfilled, then your graph should be displayed. You can verify it at this jsfiddle demo: http://jsfiddle.net/tgnu5941/2/
I am trying to play with Highcharts.js and a misodatest (www.misoproject.com/dataset). All I've done is added the example script given at http://misoproject.com/dataset/examples/highstockandcsv.html.
It wouldn't run, so I edited it to what I thought should happen, I put somethings of the example into a function (). Now, I am getting no errors at all, which would be great. But I am getting no information in my page at all and I don't know why, the graph is just not rendering at all.
Here is my code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<br>
<div id="test" style="max-width: 800px; height: 300px; margin: 0 auto"></div> <!-- Container for Highcharts map. -->
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="json2.js"></script>
<script src="lodash.js"></script>
<script src="moment.js"></script>
<script src="underscore.deferred.js"></script>
<script src="underscore.math.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="miso.ds.0.3.0.js"></script>
<script>
function chart() {
var ds = new Miso.Dataset({
url : "crudeoil.csv",
delimiter : ",",
columns : [{ name : "Year", type : "time", format : "YYYY" }]
});
ds.fetch({
success : function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'test',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'World Crude Oil Barrel Production (1,000) per unit',
x: -20 //center
},
subtitle: {
text: 'Src: http://www.infochimps.com/datasets/world-crude-oil-production-1980-to-2004',
x: -20
},
xAxis: {
categories: _.map(this.column("Year").data, function(year) {
return year.format("YY");
})
},
yAxis: {
title: {
text: this.columnNames()[1]
},
plotLines: [{
value: 0,
width: 10000,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'World Production',
data: this.column("Crude oil production (1000 barrels per day)").data
}]
});
}
});
}
</script>
</html>
I know I've probably just failed to grasp something basic, as a beginner JS dev I'm learning a lot through making a lot of mistakes. Any help would be most appreciated!
It seems I have fixed it.
I needed to add $(document).ready( to my function encompassing all of the script.
So:
$(document).ready(function() {
var ds = new Miso.Dataset({
url : "crudeoil.csv",
delimiter : ",",
columns : [{ name : "Year", type : "time", format : "YYYY" }]
});
ds.fetch({
success : function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'test',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text : 'World Crude Oil Barrel Production (1,000) per unit',
x: -20 //center
},
subtitle: {
text: 'Src: http://www.infochimps.com/datasets/world-crude-oil-production-1980-to-2004',
x: -20
},
xAxis: {
categories: _.map(this.column("Year").data, function(year) {
return year.format("YY");
})
},
yAxis: {
title: {
text: this.columnNames()[1]
},
plotLines: [{
value: 0,
width: 10000,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'World Production',
data: this.column("Crude oil production (1000 barrels per day)").data
}]
});
}
});
});
In case anyone encounters the same problem, I hope this helps!
Actually the output is calculated and kept in the js console. you are not telling to show it in the html level.
To solve this, pass th output from js console to html output.
In chrome, go to dev tools(F12) and go to console. There you can see the desired output for the code you given in the question. So the output is showing, just take it out to the html front. For this you can use the method from this answer:Javascript: console.log to html
When I create a stacking bar chart, the rightmost 'box' doesn't have the border drawn on the right hand side.
Is there an option or something that I can set in Highcharts to force the white border line to be drawn around the 75% box in the image seen below?
Here is a link to the jsfiddle I used for testing:
http://jsfiddle.net/zKgsF/
Please note: Setting the borderWidth property to higher than 1 works in displaying, but the rightmost border is much thinner than the others. See the image below.
Here is the javascript for the chart:
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'rgba(0,0,0,.3)',
margin: [15,6,15,15],
},
xAxis: {
categories: ['']
},
credits: {
enabled: false
},
yAxis: {
gridLineColor: "#FF0000",
labels:
{
align: 'right',
formatter: function()
{
return this.value + "%";
}
},
},
tooltip: {
formatter: function()
{
return "<b>" + this.series.name + '</b>: ' + this.y + ' (' + Math.round(this.percentage,1) + "%)";
}
},
plotOptions: {
bar: {
animation: false,
stacking: 'percent',
borderWidth: '1',
dataLabels: {
enabled: true,
color: 'white',
formatter: function() {
if (this.percentage < 10)
{
return ""
}
else
{
return Math.round(this.percentage,1) + "%";
}
},
style: {
fontSize: '18px'
}
}
}
},
series: [{
data: [30]
},{
data: [10]
}]
});
});
EDIT:
Looks like it's not related to the bar chart being "stackable". It might just be related to the fact that the chart goes to the max 'y' value axis... as seen here in another example: http://jsfiddle.net/zKgsF/1/
As suggested by Cubbuk, you can tweak it with by adding the max value of yAxis.
In addition, you can specify a endOnTick property too.
max: 100.1,
endOnTick: false
For API navigate here and for here is an example.