I am trying to create a progress bar for surveys. Depending on the progress, I would like to assign colors dynamically to each data point. I have managed this, but it seems that the functions takes ages to run. At least, that is my interpretation as I am new to much of this.
So my question is: How can I assign colors to the data points more effectively? I am not sure how to reference to the different colors within Highcharts if I create and store multiple colors in one function.
http://jsfiddle.net/oskjerv/v4Lx69Lv/
Hope my question makes sense to some/any of you.
All the best.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: ''
},
xAxis: {
categories: [''],
visible:false,
},
yAxis: {
min: 0,
visible:false
},
legend: {
reversed: true,
enabled:false
},
plotOptions: {
series: {
stacking: 'normal',
animation:false
}
},
labels: {
enabled: false
},
tooltip: {
enabled: false
},
exporting:{
enabled:false
},
credits:{
enabled:false
},
series: [{
name: 'Del1',
data: [.20],
color: getColourFirst()
}, {
name: 'Del2',
data: [.20],
color: getColourSecond()
}, {
name: 'Del3',
data: [.20],
color: getColourThird()
},
{
name: 'Del4',
data: [.20],
color: getColourFourth()
},
{
name: 'Del4',
data: [.20],
color: getColourFifth()
}]
});
function getColourFirst(){
var colour1=['#D5D4D4'];
return colour1;
}
function getColourSecond(){
var colour2=['#D5D4D4'];
return colour2;
}
function getColourThird(){
var colour3=['#87bdd8'];
return colour3;
}
function getColourFourth(){
var colour4=['#87bdd8'];
return colour4;
}
function getColourFifth(){
var colour5=['#87bdd8'];
return colour5;
}
<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: 200px; height: 100px; margin: 0 auto"></div>
The main problem here is that you are saying color: ['#87bdd8']. This is not a valid format. In short you are looking for color: '#87bdd8' instead. See this updated JSFiddle for a demo, and see the Colors description for more detail on the syntax.
When it comes to how to solve the colors there are a million ways to do it, but I'd probably suggest something that uses an index instead of all separate unautomatable function names. For example:
myColors = ['#D5D4D4','#D5D4D4','#87bdd8','#87bdd8','#87bdd8'];
function getColor(index) {
return myColors[index%myColors.length];
}
Or see this JSFiddle demonstration.
Related
i have a big data set to display ( around 150 category) with a library named vue-apexchart my problem is that i cant find a way to make the graph scrollable on xaxis without having a broken display the following image will explain my problem better
as you can see having too many categories leads to an unreadable chart
can you please help me
i have tried to make a scrollable div, the probleme still remains ( unreadable xaxis )
here's my chartOptions object :
chartOptions: {
chart: {
type: "bar",
height: 350,
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "55%",
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
stroke: {
show: true,
width: 2,
colors: ["transparent"],
},
xaxis: {
categories: [],
},
fill: {
opacity: 1,
},
},
I think there are two strategies that you could adopt here. In my opinion, the second one is better.
1. Horizontal bar chart
If you do not have strict constraints in terms of UX/UI, a possible solution might be to switch both axes...
plotOptions: {
bar: {
horizontal: true
}
},
... and give your chart much more height:
chart: {
type: 'bar',
height: 2500,
},
Doing that would allow you to use the natural vertical scrolling of your browser.
let data = [];
for (let i = 1; i <= 150; i++) {
data.push({x: `Category ${i}`, y: i});
}
let options = {
series: [{
name: 'Series',
data
}],
chart: {
type: 'bar',
height: 2500
},
yaxis: {
labels: {
style: {
fontSize: '10px'
},
offsetY: 3
}
},
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
enabled: false
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
All categories are visible. This is not very handy, though.
2. Zoom, pan and tick settings
Zooming and panning are useful features. They are available by default in the toolbar, but this toolbar does not appear immediately when your xaxis has categories. To enable the toolbar in this case, you have to change xaxis.tickPlacement from 'between' to 'on' (see Zoom on Category Bar Charts – ApexCharts.js).
Since you have a lot of categories, it is also a good idea to limit the number of visible labels with xaxis.tickAmount.
xaxis: {
tickPlacement: 'on',
tickAmount: 25
},
Thanks to the zoomX() method, you can decide to display your chart with only a subset of your data. The rest is still accessible via zooming and/or panning.
let data = [];
for (let i = 1; i <= 150; i++) {
data.push({x: `Category ${i}`, y: i});
}
let options = {
series: [{
name: 'Series',
data
}],
chart: {
type: 'bar',
height: 350
},
xaxis: {
tickPlacement: 'on',
tickAmount: 25
},
dataLabels: {
enabled: false
}
};
let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();
chart.zoomX(37, 71);
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
I have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.
Does anyone know a solution?
$(function () {
var barOptions = {
xaxis: {
tickDecimals: 0
},
yaxes: [{
position: "left"
}, {
position: "right"
}],
colors: ["#36c6d3"],
grid: {
color: "#888888"
},
tooltip: {
show: true,
content: "Uge %x, %s: %y"
}
};
var dataset = [{
data: occData.data,
label: occData.label,
yaxis: occData.yaxis,
lines: {
show: true,
lineWidth: 1,
}
}, {
data: houseData.data,
label: houseData.label,
yaxis: houseData.yaxis,
color: 'grey',
lines: {
show: true,
lineWidth: 1,
fill: false
}
}];
$("#flot-line-chart-past").plot(dataset, barOptions);
});
I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:
you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
So write a function that distinguishes between each label you use for the two series, and return a different format string for each.
I have this fiddle JSfiddle
Here is the reproduced code:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
},
yAxis: {
categories: ['low','medium','high'],
title: {
text: 'expertise',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
series: [{
data: ['low','high','low','medium','medium']
}]
});
});
If you look at the fiddle the yAxis does not render and has a value of for every x category. I've been looking at the highcharts api, but I can't seem to get this right. The code makes sense to me but I'm obviously doing something wrong. Can someone point out why the YAxis is not displaying correctly?
As mentioned in my comment, you need to supply the numeric value of the category, not the category name.
In the case of categories, the numeric value is the array index.
Also, in your case, the way you are trying to plot the values, I would add an empty category at the beginning, otherwise your first category of low gets plotted as 0, which doesn't seem right.
So,
categories: ['low','medium','high']
Becomes
categories: ['','low','medium','high'],
And
data: ['low','high','low','medium','medium']
Becomes
data: [1,3,1,2,2]
Updated fiddle:
http://jsfiddle.net/jlbriggs/k64boexd/3/
Check this fiddle:
http://jsfiddle.net/navjot227/k64boexd/2/
Trick is to utilize the formatter function. You can use a similar formatter function on y-axis labels too if that's desired. Though it seems like you need it for data labels for this problem.
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
xAxis: {
categories: ['Heroku', 'Ruby', 'Lisp', 'Javascript', 'Python', 'PHP']
},
yAxis: {
title: {
text: 'expertise',
align: 'high'
},
labels: {
overflow: 'justify',
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function() {
if (this.y == 0) {
return 'low'
} else if (this.y == 1) {
return 'medium'
} else {
console.log(this.y);
return 'high'
}
}
}
}
},
series: [{
data: [0, 2, 0, 1, 1]
}]
});
});
In my opinion, it is kinda unlikely for a line graph to have a y-axis category, since it speaks more of amount or value. In your case, "low, medium, and high" speaks of ranges, with which a certain value can be assigned to any of it.
Thus, Highcharts accepts series data in numeric form. But you can work around it by setting ['low', 'medium', 'high'] in the category attribute of yAxis, then setting series data as an array of number corresponding to the index of the category, i.e. [0,1,1,2,...] and tweaking the tooltip to display the category instead of the y value using formatter attribute.
Here is the code:
$(function() {
yCategories = ['low', 'medium', 'high'];
$('#container').highcharts({
title: {
text: 'Chart with category axes'
},
xAxis: {
categories: ['Heroku', 'Ruby','Lisp','Javascript','Python','PHP']
},
yAxis: {
categories: yCategories
},
tooltip: {
formatter: function() {
return this.point.category + ': ' + yCategories[this.y];
}
},
series: [{
data: [0, 1, 2, 2, 1]
}]
});
});
Here is a working example : JSFiddle
i am making a web page where i am having many graphs like the ones here
http://vz.comxa.com/v2/
I am using highcharts JavaScript charting library. To make one chart you write the code like shown here http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-time-series/
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
and the html
<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; height: 400px; margin: 0 auto"></div>
Since my charts are placed in modals,does it mean i must have the javascript for each chart in the page header. Due to the sheer number of charts involved,i reckon that's be a lot of JavaScript. What technique can i use to reduce the lines of javascript i will write?.
When building multiple charts you can reuse same options. One way could be to use Highcharts.merge function to add new options to the common ones.
Demo with Highcharts.merge in use - 2 charts: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
More complex option could be to create a custom series type with changed default options and optionally more features if required.
Demo - Sprakline: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/sparkline/
I am trying to display values which I am getting dynamically. In the below code I am trying to store the values in array and I am trying to use the array values in "series: data".
Nothing is getting displayed in the graph.
I know this is very simple question but I did not get any satisfactory answer when I googled it. Please help
var x = window.location.search.replace( "?", "" );
x = x.substring(3);
var array = x.split(","); // I am storing my dynamic values in this array
$(function () {
//alert(array); ----- I am able to see the values here
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Wireless Experience Meter'
},
subtitle: {
text: 'Sub - Time to Download'
},
xAxis: {
categories: ['Text'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Time (ms)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' ms'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Attempt 1',
//data: [635, 203, 200]
data : [array[0]] // I need to pass the variables here to get it displayed
}, {
name: 'Attempt 2',
//data: [133, 408, 698]
data : [array[1]]
}, {
name: 'Attempt 3',
//data: [973, 914, 4054]
data : [array[2]]
}]
});
});
You don't tell us what the variable array equals but since its generated from x.split(","), it's elements are going to be strings and not the numeric values Highcharts needs.
So convert it with parseInt or parseFloat:
var numericData = [];
for (var i = 0; i < array.length; i++){
numericData.push(parseFloat(array[i]));
}
...
series: [{
name: 'Attempt 1',
data : numericData
},
...
[array[0]] is not an array, that looks like console output not javascript. But [[0]] or [0] technically would be. However, since a call to array (array(0)) generates an array then I think you want data: array(0).
Outside shot at data : [array(0)] if you didn't show the example data correctly. I've never used HighCharts so I don't know what it's expected but I still go with data : array(0)