HighCharts - basic barchart not rendering in SharePoint ASPX page - javascript

I have a simple basic barchart which does not render at all in SharePoint 2010 page (displays block white space).
I placed my code within content editor and used javascript files what are imported from High charts library (highcharts.js and exporting.js).
can somebody advise me in fixing the code and what should I do.
Here is the code :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</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: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px;
margin: 0 auto">
</div>
</body>
</html>

Related

Javascript chart which can plot values from a txt file

I found a code of a Javascript chart for my html webpage(see code below). And that part works fine.
But for the next step I would like that the chart get its values from a txt file.
I have no clue how to start with that. Anyone who can help me out?
I also have a second question(less important), i want to put units to the values, I tried some solutions on the internet but nothing seems to work for me???
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Multiple Y Axis Chart</title>
<link href="../../assets/styles.css" rel="stylesheet" />
<style>
#chart {
max-width: 650px;
margin: 35px auto;
}
.apexcharts-tooltip-title {
display: none;
}
#chart .apexcharts-tooltip {
display: flex;
border: 0;
box-shadow: none;
}
</style>
<script>
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/promise-polyfill#8/dist/polyfill.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill#1.2.20171210/classList.min.js"><\/script>'
)
window.Promise ||
document.write(
'<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
)
</script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div id="chart"></div>
<script>
var options = {
series: [{
name: 'Humidity',
type: 'line',
data: [1.4, 2, 2.5, 1.5, 2.5, 2.8, 3.8, 4.6]
}, {
name: 'Temperature',
type: 'line',
data: [1.1, 3, 3.1, 4, 4.1, 4.9, 6.5, 8.5]
},
],
chart: {
height: 350,
type: 'line',
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: [1, 1, 4]
},
title: {
text: 'Temperature and humidity',
align: 'left',
offsetX: 110
},
xaxis: {
categories: [0601, 0701, 0801, 0901, 0801, 0901, 1001, 1101],
},
yaxis: [
{
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#008FFB'
},
labels: {
style: {
colors: '#008FFB',
}
},
title: {
text: "Humidity in % ",
style: {
color: '#008FFB',
}
},
tooltip: {
enabled: true
}
},
{
seriesName: 'Humidity in %',
opposite: true,
axisTicks: {
show: true,
},
axisBorder: {
show: true,
color: '#00E396'
},
labels: {
style: {
colors: '#00E396',
}
},
title: {
text: "Temperature in °C",
style: {
color: '#00E396',
}
},
},
],
tooltip: {
fixed: {
enabled: true,
position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft
offsetY: 30,
offsetX: 60
},
},
legend: {
horizontalAlign: 'left',
offsetX: 40
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
</body>
</html>
The txt file contains the values:
2
4
8
10
12
14
16
etc

Highcharts click event should apply only on marker point

Highcharts.chart('container', {
title: {
//text: 'Solar Employment Growth by Sector, 2010-2016'
text: false
},
subtitle: {
//text: 'Source: thesolarfoundation.com'
text: false
},
yAxis: {
title: {
text: '$'
}
//,categories: [10,20,30,40,50,60,70,80,90,100]
},
xAxis: {
title: {
text: 'Units'
},
categories: [10, 20, 30]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
/*plotOptions: {
series: {
pointStart: 0
}
},*/
series: [{
lineWidth: 0,
showInLegend: false,
cursor: 'pointer',
point: {
events: {
click: function(e) {
hs.close();
hs.htmlExpand(null, {
pageOrigin: {
x: (e.pageX || e.clientX) - 100,
y: (e.pageY || e.clientY) + 60
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
states: {
hover: {
lineWidthPlus: 0
}
},
name: 'Installation',
data: [12, 40, 42]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Fiddle
As per requirement, I have implemented highslide popup. But in some cases, the toggle click event is applying to the outside of the marker points also. the highslide popup should toggle when I click on marker points only. can anyone help me out with this issue?
Add chart type scatter by default it is type line. In line chart hover is due to connecting line, which cause pop up to appear.In scatter chart this does not happen
Highcharts.chart('container', {
chart: {
type: "scatter"
},
title: {
//text: 'Solar Employment Growth by Sector, 2010-2016'
text: false
},
subtitle: {
//text: 'Source: thesolarfoundation.com'
text: false
},
yAxis: {
title: {
text: '$'
}
//,categories: [10,20,30,40,50,60,70,80,90,100]
},
xAxis: {
title: {
text: 'Units'
},
categories: [10, 20, 30]
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
/*plotOptions: {
series: {
pointStart: 0
}
},*/
series: [{
lineWidth: 0,
showInLegend: false,
cursor: 'pointer',
point: {
events: {
click: function(e) {
hs.close();
hs.htmlExpand(null, {
pageOrigin: {
x: (e.pageX || e.clientX) - 100,
y: (e.pageY || e.clientY) + 60
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
this.y + ' visits',
width: 200
});
}
}
},
states: {
hover: {
lineWidthPlus: 0
}
},
name: 'Installation',
data: [12, 40, 42]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Jquery renders in Safari but not Chrome

I am using the following code, it renders perfectly in Safari but not in Chrome. I am seeing no errors in the console in Chrome.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!--http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/ -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function () {
console.log('inside function');
$('#container').highcharts({
title: {
text: 'Monthly Active Users',
x: -20 //center
},
subtitle: {
text: 'Users who visited on more than 2 days in the last 30 days',
x: -20
},
xAxis: {
categories: ["11/09/2016","12/09/2016","13/09/2016","14/09/2016","15/09/2016","16/09/2016","17/09/2016","18/09/2016","19/09/2016","20/09/2016","21/09/2016","22/09/2016",] //insert date here
},
yAxis: {
title: {
text: 'Percent (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Monthly Active Users',
data: [
4.2359074617139,4.3266102797658,4.3492372606297,4.3000323310702,4.297253634895,4.1612903225806,4.1867954911433,4.3338683788122,4.3089690392595,4.3795620437956,4.3037974683544,4.294284812125,]
}]
});
});
</script>
Here's a perfectly fine working snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!--http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/ -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script type="text/javascript">
$(document).ready(function () {
console.log('inside function');
$('#container').highcharts({
title: {
text: 'Monthly Active Users',
x: -20 //center
},
subtitle: {
text: 'Users who visited on more than 2 days in the last 30 days',
x: -20
},
xAxis: {
categories: ["11/09/2016","12/09/2016","13/09/2016","14/09/2016","15/09/2016","16/09/2016","17/09/2016","18/09/2016","19/09/2016","20/09/2016","21/09/2016","22/09/2016",] //insert date here
},
yAxis: {
title: {
text: 'Percent (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Monthly Active Users',
data: [
4.2359074617139,4.3266102797658,4.3492372606297,4.3000323310702,4.297253634895,4.1612903225806,4.1867954911433,4.3338683788122,4.3089690392595,4.3795620437956,4.3037974683544,4.294284812125,]
}]
});
});
</script>
with your code that works on Chrome. Could you maybe provide more details about how you're running this and if there are any warnings in the console (not errors)
I have just run the code in chrome and it renders just fine. I am using chrome version Version 52.0.2743.116 m.

How to change the bar chart values from static to dynamic

I have a code for a bar chart and it is working well but this code has static values but I want to take the values from a server and every time have a different chart (I mean I dont want to give any values in the code).How can I make that?
This is the code:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<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; max-width: 800px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Top 10 HashTags'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Number of repeated hashTags ',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [ {
name: 'Year 2012',
data: [1052, 954, 4250, 740, 38]
}]
});
});
</script>
A little example to you. The first column is the xAxis and the others, series. I hope this help you.:
<?php
$sql5 = mysqli_query($bd,'SELECT tx_rend_escolas.ano, tx_rend_escolas.ap_med, tx_rend_escolas.rep_med, tx_rend_escolas.abd_med FROM tx_rend_escolas WHERE tx_rend_escolas.fk_cod_entidade = 21438200 ORDER BY tx_rend_escolas.ano ASC;') or die(mysqli_error());
$linhas5 = mysqli_num_rows($sql5);
$proc4 = array();
$proc5 = array();
$proc6 = array();
$proc7 = array();
while ($docs = mysqli_fetch_assoc($sql5)) {
$proc4[] = "'".$docs['ano']."'";
$proc5[] = $docs['ap_med'];
$proc6[] = $docs['rep_med'];
$proc7[] = $docs['abd_med'];
}
$proc4 = implode(",", $proc4);
$proc5 = implode(",", $proc5);
$proc6 = implode(",", $proc6);
$proc7 = implode(",", $proc7);
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</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: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: [<?php echo $proc4;?>],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b><br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Aprovação',
data: [<?php echo $proc5;?>]
}, {
name: 'Reprovação',
data: [<?php echo $proc6;?>]
}, {
name: 'Abandono',
data: [<?php echo $proc7;?>]
}]
});
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

How to add trend line to high charts

This is the high chart graph code.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
</script>
</head>
<body>
<script src="highcharts.js"></script>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I want to add trend line for this chart, i searched in google and got the code from this link : https://github.com/virtualstaticvoid/highcharts_trendline
and i added the trend line code like this .
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="regression.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'RNA',
x: -20 //center
},
subtitle: {
text: 'Outage Reasons',
x: -20
},
xAxis: {
categories: ['18-Jul-14', '19-Jul-14', '20-Jul-14', '21-Jul-14', '22-Jul-14', '23-Jul-14',
'24-Jul-14', '25-Jul-14', '26-Jul-14', '27-Jul-14', '28-Jul-14', '29-Jul-14']
},
yAxis: {
title: {
text: 'Outage'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: ''
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: [99.75, 99.77, 99.78, 99.84, 99.82, 99.82, 99.76, 99.78, 99.8, 99.65, 99.94, 99.8]
}],
credits: {
enabled: false
}
});
});
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
var chart_linear = new highcharts.Chart({
chart: {
renderTo: 'container'
},
plotOptions: {
series: {
enableMouseTracking: false
}
},
series: [{
type: 'scatter',
data: sourceData
},
{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
});
</script>
</head>
<body>
<script src="exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
and the trend line that acts according to the x-axis and y-axis values but on the x-axis values are date wise and the y-axis values are numbers ,please find the screen shot for the first code :
And this the trend line snapshot. please find.
please share any one of the code that i would like to add the two graphs in the same page , i have tried but the x-axis and y-axis values are different for the two graphs.
Thanks.
Numerous problems.
1.) You didn't really integrate the regresssion code into your plot, you just cut/pasted from the example and are over-drawing your plot. You need to add the regression line as a second series to your plot:
series: [{
name: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
data: sourceData
},{
type: 'line',
marker: { enabled: false },
/* function returns data for trend-line */
data: (function() {
return fitData(sourceData).data;
})()
}]
2.) This is not valid javascript:
var sourceData = [
[18-Jul-14, 99.75], [19-Jul-14, 99.77],
[20-Jul-14, 99.78], [21-Jul-14, 99.84],
[22-Jul-14, 99.82], [23-Jul-14, 99.82],
[24-Jul-14, 99.76], [25-Jul-14, 99.78],
[26-Jul-14, 99.8], [27-Jul-14, 99.65],
[28-Jul-14, 99.94], [29-Jul-14, 99.8]
];
Those are strings and they aren't quoted. Regardless, strings won't cut it for the regression, it needs numbers. Since your dates are really categories, just use:
var sourceData = [
[0, 99.75], [1, 99.77],
[2, 99.78], [3, 99.84],
[4, 99.82], [5, 99.82],
[6, 99.76], [7, 99.78],
[8, 99.8], [9, 99.65],
[10, 99.94], [11, 99.8]
];
3.) Your series name is way too long for a right side legend (it squished the plot). In my example I moved it to the bottom.
Here's a example putting all this together.
You can use this Plugin that I believe will do what you want to.
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
$('#container').highcharts('StockChart', {
title : {
text : 'AAPL Stock Price'
},
subtitle: {
text: 'From may 15, 2006 to May 10, 2013'
},
xAxis: {
ordinal: false
},
yAxis: {
title : {
text : 'Price'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series : [{
name: 'Stock Price',
type : 'line',
id: 'primary',
data : data
}, {
name: 'Linear Trendline',
linkedTo: 'primary',
showInLegend: true,
enableMouseTracking: false,
type: 'trendline',
algorithm: 'linear'
}]
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://rawgithub.com/laff/technical-indicators/master/technical-indicators.src.js"></script>
<div id="container" style="min-width: 500x; height: 400px; margin: 0 auto"></div>
Source:
http://www.highcharts.com/plugin-registry/single/16/technical-indicators

Categories