Screen blank after loading highcharts-3d.js - javascript

I am using csvURL function to create a highchart. Below script works, however the moment I add highcharts-3d.js to create a 3D chart, the screen turns blank.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 50,
viewDistance: 25
}
},
data: {
csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
},
title: {
text: 'Made up Data'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Cups'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
})
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders input').on('input change', function() {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
</script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I inserted this inside the head:
<script src="/https://code.highcharts.com/highcharts-3d.js"><script>
What do I have to do to create a 3D chart? Obviously, my method is not working.
By the way, sorry for the wide spaces. I'm limited to using a notepad, and the tab arrangements do not paste beautifully here.

Script tag has typos and added incorrectly. change this
<script src="/https://code.highcharts.com/highcharts-3d.js"><script>
to
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
</head>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<body>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
Highcharts.chart('container', {
chart: {
type: 'bar',
options3d: {
enabled: true,
alpha: 15,
beta: 0,
depth: 50,
viewDistance: 25
}
},
data: {
csvURL: 'https://raw.githubusercontent.com/peoplecure/FunTravel/master/fake%20column.csv'
},
title: {
text: 'Made up Data'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontFamily: 'Arial',
fontSize: '12px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Number of Cups'
}
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
})
});
function showValues() {
$('#alpha-value').html(chart.options.chart.options3d.alpha);
$('#beta-value').html(chart.options.chart.options3d.beta);
$('#depth-value').html(chart.options.chart.options3d.depth);
}
// Activate the sliders
$('#sliders input').on('input change', function() {
chart.options.chart.options3d[this.id] = parseFloat(this.value);
showValues();
chart.redraw(false);
});
showValues();
</script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Related

Cannot display my chart on the browser while it works fine in jsfiddle

I can display perfectly my chart on jsfiddle while it can't work on my browsor.
I tried to import jquery but it does not work too.
Anyone can help me please?
you will find here my code.
my code
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Thank you very much.
To get a fiddle working alone you need to:
create a html file
add the fiddle code to de html body
create a script tag on the button with the fiddle js code
add dependencies managed by jsfiddle (jquery in your case as you were trying)
also the jquery url needs to have correct url
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
here the finalcode, you can save it as html file an open in a browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts.js"></script>
<script src="https://code.highcharts.com/4.1.9/highcharts-more.js"></script>
<script src="https://code.highcharts.com/4.1.9/modules/solid-gauge.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
<div
id="container-speed"
style="width: 300px; height: 200px; float: left"
></div>
<div
id="container-rpm"
style="width: 300px; height: 200px; float: left"
></div>
</div>
<script>
$(function() {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor:
(Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
}
// The speed gauge
$('#container-speed').highcharts(
Highcharts.merge(gaugeOptions, {
yAxis: {
min: 10000,
max: 20000,
mean: 15000,
title: {
text: 'Prix par rapport au marché'
}
},
credits: {
enabled: false
},
series: [
{
name: 'Prix par rapport au marché',
data: [17000]
},
{
name: 'Foo',
type: 'gauge',
data: [17000]
}
]
})
)
// Bring life to the dials
})
</script>
</body>
</html>

Including image as datalabels in packedbubble chart highcharts

