Highchart categories issues - highcharts

I have a highchart bar graph due to the big number of categories.
Categories come in Unicode from json, but it is represented ok.
Some data is not represented ok.
My code:
$(function () {
var categories = ["ANALOGO","ANALOGO KLORNER","A\u00d1ADIR 1\u00aa PIEZA","A\u00d1ADIR RESTO PIEZAS","ARANDELA DE ORO","ARANDELA ZOCALO","CAJITA","CALCINABLE","CALCINABLE DIAMETRO 4","CALCINABLE KLORNER","CARILLA EMPRES","COMPLETA DEFINITIVA","COMPLETA PROVISIONAL","COMPOSTURA","COMPOSTURA PROTESIS","COMPOSTURA SIMPLE","CORONA CIRCONIO","CORONA CIRCONIO SOBRE IMPLANTE","CORONA EMPRESS SIN METAL","CORONA JACKET CERAMICA","CORONA METAL CERAMICA","CORONA PROVISIONAL CEMENTADA","CORONA SOBRE IMPLANTE","CUBETA DE RESINA","ESQUELETICO BILATERAL 1-3 PZAS","ESQUELETICO BILATERAL 3-5 PZAS","ESQUELETICO BILATERAL 5-8 PZAS","ESQUELETICO BILATERAL 8-14 PZAS","ESQUELETICO UNILATERAL 1-3 PZAS","FERULA DE BLANQUEAMIENTO","FERULA DESCARGA","GANCHO UNIDAD","IMPLANTE PROVISIONAL ATORNILLADO","MERYLAND PIEZA","PARCIAL ACRILICO 10 PZAS O M\u00c1S","PARCIAL ACRILICO DE 1-3 PZAS","PARCIAL ACRILICO DE 4 PZAS","PARCIAL ACRILICO DE 5 PZAS","PARCIAL ACRILICO DE 6 PZAS","PARCIAL ACRILICO DE 7 PZAS","PARCIAL ACRILICO DE 8 PZAS","PARCIAL ACRILICO DE 9 PZAS","PARCIAL ACRILICO PROV. 10 PZAS O M\u00c1S","PARCIAL ACRILICO PROV. DE 1-3 PZAS","PARCIAL ACRILICO PROV. DE 4 PZAS","PARCIAL ACRILICO PROV. DE 5 PZAS","PARCIAL ACRILICO PROV. DE 6 PZAS","PARCIAL ACRILICO PROV. DE 7 PZAS","PERNO MU\u00d1ON COLADO","PERNO MU\u00d1ON DOBLE COLADO","PILAR ANGULADO","PROTESIS HIBRIDA","REBASE PROTESIS","REPARACION ARCADA CERAMICA","REPARACION CERAMICA","REPLICA DIAMETRO 5 MM","SOBREDENTADURA CON LOCATOR","SOLDADURA","TORNILLO AVINENT","TORNILLO KLORNER","TORNILLO TITANIO","VARIOS"];
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: categories
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [
{
name:'DENTALZUERA',
data: [
[categories.indexOf("COMPLETA PROVISIONAL"),4],[categories.indexOf("CORONA METAL CERAMICA"),1],
[categories.indexOf("CORONA SOBRE IMPLANTE"),2],[categories.indexOf("FERULA DESCARGA"),1],
[categories.indexOf("VARIOS"),1]
]
},
]
});
});
The problem here is that last category here is 62 (I guess is the index), instead of category number: "VARIOS". I guess it is a bug because it happens with highcharts v.3.0.4. but did not happen with v.3.0.2
See fiddle:
http://jsfiddle.net/Ra6Mc/38/
The worst problem is with some data series, that not all the "needed" category labels are represented:
I don't really know which criteria it choose or where my error is.
http://jsfiddle.net/Ra6Mc/37/
New data:
series: [
{
name:'DENTOTAL SALUD ORAL',
data: [
[categories.indexOf("COMPLETA PROVISIONAL"),4],[categories.indexOf("CUBETA DE RESINA"),2],
[categories.indexOf("PROTESIS HIBRIDA"),1],[categories.indexOf("VARIOS"),2]
]
}
]

Yes, it looks like a bug, reported here. Thanks!
Simple workaround is to use tickPositioner and set pointRange: 1 for series:
tickPositioner: function (min, max) {
var t = [],
interval = 1;
while (min <= max) {
t.push(min);
min += interval;
}
t.push(max)
return t;
}
jsFiddle

Related

Highcharts - Performance issue using chart with x values date and TIME

