I am using PhantomJS to save the charts in my server, but the callback function doesn't work.
phantomjs JS/highcharts-convert.js -infile temp/test.js -outfile temp/chart.png -globaloptions temp/test2.js -callback temp/call.js
The content in call.js is:
function() {
console.log('kamehameha');
}
Everything works great, except the callback.
Tested with latest version of exporting server and Highstock. Files:
call.js:
function(chart) {chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({fill : '#FCFFC5',stroke : 'black','stroke-width' : 1}).add();}
test.js:
{xAxis: {categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]}
test2.js:
{ legend: { enabled: false } }
And works fine, output from the console:
Highcharts.options.parsed
Highcharts.cb.parsed
Highcharts.globalOptions.parsed
Highcharts.customCode.parsed
temp/chart.png
Generated image:
EDIT:
Tested with that callback:
function(chart) {console.log("kamehameha"); chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({fill : '#FCFFC5',stroke : 'black','stroke-width' : 1}).add();}
And output:
Highcharts.options.parsed
Highcharts.cb.parsed
Highcharts.globalOptions.parsed
Highcharts.customCode.parsed
kamehameha
temp/chart.png
Related
How can we add content above every series like a html content .for ex - My Content. I am using line chart.
here is an example which i found in api.
jsFiddle: http://jsfiddle.net/ekec5nut/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}, function (chart) { // on complete
chart.renderer.text('Series 1', 90, 150)
.attr({
rotation: 0
})
.css({
color: '#4572A7',
fontSize: '16px'
})
.add();
});
});
but I do not want to give position like this : chart.renderer.text('Series 1', 90, 150) . I want is to have the content above each series while series are getting created.
How about simply using dataLabels for first point? Just like this:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [
{
dataLabels: {
enabled: true,
formatter: function() { return 'My Content'; }
},
y: 29.9
},
71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
I have a Highchart where i am showing a scrollbar. i have defined the
xAxis: {
min:0,
max:6,
For instances where data is less than 6 grids..it shows extra points with null. How to avoid showing those extra points?
In the below example see the extra points are 12,13, 14..I want to remove them.
http://jsfiddle.net/highcharts/fj6d2/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: 0,
max: 14
},
legend: {
verticalAlign: 'top',
y: 100,
align: 'right'
},
scrollbar: {
enabled: true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
You can simply get length of data, and then set proper max, see: http://jsfiddle.net/Fusher/fj6d2/2378/
var data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
len = data.length;
len = len < 6 ? len : 6;
Then in options for Highcharts:
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
min: len
},
series: [{
data: data
}]
I want to export a highchart to a jpeg image and place it into a specific folder.
What is the flow that goes through the highscript.js?
You can export into jpeg ,but it renders on browser as api did not provide location .
API URL :http://api.highcharts.com/highcharts#exporting
and
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}],
navigation: {
buttonOptions: {
enabled: false
}
},
exporting: {
type: 'image/jpeg'
}
});
You can prepare your own server (http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts) and define directory, where exported file should be saved, but you have no ability to have influence on customer / client direction (security aspects).
How to on or off credits with a button click in highcharts?
Can some 1 explain with example
You can enable/disable by show/hide functions, related with SVG object.
http://jsfiddle.net/N6b6H/1/
$('#showhide').toggle(function () {
chart.credits.hide();
},function(){
chart.credits.show();
});
Here i created a jsfiddle in which bydefault the credit enable is false but onclick credit enables becomes true.
Try this:
[http://jsfiddle.net/jvaibhav/N6b6H/]
HTML is Like :
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px">
</div>
<button id="showhide"> Click Me </button>
Script is Like:
$(function () {
$('#showhide').click(function(){
$('#container').highcharts({
chart: {
},
credits: {
enabled: true
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
$('#container').highcharts({
chart: {
},
credits: {
enabled: false
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
I upgraded to HighCharts version 3.0.0 today and am having some issues with animation. The web application I am working on is built for IE 9. I am getting no animation in IE but when running chrome the animation still renders for my application. I can however view highcharts demos in IE 9 on the official site with full animation.
chartVar = document.createElement('div');
chartVar.setAttribute('id', 'container');
chartVar.style.width = '400px';
chartVar.style.height = '200px';
document.getElementById('quad0').appendChild(chartVar);
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});