Highcharts exporting background image with chart? - javascript

Here is my HighCharts chart code:
chart = new Highcharts.Chart({
chart: {
type: 'bubble',
renderTo: 'graph',
backgroundColor: 'transparent',
events: {
load: function() {
this.renderer.image(backgroundImageURL, 230, 55, 720, 720).add(); // add image(url, x, y, w, h)
}
},
height: 788
},
plotOptions: {
bubble: {
color: 'white',
marker: {
fillColor: 'transparent'
},
// minSize: 100,
// maxSize: 700,
// zMin: 0,
// zMax: 100
},
series: {
cursor: 'pointer',
point: {
events: {
mouseOver: function(event) {
$('.rankings-column').find('span').removeClass('selected');
if (!this.selected) {
$('span#' + this.id).addClass('selected');
}
var donorrank = $('span#' + this.id).attr('id');
$report.html(donorrank + '. ' + this.name + ' <span>' + this.score + '%</span>');
$report.addClass('active');
},
mouseOut: function(event) {
$('.rankings-column span').each(function() {
$(this).removeClass('selected');
});
$report.removeClass('active');
$report.html('Donor Scoring');
},
click: function(event) {
if (!this.selected) {
window.open(this.url, '_self');
}
},
}
}
}
},
title: {
text: ''
},
credits: {
enabled: false
},
tooltip: {
enabled: false
},
yAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
title: {
text: ''
},
min: 0
,max: 100
},
xAxis: {
gridLineColor: 'transparent',
lineColor: 'transparent',
labels: {
enabled: false
},
offset: 0,
margin: 0
},
legend: {
enabled: false
},
series: [{
data: dataForChart
}]
});
backgroundImageURL is a JS var being passed through from the PHP page on which the chart displays.
This is in Worpress. Here is the PHP for that:
$styleSheetURI = get_stylesheet_directory_uri();
$backgroundImageURL = $styleSheetURI.'/img/ATI-graphs-main.png';
Here is how I turn it into a JS var:
<script type="text/javascript">
jQuery(document).ready(function($){
backgroundImageURL = <?php print(json_encode($backgroundImageURL)); ?>;
});
</script>
Here is the php echo:
http://www.thewebsite.org/wp-content/themes/ati/img/ATI-graphs-main.png
It alerts exactly the same from JS
The export works, but the image is not included.
Any ideas?
Thanks
Jacques

Related

Highchart: How could I set animation duration in case of adding data points to bar/column chart?

Here is the code in concern: http://jsfiddle.net/e0qxfLtt/14/
$(function() {
var chartData = [50, 30, 4, 70, -10, -20, 20, 30];
var index = 1;
var chart1, chart2;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
chart1.series[0].remove();
chart1.addSeries({data: [chartData[index - 1]]});
setTimeout(function(){chart1.series[0].setData([]);}, 1000);
setTimeout(function(){
chart2.series[0].addPoint([index, chartData[index - 1]]);;
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 80,
categories: [''],
min:0,
max:0
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: [],
pointWidth: 28
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:-100,
max:100
},
plotOptions: {
series: {
animation: {
duration: 1000
}
}
},
credits: {
enabled: false
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + '%';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
pointPlacement: 'on',
data: []
}]
});
});
The bar charts are not animating at all. (I will do something about the color.)
I tried addSeries. However, I could only use it for the chart on the left, as for the chart on the right, only the last drawn bar should be newly drawn/animated.

Highchart: why can I not set the duration in this case?

Relevant code is here: http://jsfiddle.net/e0qxfLtt/5/
$(function drawCharts() {
var chartData = [100,120,120,140,110,110];
var index = 1;
$('#b').click(function(){
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index < chartData.length){
var x = index, // current time
y = chartData[index];
$('#container').highcharts().series[0].setData([chartData[index - 1], chartData[index]]);
setTimeout(function(){$('#container').highcharts().series[0].setData([]);}, 1000);
setTimeout(function(){
if(index === 1){
$('#container1').highcharts().series[0].addPoint([0,chartData[0]]);
}
$('#container1').highcharts().series[0].addPoint([x,y]);
index++;
}, 1000);
}
setTimeout(function(){buttonB.disabled = false;}, 3000);
})
$(document).ready(function () {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 40,
min:0,
max:10
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 1000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
series = this.series[0];
},
}
},
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
categories: ['a', 'b'],
min: 0,
max: 1
},
yAxis: {
title: {
text: ''
},
min:0,
max:200
},
plotOptions: {
line: {
marker: {
enabled: false
}
},
series: {
animation: {
duration: 2000
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
});
});
I would like the chart on the left to animate over a duration of 2 seconds, and used this code for the purpose:
plotOptions: {
series: {
animation: {
duration: 2000
}
}
}
However, that chart seems to animate over an instant despite the setting.
Could it due to the setTimeout functions?
If so, is there any way around that?

