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.
Related
I am trying to find out why my chart is not showing up in my WPF WebBrowser.
When I load my html file, I have the following error:
I think that IE might be blocking Highchart(Javascript from external Source) in the WPF WebBrowser because when I try to load it with IE my page got restricted from running script or ActiveX Control :
I know how to allow IE to run script or ActiveX Control but I don't know how to allow it in my WPF WebBrowser.
I have tried with a Mark Of The Web but I'm not sure if i am using it properly ?
<!-- saved from url=(0016)http://localhost -->
I have also tried some desperate method like adding my program in :
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION\MyProgram.exe and MyProgram.vshost.exe with Value 0x00002af9
I would really appreciate some help.
I don't have find any answer that fix this problem so far.
My html file :
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
type: 'spline',
inverted: true
},
title: {
text: 'Atmosphere Temperature by Altitude'
},
subtitle: {
text: 'According to the Standard Atmosphere Model'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
labels: {
formatter: function () {
return this.value + 'km';
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
UPDATE
Request : alert(navigator.userAgent);
Result :
Signification
SOLUTION
Without any change in my PC Security Configuration i fixed this problem by adding this in the header of my html file :
<meta http-equiv="x-ua-compatible" content="IE=11">
See Alexander Ryan Baggett Answer for more information or this link.
Okay, this works fine for me.
I added <meta http-equiv="x-ua-compatible" content="IE=11">. I also loaded the HTML file locally in visual studio by adding it to the project and setting it to copy always. I did not end up having to make any registry adjustments on my machine either.
C# file
using System;
using System.IO;
using System.Windows;
namespace Stackoverflow_question
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
string curDir = Directory.GetCurrentDirectory();
webbrowser1.Navigate(new Uri(String.Format("file:///{0}/test.html", curDir))) ;
}
}
}
HTML file
<!DOCTYPE HTML>
<!-- saved from url=(0016)http://localhost -->
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<style type="text/css">
</style>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script type="text/javascript">
Highcharts.chart("container", {
chart: {
type: "spline",
inverted: true
},
title: {
text: "Atmosphere Temperature by Altitude"
},
subtitle: {
text: "According to the Standard Atmosphere Model"
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: "Altitude"
},
labels: {
formatter: function () {
return this.value + "km";
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: "Temperature"
},
labels: {
formatter: function () {
return this.value + "°";
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: "<b>{series.name}</b><br/>",
pointFormat: "{point.x} km: {point.y}°C"
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: "Temperature",
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
</script>
</body>
</html>
It gives a nice result too.
If this code doesn't resolve your issue. I would suspect something needs to be changed about your Local Intranet Security Zone settings.
I have one html page where there are two divs. In each div I am loading different jsp files(one.jsp and two.jsp).
home.html:
<script src="resources/js/jquery.js"></script>
<script type="text/javascript" src="resources/js/highcharts.js"></script>
<script type="text/javascript" src="resources/js/exporting.js"></script>
<script type="text/javascript" src="resources/js/export-csv.js"></script>
<script>
function loadGraphs()
{
$('#plotContainer1').load('one.jsp');
$('#plotContainer2').load('two.jsp');
}
</script>
where plotContainer1 and plotContainer2 are two divs. So that I want to load two graphs at a time.
one.jsp:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<div id="container1" style="min-width: 350px; height: 350px; margin: 0 auto"></div>
<script type="text/javascript">
var seriesArray;
var chart;
callAjax();
var graphTitle = "";
var chart;
function drawgraph1() {
Highcharts.setOptions({
colors: ['#54CBE5', '#57B442']
});
chart = $('#container1').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: graphTitle
},
xAxis: {
tickInterval: 30,
type: 'datetime',
categories: xAxisCategories
},
yAxis: {
min : 0,
title: {
text: ''
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series : seriesArray
});
};
function callAjax() {
$("#container1").empty();
seriesArray = [{
name: 'line1',
data: []
}, {
name: 'line2',
data: []
}];
xAxisCategories = [];
var params = {"param1" : value};
$.getJSON("graph1datafetcher",params, function(data) {
$.each(data, function(key, val) {
var xaxisPoints=data[key];
xAxisCategories.push(Date.parse(key));
for(var i in xaxisPoints) {
seriesArray[i].data.push(xaxisPoints[i]);
}
});
console.log(" JSON: " + JSON.stringify(data));
drawgraph1();
});
}
</script>
</body>
</html>
two.jsp almost contains the same code. Now first two.jsp loads as it contains less data compared to one.jsp. When one.jsp loads in and shows up in div, the one.jsp graph shows two.jsp data and its own data too. I am logging the data in the console, the data that is coming is fine. So, the problem is somewhere the highchart persists the first data. I have been struggling with this for past 7 hours. Can someone please answer how to resolve this?
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.
i have this code that works in JSFiddle: http://jsfiddle.net/B2jan/
But, when i put the SAME code to my website it doesn't work. Here i put the simple code:
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="/datepicker/js/jquery-1.3.2.min.js"></script>
<script>
$(function() {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series: [{
name: 'AAPL Stock Price',
data: [
[1364463576000, 46906],
[1364463578000, 50379],
[1364463580000, 33733],
[1364463582000, 5612],
[1364463981000, 14213],
[1364464007000, 11208],
[1364490137000, 38047],
[1364665254000, 14964],
[1364665256000, 11443],
[1364665257000, 9005],
[1364665259000, 5283],
[1364665260000, 1731]
],
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}]
});
</script>
Is a copy-paste of jsfiddle, i don't undertand why don't work.
Thanks!
EDITED:
I put the files on a host of internet and a localhost using Xammp, but is the same result.
So, it looks like you have made a change to the code and it is not a direct copy and paste. Did you change anything?
EDIT: Ahhhhhh, I spotted it, you were not copying the final closing tags of the Chart! :)
});
Look at the end of your code.
This works for me.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series: [{
name: 'AAPL Stock Price',
data: [
[1364463576000, 46906],
[1364463578000, 50379],
[1364463580000, 33733],
[1364463582000, 5612],
[1364463981000, 14213],
[1364464007000, 11208],
[1364490137000, 38047],
[1364665254000, 14964],
[1364665256000, 11443],
[1364665257000, 9005],
[1364665259000, 5283],
[1364665260000, 1731]
],
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>
</body>
</html>
Add jQuery Library that JSFiddle is using.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
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