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
Related
I'm trying to make the title of my highcharts donut chart responsive - here is my current jsFiddle:
https://jsfiddle.net/klstack3/43Lqzznt/2/
HTML
<div class="wrapper">
<div id="container" style="width:100%;height:100%;"></div>
CSS
.highcharts-title {
font-weight: bold;
Javascript
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
},
title: {
text: "I want this to be responsive",
margin: 10,
align: 'center',
verticalAlign: 'middle',
},
tooltip: {
pointFormat: '{name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
}
},
series: [{
type: 'pie',
data: [{
name: 'Item',
y: 81.52,
sliced: true,
selected: true
}, {
name: 'Item',
y: 2.91,
}, {
name: 'Item',
y: 4.07
}, {
name: 'Item',
y: 2.07
}, {
name: 'Item',
y: 9.44
}],
innerSize: '50%',
}]
});
$(window).resize(function(){
var chart = $('#container').highcharts();
console.log('redraw');
var w = $('#container').closest(".wrapper").width()
// setsize will trigger the graph redraw
chart.setSize(
w,w * (3/4),false
);
});
The chart resizes with the browser but I can't get the title to do the same - it just overlaps the chart. Any help would be much appreciated!
You can treat the title the same way as you treat the whole chart - set its size on window.resize(). I moved all the code responsible for resizing to doResize function so that it can be called right after the chart is rendered initially (there's no window resize event and it needs to be called explicitly):
function doResize() {
var chart = $('#container').highcharts();
var w = $('#container').closest(".wrapper").width()
// setsize will trigger the graph redraw
console.log('redraw');
chart.setSize(
w, w * (3 / 4), false
);
chart.title.update({
style: {
fontSize: Math.round(chart.containerWidth / 30) + "px"
}
});
};
$(window).resize(doResize);
doResize();
Live demo: https://jsfiddle.net/kkulig/jksp88p1/
API reference: https://api.highcharts.com/class-reference/Highcharts.Chart#.title
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 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.
Can the highlighted "green" part be removed?
code:
chart = new Highcharts.StockChart({
chart: {
renderTo: renderTo,
},
title: {
text: 'test - ' + title
},
zoomType: false,
subtitle: {
text: 'some text'
},
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function() {
return (this.value / 1000000) + "mil";
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
credits: {
enabled:false
},
plotOptions: {
series: {
marker : {
enabled : true,
radius : 3
}
}
},
},
series: seriesOptions
});
Documentation is your friend.
Highstock Demo Gallery - Disabled navigator
http://www.highcharts.com/stock/demo/navigator-disabled
Necessary code:
navigator : {
enabled : false
},
Working Example: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/navigator-disabled/
err...
quick and dirty
<div id="highchart">
highchart code here
</div>
<div style="background:white;display:block;position:relative;width:400px;margin-top:-150px;">
the rest of your site/content here
</div>
witht he limited amount of info you've provided this is all I can think of.
I am working with HighCharts to produce a bar chart. My values can range from as minimal as 0 to as high as 100k (example). Therefore, one bar of the graph can be very small and the other can be very long. HighCharts has introduced the feature of "Logarithmic Scaling". The example of which can be seen HERE
My js code is written in this jsfiddle file. I want to display my horizontal axis (x-Axis) logarithmically. I have inserted the key type as shown in the example but the script goes into an infinite loop which has to be stopped.
What is the flaw in the execution or is logarithmic scaling for HighCharts still not mature?
P.S The commented line in jsfiddle is causing the issue
Since the "official" method is still buggy, you can achieve the log scale more manually by manipulating your input data with a base 10 log and masking your output data raising 10 to the output value. See it in action here http://jsfiddle.net/7J6sc/ code below.
function log10(n) {
return Math.log(n)/Math.log(10);
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar',
marginRight: 200,
marginLeft: 10,
},
title: {
text: 'Negative'
},
xAxis: {
categories: [''],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high',
},
labels: {
formatter: function() {
return Math.round(Math.pow(10,this.value));
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -50,
y: 100,
floating: true,
borderWidth: 1,
shadow: true
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + Math.round(Math.pow(10,this.y)) + ' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
return Math.round(Math.pow(10,this.y));
}
}
}
},
credits: {
enabled: false
},
series: [{
"data": [log10(4396)],
"name": "A"},
{
"data": [log10(4940)],
"name": "B"},
{
"data": [log10(4440)],
"name": "C"},
{
"data": [log10(2700)],
"name": "D"},
{
"data": [log10(2400)],
"name": "E"},
{
"data": [log10(6000)],
"name": "F"},
{
"data": [log10(3000)],
"name": "G"},
{
"data": [log10(15000)],
"name": "E"}],
});
It is still experimental according to the Official Documentation, so that might be the case:
"The type of axis. Can be one of "linear" or "datetime". In a datetime axis, the numbers are given in milliseconds, and tick marks are placed on appropriate values like full hours or days.
As of 2.1.6, "logarithmic" is added as an experimental feature, but it is not yet fully implemented. Defaults to "linear".
Try it: "linear", "datetime" with regular intervals, "datetime" with irregular intervals, experimental "logarithmic" axis."
For those of you who are still looking for an answer :
JSFiddle : http://jsfiddle.net/TuKWT/76/
Or SO snippet :
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Negative'
},
xAxis: {
categories: ['A','B','C','D','E','F','G','H'],
title: {
text: null
}
},
yAxis: {
type: 'logarithmic',
//min: 0, <= THIS WILL CAUSE ISSUE
title: {
text: null,
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.x + ':' + this.y + ' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
}
},
credits: {
enabled: false
},
series: [{
"data": [4396,4940,4440,2700,2400,6000,3000,15000],
}],
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>