I am trying to add accessibility to an donut chart created using Highcharts.
Html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Donut highcahrt with accessibility</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<figure>
<div id="chart-container"></div>
<p class="highcharts-description">Chart showing how 2020 has seen a massive growth in sales compared to 2019 and 2018. hahahaha!!!</p>
</figure>
</body>
</html>
JS code
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart-container',
type: 'pie'
},
title: {
text: 'Browser market share, April, 2011'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
series: [{
name: 'Browsers',
data: [["Firefox",6],["MSIE",4]],
size: '20%',
innerSize: '85%',color:['red','red'],
showInLegend:true,
dataLabels: {
enabled: false
}
}]
});
The JSFiddle.
When I use NVDA with Firefox(version 83) on Windows 7, the screen reader doesn't read the description specified in the HTML as specified in the documentation(https://www.highcharts.com/docs/accessibility/accessibility-module). Same is the case for JAWS on IE.
My site want to use a function when xAxis.afterSetExtremes. But in IE7, when I am selecting a range in xAxis, the selecting cannot be stoped by the second click. Why?
This problem only happened in IE7.
The test page is: Here
The whole code is:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/huidu.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div id="diantui" style="min-width:300px;height:400px">
</div>
</div>
</div>
<script>
function togglePlotbands() {
this.plotLinesAndBands.forEach(function(plotband) {
var ii = 1;
});
}
window.onload = function(){
var all_data = [];
all_data.push({x:1495641600000 , y: 1});
all_data.push({x:1497110300000 , y: 3});
all_data.push({x:1497210300000 , y: 4});
all_data.push({x:1497410300000 , y: 3});
all_data.push({x:1497510300000 , y: 2});
all_data.push({x:1497715300000 , y: 1});
all_data.push({x:1500134400000 , y: 2});
var hc_obj = {
chart: {
type: 'line',
zoomType: 'x',
renderTo: 'diantui',
events: {
load: function() {
togglePlotbands.call(this.xAxis[0]);
}
}
},
xAxis: {
plotBands: [
{color: '#FFFFEF',from: 1497110400000,to: 1497715200000,label: {text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxfsdfsfsdfsfsdf'}}
],
events: {
afterSetExtremes: togglePlotbands
}
},
plotOptions: {
line: {
connectNulls: true,
marker: {
enabled: false
},
}
},
series: [
]
};
hc_obj['series'].push({name: 'xxx', data: all_data, visible: true});
var chart = new Highcharts.Chart(hc_obj);
}
</script>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I am trying Apache zeppelin . I wanted to have highcharts. So I thought of using %html interpreter. I have done this
print("%html <h3> Hello World!! </h3>")
It perfectly works. Know I have the code for highcharts
<!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>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/js/highcharts.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
But How could I put both together. I tried searching for samples but no help. Kindly someone help.
using %angular should be the easiest.
One prerequisite is the highcharts.js should be loaded into the page.
It could loaded in the notebook with jQuery
It could be loaded by simple modification in Zeppelin
git clone https://github.com/apache/zeppelin.git
cd zeppelin
mvn clean package -DskipTests
cd zeppelin-web
bower install highcharts -S
mvn clean package -DskipTests
Though it is very straight forward to using %angular to create a static chart. While there is a gap to convert from Spark model to Highcharts.
So I create a project try to fill this gap. spark-highcharts can be used in Zeppelin, spark-shell, or other spark application.
%spark
import com.knockdata.spark.highcharts._
import com.knockdata.spark.highcharts.model._
highcharts(bank
.series("x" -> "age", "y" -> avg(col("balance")))
.orderBy(col("age")).plot()
And got a chart
Zeppelin also supports pluggable packages at run-time through the Helium framework. There are a handful of highcharts charts with published packages.
my json.data file is in the same directory as my index.html file. data.json file looks like this:
{
data:
[
[1369540800000,20]
]
}
when I do:
alert(JSON.stringify(jsonData, null, 4));
I get this back, so I get the values. Still dont know what is wrong.
{
"data":[
[
1369540800000,
10
],
[
1369541700000,
20
]
]
}
my html file including java script to build the charts is below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>HIGHTCHARTS</title>
<style>
body
{
font: 10px arial;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$.getJSON('data.json', function(jsonData) {
chartOptions.series = jsonData;
chart = new Highcharts.Chart(chartOptions);
});
var chartOptions = {
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime'
},
series: []
};
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
I see the chart title but I dont see any charts or data points. What am I missing here?
Your data is not in the right format. Familiarize yourself with how to format data for Highcharts.
These may help:
http://api.highcharts.com/highcharts#series.data
http://docs.highcharts.com/#preprocesssing-data-from-a-file
Notably:
1) your dates must be either a javascript time stamp (epoch time, in milliseconds), or a date.Utc declaration
2) your structure needs to be like:
[[date, value],[date,value],[date,value]]
this is what I had to do to make it work:
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'area'
},
xAxis: {
type: 'datetime'
},
series: [{}]
};
$.getJSON('dude.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
</script>
My highstock will not open data in a chart on localhost. Does anybody has any idea why?
The chart displays no date. I have tried localhost, ipaddress, and still no luck.
//jsonp.php file
<?php
$host="localhost";
$username="root";
$password="";
$db_name="northwind";
$con=mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$sql = "select unix_timestamp(OrderDate) as datetime, Freight from TEST1 ORDER BY OrderDate ASC LIMIT 100";
$result = mysql_query($sql);
$data = array();
while ($row = mysql_fetch_array($result)) {
extract ($row);
$datetime *= 10000; // convert from Unix timestamp to JavaScript time
$data[] = array((float)$datetime,(float) $Freight);
}
$array2[] = json_encode($data);
///data2[] = json_decode($array2);
echo json_encode($data);
?>
////output from jsonp.php file
[[8364528000000,32.38],[8365392000000,11.61],[8367984000000,65.83],[8368848000000,51.3],[8369712000000,58.17],[8370576000000,22.98],[8371440000000,148.33],[8374032000000,13.97],[8374896000000,81.91],[8375760000000,140.51],[8376624000000,3.25],[8377488000000,3.05],[8380080000000,48.29],[8380944000000,146.06],[8381808000000,3.67],[8382672000000,55.28],[8383536000000,25.73],[8386128000000,208.58],[8386992000000,66.29],[8387856000000,4.56],[8388720000000,136.54],[8389584000000,98.03],[8392176000000,76.07],[8393040000000,6.01],[8393904000000,26.93],[8394768000000,13.84],[8395632000000,125.77],[8398224000000,92.69],[8399088000000,25.83],[8399952000000,8.98],[8399952000000,2.94],[8400816000000,12.69],[8401680000000,84.81],[8404272000000,76.56]]
////html file
html file-----below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(function() {
$.getJSON('127.0.0.1/HIGH_STOCK/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'TEST DATA'
},
series : [{
name : 'TEST',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
//]]>
</script>
</head>
<body>
<script src="JS/highstock.js"></script>
<script src="JS/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
Everything seems to be working fine with your code.
Demo
In your $.getJSON(...) you need to take care of the Same Origin Policy
You have not specified what errors you get or what problem are you facing, it is really difficult to help in such cases. Please consider posting a jsFiddle reproduction of the error
Ok, used the northwind database on PHPmyadmin with WAMP, on localhost, it is working. Forgive the sloppiness, it's late. If you have issues, please let me know.
//PHP
<?php
//read the northwind database nworders
$host="localhost";
$username="root";
$password="root";
$db_name="NORTHWIND";
$con=mysql_connect("$host", "$username", "")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$sql = "select distinct unix_timestamp(ShippedDate) as datetime, Freight from nworders WHERE shipname LIKE '%Bon app%' ORDER BY datetime ASC LIMIT 50000 ";
$result = mysql_query($sql);
if($result === FALSE) {
die(mysql_error()); // TODO: better error handling
echo mysql_error();
}
$data = array();
while ($row = mysql_fetch_array($result)) {
extract ($row);
$datetime *= 1000;// convert from Unix timestamp to JavaScript time
$data[] = array($datetime, (FLOAT)$Freight);
}
$array2[] = json_encode($data);
echo json_encode($data);
?>
///
<!DOCTYPE HTML>
<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() {
$.getJSON('HTTP://localhost/HIGH/PHP_READ_TEST.PHP', function(data) {
// Create a timer
var start = + new Date();
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function(chart) {
this.setTitle(null, {
text: 'Built chart at '+ (new Date() - start) +'ms'
});
}
},
zoomType: 'x'
},
rangeSelector: {
buttons: [{
type: 'day',
count: 3,
text: '3d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
selected: 3
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
title: {
text: 'Hourly temperatures in Vik i Sogn, Norway, 2004-2010'
},
subtitle: {
text: 'Built chart at...' // dummy text to reserve space for dynamic subtitle
},
series: [{
name: 'Temperature',
data: data,
pointStart: Date.UTC(2004, 3, 1),
pointInterval: 3600 * 1000,
tooltip: {
valueDecimals: 1,
valueSuffix: '°C'
}
}]
});
});
});
</script>
</head>
<body>
<script src="highstock.js"></script>
<script src="exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>