Zoom option in Highchart not working for large amount of data

I need to create a highchart with jquery. I have given the Zoom type as x. The Zoom option in chart is not working when there are large amount of data.
In my X-Axis I will be having date value :
Below is my chart implementation:
// Global chart options
Highcharts.setOptions({
chart: {
borderRadius: 0,
borderWidth: 1,
borderColor: '#DADCE0',
marginRight: 45,
zoomType: 'x',
width: 600,
height: 400
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
minRange: 8 * 24 * 3600000,
labels: {
format: '{value:%m-%d-%Y}', //'{value:%m-%d-%Y}'
rotation: 45
}
},
plotOptions: {
series:{
fillOpacity:0.1
},
spline: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
},
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
}
},
global: {
useUTC: false
}
});
var chartJobCount = new Highcharts.Chart({
chart: {
renderTo: 'container-segementReport',
type: 'areaspline'
},
colors: ['#0D4F8B','#00CCFF', '#ff0000', '#ff69b4','#663399','#ffa500','#006400','#654321'],
title: {
text: 'Segments (Classic)'
},
yAxis: {
title: {
text: 'Production Ratio'
},
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '', ',');
}
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ' </b> <br/> Date : <b>' + Highcharts.dateFormat('%m-%d-%Y', this.x) + ' </b> <br/> Production Ratio: <b>' + this.y + '</b>';
}
},
series: getProductionRatio() --// This function will get the data for series
});
When I try to zoom the chart, the contents present in the chart gets hided.
Is there anything that needs to taken care in the point interval for X-Axis ?
Thanks in Advance !

Issue on jQuery - Javascript Submit Closing Tag