I am plotting a chart with ‘y’ axis being numeric values and ‘x’ axis being date time values.
I was able to process a JSON object of 3000 items. However, because of our business rules, we also need to display the time: hours + minutes in the chart’s tooltips.
This changed everything!
Now the chart takes about 15 seconds to plot 2000 records. This is unacceptable.
I can see clearly that when I remove the time part of my Date object the charts works perfectly. It is just when added the hours and minutes that performance gets affected.
Trying different things I realized that your charts should support the amount of data I am using since it is not massive.
We love the charts but performance is key for us to continue using your products.
Can you help me with this issue?
Please check this fiddle so you can understand my problem. Feel free to remove the hours and minutes variables from the DateUtc creation:
https://jsfiddle.net/17a3jry9/7/
Thanks in advance!
var pointStart = new Date();
var data = [{"date":"2017-11-08","time":"1712","perc":10},{"date":"2017-11-08","time":"1608","perc":10},{"date":"2017-11-08","time":"1506","perc":10},{"date":"2017-11-08","time":"1408","perc":10},{"date":"2017-11-08","time":"1309","perc":10},{"date":"2017-11-08","time":"1207","perc":10},{"date":"2017-11-08","time":"1110","perc":10},{"date":"2017-11-08","time":"1003","perc":10},{"date":"2017-11-08","time":"0910","perc":10},{"date":"2017-11-08","time":"0810","perc":10},{"date":"2017-11-08","time":"0708","perc":10},{"date":"2017-11-09","time":"1710","perc":10},{"date":"2017-11-09","time":"1604","perc":10},{"date":"2017-11-09","time":"1510","perc":10},{"date":"2017-11-09","time":"1406","perc":10},{"date":"2017-11-09","time":"1310","perc":10},{"date":"2017-11-09","time":"1205","perc":10},{"date":"2017-11-09","time":"1107","perc":10},{"date":"2017-11-09","time":"1010","perc":10},{"date":"2017-11-09","time":"0912","perc":10},{"date":"2017-11-09","time":"0806","perc":10}{"date":"2018-10-25","time":"0709","perc":10},{"date":"2018-10-25","time":"1009","perc":10},{"date":"2018-10-25","time":"1208","perc":10},{"date":"2018-10-25","time":"1309","perc":10},{"date":"2018-10-25","time":"1410","perc":10},{"date":"2018-10-25","time":"1510","perc":10},{"date":"2018-10-25","time":"1702","perc":10},{"date":"2018-10-26","time":"1409","perc":10},{"date":"2018-10-26","time":"0710","perc":10},{"date":"2018-10-26","time":"1505","perc":10},{"date":"2018-10-26","time":"1704","perc":10},{"date":"2018-10-29","time":"0708","perc":10},{"date":"2018-10-29","time":"1007","perc":10},{"date":"2018-10-29","time":"1208","perc":10},{"date":"2018-10-29","time":"1406","perc":10},{"date":"2018-10-29","time":"1509","perc":10},{"date":"2018-10-29","time":"1610","perc":10},{"date":"2018-10-30","time":"0710","perc":10},{"date":"2018-10-30","time":"1010","perc":10},{"date":"2018-10-30","time":"1207","perc":10},{"date":"2018-10-30","time":"1409","perc":10},{"date":"2018-10-30","time":"1510","perc":10},{"date":"2018-10-30","time":"1709","perc":10},{"date":"2018-10-31","time":"0708","perc":10},{"date":"2018-10-31","time":"1009","perc":10},{"date":"2018-10-31","time":"1206","perc":10},{"date":"2018-10-31","time":"1409","perc":10},{"date":"2018-10-31","time":"1509","perc":10},{"date":"2018-10-31","time":"1708","perc":10},{"date":"2018-11-01","time":"0707","perc":10},{"date":"2018-11-01","time":"1007","perc":10},{"date":"2018-11-01","time":"1108","perc":10},{"date":"2018-11-01","time":"1250","perc":10},{"date":"2018-11-01","time":"1509","perc":10},{"date":"2018-11-01","time":"1407","perc":10},{"date":"2018-11-01","time":"1709","perc":10},{"date":"2018-11-02","time":"0708","perc":10},{"date":"2018-11-02","time":"1007","perc":10},{"date":"2018-11-02","time":"1108","perc":10},{"date":"2018-11-02","time":"1210","perc":10},{"date":"2018-11-02","time":"1407","perc":10},{"date":"2018-11-02","time":"1509","perc":10},{"date":"2018-11-02","time":"1608","perc":10},{"date":"2018-11-02","time":"1715","perc":10},{"date":"2018-11-05","time":"0707","perc":10},{"date":"2018-11-05","time":"1007","perc":10},{"date":"2018-11-05","time":"1209","perc":10},{"date":"2018-11-05","time":"1408","perc":10},{"date":"2018-11-05","time":"1509","perc":10},{"date":"2018-11-05","time":"1611","perc":10},{"date":"2018-11-05","time":"1715","perc":10},{"date":"2018-11-06","time":"0708","perc":10},{"date":"2018-11-06","time":"1007","perc":10},{"date":"2018-11-06","time":"1201","perc":10},{"date":"2018-11-06","time":"1410","perc":10},{"date":"2018-11-06","time":"1510","perc":10},{"date":"2018-11-06","time":"1709","perc":10},{"date":"2018-11-07","time":"0708","perc":10},{"date":"2018-11-07","time":"1007","perc":10},{"date":"2018-11-07","time":"1209","perc":10},{"date":"2018-11-07","time":"1307","perc":10},{"date":"2018-11-07","time":"1410","perc":10},{"date":"2018-11-07","time":"1506","perc":10},{"date":"2018-11-07","time":"1708","perc":10},{"date":"2018-11-08","time":"0707","perc":10},{"date":"2018-11-08","time":"1009","perc":10},{"date":"2018-11-08","time":"1207","perc":10},{"date":"2018-11-08","time":"1309","perc":10},{"date":"2018-11-08","time":"1412","perc":10},{"date":"2018-11-08","time":"1508","perc":10}];
var newSeries = data.map(function (key) {
var utilDate = new Date(key.date);
var hours = parseInt(key.time.slice(0, 2));
var minutes = parseInt(key.time.slice(2, 4));
return { x: Date.UTC(utilDate.getFullYear(), utilDate.getMonth(), utilDate.getDate(), hours, minutes), y: key.perc, key: key.id };
});
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Util (%)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{point.x: %A, %b %e, %I:%M %p}</b><br>'
//pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
colors: ['teal', 'red'],
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
series: [{
name: "Util",
data: newSeries
}],
title: {
text: 'Util Movement'
},
subtitle: {
text: ""
},
plotOptions: {
series: {
cursor: 'pointer',
turboThreshold: 10000,
point: {
events: {
}
},
label: {
connectorAllowed: false
},
pointStart: pointStart.getFullYear()
}
},
responsive: {
rules: [{
condition: {
maxWidth: 200
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
Please take a look to the browser console, you have information there about error: Highcharts error #15: www.highcharts.com/errors/15.
This means that you have unsorted data, so you need to sort them:
newSeries.sort(function(a, b){
return a.x - b.x
});
Live demo: https://jsfiddle.net/BlackLabel/onq0Lurx/

Highcharts : selection

I made a barchart with dates. Currently, to remove the dates, you must click on the dates in the legend. I wish delete multiple dates at once.
Let's take an example. My dates range from 1960 to 2015. If I would have on my chart the dates from 2000 to 2005, so I would like that if you click on 1960 and 1999, then all the dates between are deleted / hidden. It goes faster when many dates.
How to do ?
Here is my code :
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
colors:[
'#7cb5ec',
'#434348',
'#90ed7d',
'#f7a35c',
'#8085e9',
'#f15c80',
'#e4d354',
'#2b908f',
'#f45b5b',
'#91e8e1',
'#DA70D6',
'#1E90FF',
'#E0F000'
],
legend:{
itemStyle:{
fontSize:'10px',
font:'10pt',
color:'#000000'
}
},
title:{
style:{
fontSize:'0px'
}
},
subtitle:{
style:{
fontSize:'0px'
}
},
xAxis: {
categories: [
'',
],
},
yAxis: {
min: 15,
title: {
text: 'Number',
style:{
fontSize:'0px'
}
}
},
tooltip: {
shared: false,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '2004',
data: [49.9],
},
{
name: '2005',
data: [83.6]
},
{
name: '2006',
data: [48.9]
},
{
name: '2007',
data: [69.1]
},
{
name: '2008',
data: [83.6]
},
{
name: '2009',
data: [40.9]
},
{
name: '2010',
data: [69.9]
},
{
name: '2011',
data: [83]
},
{
name: '2012',
data: [28.9]
},
{
name: '2013',
data: [40.9]
},
{
name: '2014',
data: [81.6]
},
{
name: '2015',
data: [24.9]
},
{
name: '2016',
data: [46.4]
}]
});
});
Thanks
Rather than having each year as its own series, I would recommend that you place the years as the values in your x-axis (as categories) and then use Highcharts' native zoom function to allow users to select a certain date range.
I've updated your fiddle with some changes, which I explain below: https://jsfiddle.net/brightmatrix/hr28s27L/
First, in your chart option, I added zoomType: 'x' to allow users to use their mouse to zoom in on specific years. The value x means they can only zoom horizontally (across), which makes for a "cleaner" interaction.
chart: {
type: 'column',
zoomType: 'x'
},
Second, I updated your x-axis with the years as the categories/values:
xAxis: {
categories: ['2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016']
},
Lastly, I updated your series to show just the data points, which are then plotted on the y-axis:
series: [{
name: 'data by year',
data: [49.9,83.6,48.9,69.1,83.6,40.9,69.9,83,28.9,40.9,81.6,24.9,46.4]
}]
Here is what happens when a user clicks and drags their mouse cursor:
The shaded box is what they are selecting. Once they release the cursor, the chart will automatically adjust to show only what they chose. A "Reset Zoom" button will appear at the top right to allow them to go back to all years:
Update (July 19, 2016): I did some research on adding a simple slider element to this chart that allows users to choose from a range of years.
An updated version of my fiddle that shows this example chart with sliders can be found here: https://jsfiddle.net/brightmatrix/uvat8u05/.
The code to handle the sliders is shown below. I discovered that explicitly setting the slider values to integers using the parseInt() function solved a couple of problems:
You can correctly compare the slider values to make sure users can't choose an end year that is earlier than the start year.
The setExtremes() function correctly shows a single year when users choose the same start and end year.
All x-axis labels are shown at all times. Before I added parseInt(), some labels disappeared when users chose different values in the sliders.
Please be sure to read the comments I've left in both the HTML and Javascript panes, as I've included additional details on why I made certain code decisions.
// on change handler for both sliders
$('.mySlider').bind('change', function(e) {
e.preventDefault();
var chart = $('#container').highcharts();
// convert the slider values to integers to make sure setExtremes() works as expected
var slider1Val = parseInt($('input[name="slider1"]').val());
var slider2Val = parseInt($('input[name="slider2"]').val());
if (slider2Val < slider1Val) {
// warn the user if they try to choose an end year that is later than the start year
alert("You can't choose an end year that is earlier than your start year.");
} else {
// use setExtremes to set the x-axis ranges based on the values in the sliders
chart.xAxis[0].setExtremes(slider1Val, slider2Val);
}
});
I hope this information is helpful for you.

