I'm working on a line chart using highcharts.js on localhost.
I have tried implementing more than 20,000 records and it works smoothly
like a charm.
But I have a json file which contains 11,000 records, but due to some
unknown reason it does not show me the graph line when I run it.
If I place a check that shows me less than three thousand records then
I see the line.
Just copy paste the code in an html file and it should work.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body style="background:#212224;">
<div id="container" style="max-width: 1666px; margin: 0 auto"></div>
<button id="button">Destroy the chart</button>
<button id="create">create the chart</button>
<script type="text/javascript">
$('#button').click(function () {
$('#container').highcharts().destroy();
});
$('#create').click(function (){
$.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
console.log("data size is : ");
console.log(data.data.length);
var data3 = [];
//you can comment this loop and uncomment the loop below for working code.
$.each(data.data,function(i,d){
data3.push([new Date(d.timestamp).getTime(),d.value])
});
//below is commented code which works for 3000 records.
//$.each(data.data,function(i,d){
//if(i<3000){
// data3.push([new Date(d.timestamp).getTime(),d.value])
// }
//});
console.log(data3);
$('#container').highcharts({
chart: {
backgroundColor: '#000000',
},
title: {
text: 'Test Graph',
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Time Stamp'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
yAxis: {
title: {
text: 'Value'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
legend: {
enabled: true
},
exporting: false,
plotOptions: {
line: {
lineColor: 'red',
fillOpacity: 1,
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
},
threshold: null,
marker: {
fillColor: '#e57255'
}
},
},
series: [{
type: 'line',
name: 'test',
data: data3
}]
});
});
});
</script>
</body>
</html>
Make sure all your data is correctly formatted, currently there is data that is not correctly formatted. You can perform a quick check using something like this:
$.each(data.data,function(i,d){
// Return if value is not a number
if (isNaN(parseInt(d.value))) return;
data3.push([new Date(d.timestamp).getTime(),d.value])
});
Updated Fiddle
Related
I'm using highcharts inside of an angular directive and i need to be able to click on the entire div but the chart inside the div isn't doing anything when i click on it.
I've tried putting a clear div with absolute positioning over the highcharts div but still nothing happens when I click inside the chart area.
I'd prefer not to pass the click functionality to highcharts as it would add extra dependencies. I feel like there should be some sort of highcharts property for this but I'm not able to find it.
Anyways here is the code..
Directive Template (note the commented out clear div right above the chart area):
<div class="key-metric" ng-click="makeMetricInFocus($event)">
<!--<div class="overlay" ng-click="makeMetricInFocus()"></div>-->
<div id="{{metricData.metricName}}" class="key-metric-chart">
</div>
The make metricInFocus function is located in the directive, it just updates the model.
Here is the code for the highChart (it's called through the directive):
headGraphService.sparkLine = function (metricInfo, chartContainer) {
var container = $('#' + chartContainer);
if (container.highcharts()) {
container.highcharts().destroy();
}
$timeout(function () {
new Highcharts.Chart({
chart: {
renderTo: chartContainer,
margin: 0,
backgroundColor: 'transparent',
},
title: {
text: ''
},
xAxis: {
labels: {
enabled: false
}
},
yAxis: {
labels: {
enabled: false
},
// maxPadding: 0,
// minPadding: 0,
gridLineWidth: 0,
endOnTick: false
},
tooltip: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: false,
lineWidth: 1,
shadow: false
},
marker: {
enabled: false,
radius: 0
},
line: {
marker: {
enabled: false
}
}
},
series: [{
color: metricInfo.chartingColors.summaryLine,
type: 'line',
data: metricInfo.data
}],
exporting: {
enabled: false
}
})
}, 500)
Below is the entire document I am using to try to generate a highcharts sparkline:
<script>
var sparkOptions = {
title: {
text: ''
},
credits: false,
chart: {
renderTo: 'container',
width: 120,
height: 20,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
skipClone: true
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
legend: {
enabled: false
},
tooltip: {
enabled: false
}
};
$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();
t.addSeries({
data: [1, 2, 3, 4, 5]
});
</script>
<div id="container" style="height: 40px; width: 200px;">
<div id="the_chart"></div>
</div>
I've been searching for hours to try to get this to work. Can anyone point out what I am doing incorrectly? I have been using this link: http://jsfiddle.net/cainmodyo/VhxDA/ along with the highcharts website: http://www.highcharts.com/demo/sparkline/. Thanks in advance for any help you can give me!
In Highcharts you have 2 ways of defining WHERE to put the chart:
Using the renderTo property of chart
calling the highcharts() function on the JQuery object of the container (ex: $('#container').highcharts({options})
In your code you are using both methods since you defined renderTo: 'container' in the sparkOptions and then called the highcharts method over another JQuery object $('#the_chart').highcharts(sparkOptions);
To make it work you should change your last lines:
$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();
to:
var t = new Highcharts.Chart(sparkOptions);
and the remove the extra container you have in the html, the one with id the_chart.
Also you should wrap your code into '$(function () { << HERE YOUR SCRIPT >>});' to make sure it gets executed after Highcharts is loaded.
Fiddle
i am making a web page where i am having many graphs like the ones here
http://vz.comxa.com/v2/
I am using highcharts JavaScript charting library. To make one chart you write the code like shown here http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
and the html
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Since my charts are placed in modals,does it mean i must have the javascript for each chart in the page header. Due to the sheer number of charts involved,i reckon that's be a lot of JavaScript. What technique can i use to reduce the lines of javascript i will write?.
When building multiple charts you can reuse same options. One way could be to use Highcharts.merge function to add new options to the common ones.
Demo with Highcharts.merge in use - 2 charts: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
More complex option could be to create a custom series type with changed default options and optionally more features if required.
Demo - Sprakline: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/sparkline/
I m trying to reproduce HighChart graph .it is working fine on JsFiddle ..but on My local web app it is throwing Error :
JavaScript runtime error: Object expected
Error comes on this code segment in file highcharts.src.js
/ Set up auto resize
if (optionsChart.reflow !== false) {
addEvent(chart, 'load', function () {
chart.initReflow();
});
}
this I my JSFiddle
http://jsfiddle.net/u9xES/550/
this is my WebPage
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(function () {
var highOptions = {
chart: {
type: 'line',
renderTo: 'container2',
zoomType: 'x',
marginTop: 100
},
title: {
text: 'Score'
},
subtitle: {
text: ' '
},
xAxis: {
title: {
text: 'XXX'
},
categories: [],
labels: {
rotation: 45,
step: 1,
y: 30
}
},
yAxis: [{ // left y axis
title: {
text: 'XXX'
},
min: 0,
max: 9,
plotLines: [{
value: 7.5,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'XXX'
}
}]
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 1);
}
}
}
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
series: []
};
highOptions.xAxis.categories = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8];
highOptions.subtitle.text = "XXX:";
chart = new Highcharts.Chart(highOptions);
var aName = "Fin";
newLP = [0.1, 5.52, 0.2, 6.16, 0.3, 6.34, 0.4, 6.69, 0.5, 6.36, 0.6, 7.44, 0.7,
7.44, 0.8, 7.44];
chart.addSeries({
name: aName,
data: newLP
}, false);
chart.redraw();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container2">
</div>
</form>
</body>
</html>
I am not getting any idea ..why it is running fine on JSFiddle .But not on my Web App ..there is no other plugin install ..please suggest
The sequence of the scripts are important in this case, the correct sequence FOR CHROME should be:
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Other browsers may have different methods in determining which js file to load first. So you have to test with other browsers if they all work fine.
Just googling around a bit for that error, and it seems that it always has to deal with how
<script type="text/javascript">
is defined.
Have you tried changing it to:
<script type="text/javascript" language="javascript">
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