Can you please take a look at following code and let me know why I am not able to initialize the closing tag for
$("#submitform").on("click", function (e) {});
I already tried it in http://www.jshint.com/ but it doesn't show any dis match character it took me hours to work on it but unfortunately I couldn't find out what is causing this. The weird thing is the application is working fine and I am not getting any error on console!
$("#submitform").on("click", function (e) {
$("div.alert").remove();
// Validation
var proceed = true;
if (targetPower == "Target Energy") {
$('#counter').parent().after('<div class="alert alert-danger err"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>This is a Requierd Field</div>');
proceed = false;
}
if ($("#scenSelect").val() == "0") {
$('#counter1').parent().after('<div class="alert alert-danger err"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Please Select From List</div>');
proceed = false;
}
if (proceed) {
//Change Concat
targetPower = targetPower.replace(/\D/g, '');
senario = $("#scenSelect").val();
var mapquery = senario + "_" + targetPower;
var data = 'column=' + mapquery;
if (qtype == "econo") {
var req = $.ajax({
type: "POST",
data: data,
dataType: 'json',
url: "assets/econo.php"
});
req.done(function (points) {
coords = points;
st = map.set();
for (var i = 0; i < coords.length; i++) {
var circle = map.circle(coords[i][0], coords[i][1], 5);
st.push(circle);
}
st.attr({
fill: '#FF6600',
translation: "4,4",
stroke: '#FFF',
'stroke-width': 1.5,
opacity: 1,
});
st.hover(function () {
this.animate({
fill: 'red',
opacity: .6,
r: 8,
'stroke-width': 2
}, 300)
}, function () {
this.animate({
//fill: '#98ED00',
fill: '#FF6600',
opacity: 1,
'stroke-width': 1.5,
r: 5
}, 300)
});
}); //done first
var req2 = $.ajax({
type: "POST",
data: data,
dataType: 'json',
url: "assets/econocharts.php"
});
req2.done(function (data) {
var cars = [];
cars.push(data[0]);
cars.push(data[1]);
cars.push(data[2]);
cars.push(data[3]);
cars.push(data[4]);
$('#chart1').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Economy Model',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['ROR Facilities'],
},
yAxis: {
title: {
text: 'Number of Facilities'
},
tickInterval: 50,
max: 300
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + '</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[0]
}]
}]
});
// Second Chart
$('#chart2').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'title!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
plotLines: [{
color: 'grey',
value: '.5',
width: '3'
}],
categories: ['Powerlines', 'Roads'],
style: {
color: Highcharts.getOptions().colors[0]
},
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Km Powerline',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Km Roads',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' Km</b>';
}
},
series: [{
name: 'Powerline',
//color: '#0066FF',
type: 'column',
yAxis: 1,
data: [0, cars[2]],
tooltip: {
valueSuffix: ' km'
}
}, {
name: 'Roads',
type: 'column',
data: [cars[1], 0],
tooltip: {
valueSuffix: ' km'
}
}]
});
// Third Chart
$('#chart3').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Penstocks'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000;
}
},
title: {
text: 'Km Penstocks'
},
tickInterval: 100000,
max: 1500000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' m</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[4]
}]
}]
});
// Four Chart
$('#chart4').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Total Cost Per Year'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000000;
}
},
title: {
text: 'Million $'
},
tickInterval: 100000000,
max: 1300000000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x +
' <b>' + this.y + '< $/b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[3]
}]
}]
});
});
} //end of ecolo
if (qtype == "ecolo") {
var add = 'img/' + $("#aniSelect").val() + '.png';
image2.animate({
opacity: 0
}, 500, mina.easein, function () {
image2.remove();
image2 = map.image(add, -100, 0, 794, 680).insertBefore(st).animate({
opacity: 1,
x: 0
}, 500, mina.easeout);
});
var selectedanimal = $("#aniSelect").val();
var dataecolo = 'column=' + mapquery + '&animal=' + selectedanimal;
if ($('#c1').is(':checked')) {
var req = $.ajax({
type: "POST",
data: dataecolo,
dataType: 'json',
url: "assets/ecolo_yes.php"
});
req.done(function (points) {
coords = points;
st = map.set();
for (var i = 0; i < coords.length; i++) {
var circle = map.circle(coords[i][0], coords[i][1], 5);
st.push(circle);
}
st.attr({
fill: '#FF6600',
translation: "4,4",
stroke: '#FFF',
'stroke-width': 1.5,
opacity: 1,
});
st.hover(function () {
this.animate({
fill: 'red',
opacity: .6,
r: 8,
'stroke-width': 2
}, 300)
}, function () {
this.animate({
//fill: '#98ED00',
fill: '#FF6600',
opacity: 1,
'stroke-width': 1.5,
r: 5
}, 300)
});
}); //done first
//Performance
var req3 = $.ajax({
type: "POST",
data: dataecolo,
dataType: 'json',
url: "assets/ecolochart_yes.php"
});
req3.done(function (data) {
var cuyes = [];
cuyes.push(data[0]);
cuyes.push(data[1]);
cuyes.push(data[2]);
cuyes.push(data[3]);
cuyes.push(data[4]);
$('#chart1').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Economy Model',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['ROR Facilities'],
},
yAxis: {
title: {
text: 'Number of Facilities'
},
tickInterval: 50,
max: 300
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + '</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cuyes[0]
}]
}]
}); // End of Chart One
// Third Chart
$('#chart3').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Penstocks'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000;
}
},
title: {
text: 'Km Penstocks'
},
tickInterval: 100000,
max: 1500000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' m</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cuyes[4]
}]
}]
}); //end of Chart 3
});
} //end of if Checked
else {}
} // end of ecolo
} // end of procced
mapReset();
e.preventDefault();
});

Animation from point in Highcharts

How can I animate the graph from a certain point in Highcharts?
Look at this JSfiddle. Can I say 'animate from point [Date.UTC(1997,1,0),5.5]'? Or animate only a certain series?
So everything before [Date.UTC(1997,1,0),5.5] should not animate and just 'be there' when the graph loads.
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 20
},
title: {
text: 'Kortetermijnraming CPB'
},
subtitle: {
text: 'Werkloosheid stijgt tot 6%'
},
xAxis: {
max: Date.UTC(2013, 1, 0),
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%Y',
year: '%Y'
}
},
yAxis: {
min: 0,
title: {
text: 'Werkloosheid (%)'
},
plotLines: [{
value: 0,
width: 2,
color: '#000000',
zIndex: 5
}, {
label: {
text: 'Werkloosheid',
x: 0,
align: 'right'
},
value: 5,
width: 0.5,
color: '#ffffff',
zIndex: 1
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '<br/>' + Highcharts.dateFormat('%Y', this.x) + ':</b> ' + this.y + '%';
}
},
plotOptions: {
series: {
animation: {
duration: 5000
}
},
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 4,
lineWidth: 1
}
}
}
}
},
legend: {
enabled: false
},
});

Add animation to the serie:
serie: [{
animation: {
duration: 5000
},
...
}]
demo

Categories