I am trying to use highcharts to build a charts. I have the below code:
my data.json file looks like this:
{"DATETIME":[1369540800,1369541700,1369542600,1369543500,1369544400,1369545300,1369546200,1369547100,1369548000,1369548900],"CPU":[14.84,13.6333333333333,14.7666666666667,13.5333333333333,17.8666666666667,15.9333333333333,14.2333333333333,13.3,10.8333333333333,9.76666666666667]}
HIGHTCHARTS
<style>
body
{
font: 10px arial;
}
</style>
<script src="jquery.min.js"></script>
<script src="js/highcharts.js"></script>
<script type="text/javascript">
$(function () {
$.getJSON('data.json', function(data) {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'CPU UTILIZATION'
},
xAxis: {
categories: ['Date']
},
yAxis: {
title: {
text: '% CPU Utilization'
}
},
series: [{
data: data,
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
I dont see any values, dada.json file is in the same directory as index.html file. Any ideas what I am missing here?
Your JSON should have data name instead of datetime. Morever I see only dates, not y values.
"DATETIME":
should be
"data":
Related
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.
i am new in ColdFusion and i want to do highcharts in coldFusion.
I have code like to below to display my pie chart but i dunno why it cannot be displayed. I edit it based on the example in the higcharts demo.
<cfscript>
categories = [{name='Jane',y=13},{name='John',y=23},{name='Joe',y=19}];
</cfscript>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data:<cfoutput>#categories#</cfoutput>
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>
So in your example you create a ColdFusion array of structs here:
<cfscript>
categories = [{name='Jane',y=13},{name='John',y=23},{name='Joe',y=19}];
</cfscript>
When you pass that data to Highcharts you are outputting the ColdFusion array here:
data:<cfoutput>#categories#</cfoutput>
This will not work. The ColdFusion array is a complex variable so you can't just output it like that. If you view the source of your page you'll probably see a ColdFusion error. Try this instead:
data:<cfoutput>#serializeJSON(categories)#</cfoutput>;
That will convert your ColdFusion array into JSON, which the JavaScript can read and understand. For example:
[{"Y":13,"NAME":"Jane"},{"Y":23,"NAME":"John"},{"Y":19,"NAME":"Joe"}]
Note that the keys are uppercase - this is because ColdFusion by default uses uppercase keys. If you need lowercase keys, then when you create the ColdFusion array of structs, quote the keys. For example:
<cfscript>
categories = [{'name'='Jane','y'=13},{'name'='John','y'=23},{'name'='Joe','y'=19}];
</cfscript>
This will output JSON which looks like this:
[{"y":13,"name":"Jane"},{"y":23,"name":"John"},{"y":19,"name":"Joe"}]
I'm trying to duplicate the Highmaps Demos › Map bubble except that I want to add other charts to the same page. When I load the Highcharts script and the Highmaps module script, the chart doesn't render. The browser throws a generic error. See jsfiddle for the example.
https://jsfiddle.net/hkjbn6wg/1/
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/maps/modules/map.js"></script>
<script src="http://code.highcharts.com/maps/modules/data.js"></script>
<script src="http://code.highcharts.com/mapdata/custom/world.js"></script>
<div id="container" style="height: 500px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population.json&callback=?', function (data) {
var mapData = Highcharts.geojson(Highcharts.maps['custom/world']);
// Correct UK to GB in data
$.each(data, function () {
if (this.code === 'UK') {
this.code = 'GB';
}
});
$('#container').highcharts('Map', {
chart : {
borderWidth : 1
},
title: {
text: 'World population 2013 by country'
},
subtitle : {
text : 'Demo of Highcharts map with bubbles'
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
series : [{
name: 'Countries',
mapData: mapData,
color: '#E0E0E0',
enableMouseTracking: false
}, {
type: 'mapbubble',
mapData: mapData,
name: 'Population 2013',
joinBy: ['iso-a2', 'code'],
data: data,
minSize: 4,
maxSize: '12%',
tooltip: {
pointFormat: '{point.code}: {point.z} thousands'
}
}]
});
});
});
The error is printed, because you miss highcharts-more.js file.
Add the reference to this file and example will work.
<script src="http://code.highcharts.com/highcharts-more.js"></script>
http://jsfiddle.net/hkjbn6wg/2/
I am trying to create a polymer custom element to display a Highchart and getting this error:
'Highcharts Error #13 Rendering div not found
This error occurs if the chart.renderTo option is misconfigured so that Highcharts is unable to find the HTML element to render the chart in.'
Can anyone please explain how to load the chart into the template div id="container"? Any links to working highcharts/polymer elements greatly appreciated :)
My code (I'm using polymer starter kit so linking to polymer/webcomponents from the elements.html and have in index.html):
<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>
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
});
</script>
</dom-module>
New code:
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: function() {
var el = new Highcharts.Chart
({
chart: {
type: 'bar',
// renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
this.$.container.appendChild(el);
}
});
</script>
</dom-module>
Try, to use
ready: function() {
var el = new Highcharts.Chart({.....});
//selector for element with id container
this.$.container.appendChild(el);
}
I got the chart loading like this, thanks for help:
<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>
<dom-module id="bar-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "bar-chart",
ready: function () {
$(this.$.container).highcharts({
chart: {
type: 'bar',
renderTo: 'container'
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
}
});
</script>
</dom-module>
Hey you can use Highchart-Chart to do the same thing.
<!-------------------------------------|
Normal Import is done the way below:
<link rel="import" href="bower_components/highcharts-chart/highcharts-chart.html">
For the sake of a demo I will use a CDN
--------------------------------------->
<link rel="import" href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/highcharts-chart.html">
<highcharts-chart type="bar" x-axis='{"categories": ["London","Paris","Madrid"]}' title="Hi" x-label="Cities" data='[1000,2500,1500]' y-label="Sales"></highcharts-chart>
Click Run code snippet to see the chart!
That's it! There are more examples here with real-time data.
I'm adding this answer since I could not find this solution anywhere else and unfortunately the Highchart-Chart package with Polymer 1.x did not work for me either.
I noticed that the element was being created/rendered, but it wasn't being properly appended to the custom Polymer element (e.g. my-chart).
The only way that worked was to use this.appendChild(this.$.container); after creating the Highchart.
Your code would then be:
<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>
<dom-module id="my-chart">
<template>
<div id="container" style="max-width: 600px; height: 360px;"></div>
</template>
<script>
Polymer({
is: "my-chart",
ready: new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: this.$.container // Renders to div#container in this module only
},
title: {text: 'HI'},
xAxis: {
categories: ['London', 'Paris', 'Madrid']
},
yAxis: {
title: {
text: 'Sales'
}
},
series: [{
name: 'Cities',
data: [1000, 2500, 1500]
}]
})
});
this.appendChild(this.$.container); // Add highcharts to Polymer element DOM
</script>
</dom-module>
NOTE: Highcharts.chart({...}) did not need to be stored to a variable.
This should avoid the param 1 is not Node error.
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>