Trying to include an image in the datalabel of a packedbubble chart. The image is inserted into the datalabel but it wont align in the center. Sometimes it does and sometimes it does not. My approch is as :
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="https://code.highcharts.com/css/highcharts.css"/>
</head>
<body bgcolor="#ffffff">
<div id="container1" style="width: 100%; height: auto; margin-right: 0 "
align="right"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="{% static 'js/lang.js'%}"></script>
<script>
var screen_name={{screen_name|safe}}
var id={{id|safe}}
var chart1=Highcharts.chart('container1', {
chart: {
type: 'packedbubble',
height:'100%'
},
title: {
text: '<p data-mlr-text>أبرز 10 مغردین</p>',
useHTML:true
},
legend: {
enabled: false
},
tooltip: {
useHTML:true,
formatter:function(){
var headerFormat=this.point.name;
var pointFormat='<br /><b>'+this.point.y+'</b>'
return [headerFormat,pointFormat]
}
},
plotOptions: {
packedbubble: {
minSize: '40',
maxSize: '80',
zMin: 0,
zMax: 5000,
layoutAlgorithm: {
splitSeries: false,
gravitationalConstant: 0.02
},
dataLabels: {
align:'center',
enabled: true,
useHTML:true,
formatter: function(){
width=this.point.marker.radius
return '<img
src="https://avatars.io/twitter/'+this.point.name+'" style="max-
width:'+width+'px;max-height:'+width+'px"></img><br />'
},
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
},
series: [{
name: 'Top 10 Users',
data: (screen_name),
}]
});
As the size of the bubble is dynamic have included the max-height and width property of the image so that they stay inside of the bubble. But the image does not begin at the center of the circle. Its position changes everytime.
Want the image to completely fill the circle and does not go outside of the circle

Google Charts Bar Background Color Not Working

All I want to do is change the background color to transparent, yet I can't even change the color at all no matter the combination of options I see anywhere in the (fantastic!...) documentation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title></title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
In options of course for Classic GViz:
backgroundColor: {fill:'transparent'},
This will not work if you are using Materials BETA
But the following will work for Classic and Materials
Make a <style> block at the closing tag of </head>
Add this ruleset:
rect {
fill:transparent;
}
OP is using Materials and it is documented at the Materials Bar Chart section the following:
The Material Charts are in beta. The appearance and interactivity are largely final, but many of the options available in Classic Charts are not yet available in them. You can find a list of options that are not yet supported in this issue.
Also, the way options are declared is not finalized, so you must convert your options by replacing this line:
chart.draw(data, options);
...with this:
chart.draw(data, google.charts.Bar.convertOptions(options));
In Snippet 2 one can plainly see that we can indeed make GViz chart background transparent. The core graphics are SVG, so if we want to have more control of our charts graphically, we would need to know a little SVG.
SNIPPET 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>Basic GVis ChartWrapper Setup</title>
<style>
body {background:url(http://www.koolchart.com/images/background.jpg)no-repeat; background-size:cover;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
var options = {
backgroundColor: {fill:'transparent'},
title: 'Google Visualization ChartWrapper Setup',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 22
},
hAxis: {
textStyle: {
color: '#993300'
},
title: 'Subjects',
titleTextStyle: {
color: '#993300',
fontName: 'Verdana',
fontSize: 22
}
},
vAxis: {
maxValue: 1000,
textStyle: {
fontName: 'Verdana',
color: '#993300'
},
title: 'A Quick Basic ChartWrapper Setup from a Remote Google Sheet Source',
titleTextStyle: {
color: 'blue',
fontName: 'Arial',
fontSize: 16
}
}
};
function drawChart() {
chart = new google.visualization.ChartWrapper();
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Place your URL within setDataSourceUrl(...HERE...)
chart.setDataSourceUrl('https://docs.google.com/spreadsheets/d/1_ljk07nqJf_A5tM5BJyVCHTc5Uw8jxBqdCDudJJgvmA/edit#gid=1248768532');
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
chart.setChartType('LineChart');
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}
</script>
</head>
<body>
<header>
<details>
<summary>
<p><a href='http://embed.plnkr.co/GKvadm3yOBYHJoOjisWs/'>Snippet</a> and <a href='http://plnkr.co/edit/GKvadm3yOBYHJoOjisWs?p=info'>README.md</a> file available at: Plunker.</p>
<p><a href='https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject'>ChartWrapper Reference</a>
</p>
</summary>
</details>
</header>
<section id="chart"></section>
</body>
</html>
SNIPPET 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>G04B32</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['bar']
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
backgroundColor: {
fill: 'transparent'
},
title: 'Chess opening moves',
width: 900,
legend: {
position: 'none'
},
chart: {
title: 'Chess opening moves',
subtitle: 'popularity by percentage'
},
backgroundColor: {
fill: 'transparent'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Percentage'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
<style>
body {
background: url(http://previews.123rf.com/images/vitalli/vitalli1401/vitalli140100012/25204290-Chessboard-background-texture-Stock-Photo.jpg)no-repeat;
background-size: cover;
}
rect {
fill: transparent;
}
</style>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

Legend for x-axis categories in highcharts

I am trying to get custom legends below the chart where I can add my own text.
In the below example, I want to create legends for each violation codes. It would be static text describing the violation codes.
Is it possible ? If so, how can I achieve it ?
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Staten Island Violation Code Destribution</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Staten Island Violation Distribution'
},
subtitle: {
text: 'Source: NYC Open DataSet</a>'
},
xAxis: {
type: 'category',
labels: {
rotation: -45,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
data: {
csv: document.getElementById('csv').innerHTML
},
yAxis: {
min: 0,
title: {
text: 'Count'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: 'Count: <b>{point.y}</b>'
},
series: [{
name: 'Violation Count',
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
format: '{point.y}', // one decimal
y: 10, // 10 pixels down from the top
style: {
fontSize: '8px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<script src="../../js/modules/data.js"></script>
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
<pre id="csv" style="display:none">
VIOLATIONCODE,COUNT
10F,843
06D,603
02G,602
10B,583
08A,517
06C,472
02B,415
04L,405
04H,322
06E,317
04N,293
04A,283
06F,267
10H,262
Others,3335
</pre>
</body>
</html>
Aligning each violation code within its own series and then defining the series titles will achieve what I think you're looking for.
<pre id="csv" style="display:none">
VIOLATIONCODE,Description1,Description2,Description3,Description4,Description5,Description6
10F,843
06D,,603
02G,,,602
10B,,,,583
08A,,,,,517
06C,,,,,,472
[...]
</pre>
Also move your dataLabels property into plotOptions and set grouping to false.
JSFiddle

JQPlot Plugin Size

In this code I am using jqplot plugin which I took from this site http://www.jqplot.com/deploy/dist/examples/line-charts.html. What I want is to change the size of height and width. How to do this ?
My code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>JQPlot</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/jqplot.dateAxisRenderer.min.js"></script>
</head>
<body>
<div id="chart1" style="width:600px; height:250px;"></div>
<script type="text/javascript">
$(document).ready(function () {
var line1 = [['23-May-08', 578.55], ['20-Jun-08', 566.5], ['25-Jul-08', 480.88], ['22-Aug-08', 509.84],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 308.56],
['23-Jan-09', 299.14], ['20-Feb-09', 346.51], ['20-Mar-09', 325.99], ['24-Apr-09', 386.15]];
var line2 = [['23-May-08', 323], ['20-Jun-08', 222], ['25-Jul-08', 123], ['22-Aug-08', 43],
['26-Sep-08', 454.13], ['24-Oct-08', 379.75], ['21-Nov-08', 303], ['26-Dec-08', 544],
['23-Jan-09', 654], ['20-Feb-09', 234], ['20-Mar-09', 543], ['24-Apr-09', 323]];
var plot1 = $.jqplot('chart1', [line1, line2], {
title: 'Data Point Highlighting',
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d'
}
},
yaxis: {
tickOptions: {
formatString: '$%.2f'
}
}
},
highlighter: {
show: true,
sizeAdjust: 300
},
cursor: {
show: false
}
});
});
</script>
</body>
</html>
The size of the plot drawn depends of the dimensions of the container DIV, just change the CSS for width and height (instead of 600px and 250px).
<div id="chart1" style="width:600px; height:250px;"></div>
The width and height need to be specified for the container div itself.
Check out the source of the example.
<div id="chart1" style="height:300px; width:500px;"></div>

Categories