Why is "data" not a dictionary

I'm trying to parse JSON that I'm getting from an API using SwiftyJSON and it's giving me this error:
Optional(Error Domain=SwiftyJSONErrorDomain Code=901 "Dictionary["data"] failure, It is not an dictionary" UserInfo={NSLocalizedDescription=Dictionary["data"] failure, It is not an dictionary})
The JSON:
{
"status": 200,
"error": "",
"data": {
"cursusses": [
{
"cursus": {
"curId": 1,
"curNaam": "Lightroom Tips & Tricks",
"catId": 1,
"curInfo": "Praktische en korte Tips en Tricks om sneller en prettiger met Lightroom te kunnen werken.",
"curThumbnail": "lr5-tips-en-tricks.jpg"
}
},
{
"cursus": {
"curId": 2,
"curNaam": "Lightroom Fotobewerkingen",
"catId": 1,
"curInfo": "Per video wordt er in deze cursus een nabewerking uitgevoerd op een foto. Een leerzame manier om te zien hoe je in de praktijk foto's kunt nabewerken terwijl je daarnaast veel praktische tips krijgt over het gebruik van Lightroom 5.",
"curThumbnail": "lr5-bewerkingen.jpg"
}
},
{
"cursus": {
"curId": 3,
"curNaam": "Photoshop Fotobewerkingen",
"catId": 2,
"curInfo": "Per video wordt er in deze cursus een nabewerking uitgevoerd op een foto. Een leerzame manier om te zien hoe je in de praktijk foto's kunt nabewerken terwijl je daarnaast veel praktische tips krijgt over het gebruik van Photoshop.",
"curThumbnail": "photoshop-cc.jpg"
}
},
{
"cursus": {
"curId": 4,
"curNaam": "Basiscursus Lightroom 5",
"catId": 1,
"curInfo": "Leer de basisvaardigheden voor het werken met Adobe Photoshop Lightroom. Over het werken met catalogussen, importeren, het selectieproces, de nabewerking en het exporteren.",
"curThumbnail": "basiscursus-lightroom-5.jpg"
}
},
{
"cursus": {
"curId": 5,
"curNaam": "Photofacts Academy",
"catId": 3,
"curInfo": "Toelichting over het gebruiken van de Photofacts Academy website.",
"curThumbnail": "photofacts-academy.jpg"
}
},
{
"cursus": {
"curId": 6,
"curNaam": "Lightroom 5 web module",
"catId": 1,
"curInfo": "Met de Lightroom web module kun je eenvoudig van je foto's een online galerij maken.",
"curThumbnail": "lr5-web-intro.jpg"
}
},
{
"cursus": {
"curId": 7,
"curNaam": "Photoshop Tips & Tricks",
"catId": 2,
"curInfo": "Praktische tips voor het gebruik van Adobe Photoshop CC.",
"curThumbnail": "photoshop-cc-splash.jpg"
}
}
]
}
}
I'm currently trying to use this block of code to parse the data, this function is called in the completionHandler of an Alamofire request:
func succesCurResponse(let response : Response<String, NSError>) {
if let value = response.result.value {
let json = JSON(value)
let error = json["error"].stringValue
print(json["data"].error)
if(error.isEmpty) {
for(var i = 0; i < json["data"]["cursusses"].count; i++) {
let name = json["data"]["cursusses"][i]["cursus"]["curNaam"].stringValue
let id = json["data"]["cursusses"][i]["cursus"]["curId"].intValue
let catId = json["data"]["cursusses"][i]["cursus"]["catId"].intValue
let info = json["data"]["cursusses"][i]["cursus"]["curInfo"].stringValue
let thumbnail = json["data"]["cursusses"][i]["cursus"]["curThumbnail"].stringValue
let newCur = Cursus()
newCur.ID = id
newCur.name = name
newCur.info = info
newCur.thumbnail = thumbnail
}
}
else {
print(error)
}
}
}
Any suggestions?
Sorry, I don't know Swift. But the following Objective-C code will help you to resolve your issue.
Objective-C :
NSArray *cursussesArray = json[#"cursusses"];
for (NSDictionary *singlecursusseDict in cursussesArray) {
NSLog(#"%#", singlecursusseDict);
NSDictionary *cursus = singlecursusseDict[#"cursus"];
}
I give a try in Swift
let cursussesArray:NSArray = json[“cursusses”]
for singlecursusseDict: NSDictionary in cursussesArray {
print(singlecursusseDict)
cursusDict: NSDictionary = json[“cursus”]
print(cursusDict)
}

Highcharts : compare current value/previous value to get the rate

let me know how to get the difference between my current value "this.y.toLocalString()" and the previous value ? I would like to know the rate of change between this 2 values.
var x = document.getElementById("people2").selectedIndex;
var y = document.getElementsByTagName("option")[x].id;
//Charts
var db = data.dataevolution[x]
$('#container').highcharts({
chart:{
type:'column',
},
xAxis:{
categories: [
'2005','2006','2007','2008',
]
},
yAxis: {
min: 0,
title: {
text: 'Nombre'
},
labels: {
formatter: function() {
return this.value.toLocaleString();
}
}
},
tooltip: {
formatter: function() {
return 'Le nombre de <b>' + this.series.name + '</b> est de <b>' + this.y.toLocaleString() + '</b>, en '+ this.x +'<br>soit une évolution de ' ; }
},
series: [
{
name: [db.metier],
data: [db.annee2005,db.annee2006,db.annee2007,db.annee2008]
},
]
});
You can get the prevous point like:
tooltip: {
formatter: function() {
var prevPoint = this.point.x == 0 ? null : this.series.data[this.point.x - 1];
// do stuff with it
}
}
Here's a fiddle example.

Highest value of y-axis is not shown

When using $('#container').highcharts('StockChart', { ... the highest value of the y-Axis is not shown. If I try it without StockChart, it is ok.
Example in http://jsfiddle.net/h5bSV/3/ the value 430 is missing.
Is there a possibility to show this label?
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function(data) {
// create the chart
$('#container').highcharts('StockChart', {
title: {
text: 'AAPL stock price by minute'
},
tooltip:{
formatter:function(){
return "open: " + this.points[0].point.open + 'close: ' + this.points[0].point.close + ' high: ' + this.points[0].point.high + ' low:' + this.points[0].point.low;
}
},
series : [{
name : 'AAPL',
type: 'candlestick',
data : data,
tooltip: { valueDecimals: 2}
}]
});
});
});
You need to set ShowLastLabel as true.

Resources