How to change the bar chart values from static to dynamic - javascript

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>

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

How to open a page when highcharts stacked bar is clicked?

I am creating a stacked bar chart with help of highcharts.
When I click on any part of bar I want to open a new page that displays containing data. How can I achieve this?
As shown in this image the graph is not stacked as it should be. It is displayed as different three vertical bars. How can I fix this?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Stacked column chart with data from MySQL using Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Account Status',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'No of Accounts'
},
plotLines: [{
value: 0,
width: 1,
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
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [],
plotOptions: {
seriessss: {
cursor: 'pointer',
point: {
events: {
click: function () {
document.location.href = 'page.php?cat=' + this.category;
}
}
}
}
},
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

HighCharts - basic barchart not rendering in SharePoint ASPX page

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>

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

highstock conflict with jquery.ba-resize.js and jquery.flot.resize.js

after hours of troubleshooting about why my chart is not loading, i found using jquery.ba-resize and jquery.flot.resize concurrently with highstock in one page cause this error:
uncaught typeerror: cannot read property 'width' of undefined
currently im tring to integrate one of highstock examples into my page, which could be found at highstock demos.
any idea on how to fix this?
thanks
edit2: jsfiddle: http://jsfiddle.net/CFPqG/
actual code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock 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() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
$('#container').highcharts('StockChart', {
lang: {
rangeSelectorZoom: ''
},
chart: {
type: 'area'
},
legend: {
enabled: true,
borderRadius: 0,
layout: 'horizontal',
backgroundColor: null,
align: 'right',
verticalAlign: 'top',
floating: true,
borderWidth: 0,
y: 20
},
colors: [
'#71c49a',
'#444444',
'#777777',
'#910000',
'#1aadce',
'#492970',
'#f28f43',
'#77a1e5',
'#c42525',
'#a6c96a'
],
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
lineColor: '#d8efe3',
labels: {
style: {
color: '#71c49a'
},
}
},
yAxis: {
lineColor: '#d8efe3',
gridLineColor: '#d8efe3',
labels: {
style: {
color: '#71c49a'
},
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: '#71c49a'
}]
},
scrollbar: {
enabled: false
},
rangeSelector: {
selected: 1,
inputEnabled: false,
buttonSpacing: 5,
labelStyle: {
color: '#71c49a',
fontWeight: 'bold'
},
},
navigator: {
handles: {
backgroundColor: '#d8efe3',
borderColor: '#71c49a'
},
series: {
color: '#71c49a'
}
},
plotOptions: {
area: {
lineWidth: 3,
shadow: true,
marker: {
enabled: true,
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null,
symbol: 'circle',
radius: 3,
states: {
hover: {
enabled: true
}
}
}
},
series: {
compare: 'percent',
fillOpacity: 0.7
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
</script>
</head>
<body>
<script src="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="your-path/jquery.ba-resize.js"></script>
<script src="your-path/jquery.flot.resize.js" type="text/javascript"></script>
</body>
</html>
Looks like that 'resize' library overwrites some jQuery function, which doesn't work the same way anymore.. ? In that case I advice to use Highcharts standalone version, see: http://jsfiddle.net/CFPqG/1/
<script type="text/javascript" src="https://rawgithub.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.js"></script>

Categories