I am trying to make my categories span across multiple data points in Highcharts. Here is an example fidde: http://jsfiddle.net/pn9qvz7v/
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
series: [{
data: [1, 2, 3, 4, 5, 6]
}]
});
});
In my example, I'd like for the "Jan" category to span across the 1 and 2 data points, the "Feb" category to span across the 3 and 4 data points, and the "Mar" category to span across the 5 and 6 data points. Is there an easy way to do this?
Thanks.
You can manipulate the x values of your data to achieve this.
Instead of:
data: [1, 2, 3, 4, 5, 6]
Supply x/y pairs. The x value is the category index, and in this case, you need to provide one x value below the category index, and one above:
data: [
[-0.25,1],
[0.25,2],
[0.75,3],
[1.25,4],
[1.75,5],
[2.25,6]
]
Updated fiddle:
http://jsfiddle.net/pn9qvz7v/1/
Though, if you are using dates, why not just use a datetime x axis type, and provide the actual dates?
http://api.highcharts.com/highcharts#xAxis.type
Related
I am trying to highlight a single set of values in a c3.js stacked bar chart. Following this example I can change the color of a single bar in a non-stacked bar, but I can't figure out how to identify the indexes of a single stack.
My JS is:
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
columns: [
['x', "1ST", "2ND", "3RD", "4TH"],
['A', 6, 8, 2, 9],
['B', 3, 4, 1, 6],
['C', 4, 4, 2, 4]
],
type: 'bar',
groups: [
['A', 'B', 'C']
],
colors: {
A: '#666666',
B: '#cccccc',
C: '#428bca',
},
order: 'asc'
},
axis: {
x: {
type: 'category'
}
}
});
And the approach of the example is to do:
color: function (color, f) {
return f.index === 4 ? "#dd0" : "#ddd";
}
Work in progress JSFIDDLE.
How can I get the indexes of the 3 values of a single stack and then use them to change their colors? For example, if I want to highlight "2ND" by changing the colours to a set of reds?
Adapted from the example here -->
http://c3js.org/samples/data_color.html
color : function (color, d) {
return d.index && d.index === 2 ? "#dd0" : color;
},
https://jsfiddle.net/kmjpg30c/3/
d.index gives you the index of the stack - however, in your example there is no index 4 as the indexing starts at 0, so you have [0,1,2,3] as a possible range
So test against the index and return a new color if it matches and if it doesn't return the color that is originally passed in.
(the d.index test is present as the color function gets used by other routines that pass in just a string indicating the dataset ("A", "B", "C" in your example), so you need to test for the existence of the fields you need in d first.
if you want to highlight just one part of the stack use the .id field as well e.g. d.index === 2 && d.id === "A"
I have a dictionary called dict that looks as follows:
var dict = {
'Ex': 6,
'C': 6,
'blue': 2,
'car': 2,
'yellow': 2,
'X': 4,
'X3': 2
};
I would like to plot an histogram of it, with the keys as the labels of the horizontal axis and the values of the dictionary that are the frecuency as the vertical axis, I tried:
<canvas id="myChart" width="100" height="100"></canvas>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [],
datasets: [{
label: '# Frecuencies Words',
data: [],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
However the problem is that I am not sure of how to proceed to use the values of the dictionary to perform the graph, I would like to appreciate any suggestion to achieve this, I built the following jsfiddle to explain better the situation: https://jsfiddle.net/xbbc677o/
You're not doing bad, all you need now is to map that object into the data and label fields. Let's begin with labels
Object.keys(dict) returns an array of all the keys from dict
So we put
labels: Object.keys(dict)
Now we need the values for the data array, with Object.keys and map we can do it easily, we use Object.keys to get an array of all the keys in dict and then map to get each value from it's key, like this:
data: Object.keys(dict).map(function (key) { return dict[key]; })
Working fiddle
Both Object.keys and map are part of the ECMAScript 5 specification, so this wont work on ES3 (IE 8 or lower), but you can get pollyfils for both of those functions:
Array.prototype.map polyfill
Object.keys polyfill
I am using recently d3.js and I came up with an problem, for which I can´t find an solution.
I need an stacked Bar/column where I can configure how long an Category (a part of one line) is and which color it has. This length is computed from an formula. This formula is the same for the whole Line and chart.
I would like to knew how to assign an custom length to that categories and colors.
At the beginning I only have a Matrix, whose data is used by the formula.
I suppose I have to do something with the data. -Attribute. Btw, the formula takes also the graph height, and width into account so it is possible that the data has to be recomputed at runtime.
I can show no code, since I have no idea where to begin.
EDIT:
Here it´s written that you have to use .stack() to use stacked bars. And [here][2] is .stack() used, but here it´s not. I don´t get why those in link3 don´t need the stack() function?
Furthermore it´s written that I have to provide data in
var dataset = [
[ { x: 0, y: 5 },
{ x: 1, y: 4 },
],
[
{ x: 0, y: 10 },...]
form, my data is like that matrix = [[val1,val2,.....,val10], [val1,...val10]]
The data in one inner Array should be stacked, that Martix has around 5k entries. Do I have to make an Matrix with 10 inner Array where each Array consists of 5k entries?
And at last, that values are from 0 to 1, is it better to control the height of the bars with style or with scale?
D3js' examples are all really great. There is a ton of them, and they all contain the source code and sample data.
I would start there and see if you can find one to your liking.
This one is my best guess of the closest one to what you want.
He rearranges the width of the bars, so he already supplies you with a function to change the size, you just have to make it work with your data.
Update
In the first example you linked to, the .stack() function is used for data that is already in the format that you provided in your answer. Therefore, that function won't be of much help to you.
The second example he states that he avoids using the .stack() function because you can do it manually.
This example doesn’t use d3.layout.stack because it’s easy to just stack each state independently via array.forEach.
I'm not sure what you mean by one inner Array should be stacked.
In the examples, the data is stacked like so (I changed the names and added comments for clarity):
var dataset = [
// Columns a, b, and c
{ a: 5, b: 10, c: 22 }, // row 1
{ a: 4, b: 12, c: 28 }, // row 2
{ a: 2, b: 19, c: 32 }, // row 3
{ a: 7, b: 23, c: 35 }, // row 4
{ a: 23, b: 17, c: 43 } // row 5
];
var bars_dataset = [
// Stacked Bar #1
[
{ x: 0, y: 5 }, // row 1, column a
{ x: 1, y: 4 }, // row 2, column a
{ x: 2, y: 2 }, // row 3, column a
{ x: 3, y: 7 }, // row 4, column a
{ x: 4, y: 23 } // row 5, column a
],
// Stacked Bar #2
[
{ x: 0, y: 10 }, // row 1, column b
{ x: 1, y: 12 }, // row 2, column b
{ x: 2, y: 19 }, // row 3, column b
{ x: 3, y: 23 }, // row 4, column b
{ x: 4, y: 17 } // row 5, column b
],
// Stacked Bar #3
[
{ x: 0, y: 22 }, // row 1, column c
{ x: 1, y: 28 }, // row 2, column c
{ x: 2, y: 32 }, // row 3, column c
{ x: 3, y: 35 }, // row 4, column c
{ x: 4, y: 43 } // row 5, column c
]
];
As I think you figured out already, there are three rows in the bars_dataset because there are three columns in the dataset. If this is how you want your bars to be stacked, then yes, you will have a bars_dataset with 10 arrays that consist of ~5k objects.
However, if you want the first array with 10 values in your matrix to make up the first bar, and so on... Then you will need to have a bars_dataset of ~5k arrays with 10 objects in each of them.
From the way you worded your question, it seems you want the second solution, and not the first. Whichever way you plan on stacking them, let me know and I will update my answer with some sample code.
var data =[ { label: "Foo", data: [ ["2012-09-01", 1], ["2012-10-01", -14], ["2012-11-01", 5] ] },
{ label: "Bar", data: [ ["2012-09-01", 13], ["2012-10-01", 11], ["2012-11-01", -7] ] }
];
var options = {
series: {
lines: { show: true },
points: { show: true }
}
};
<div id="placeholder"></div>
<script>
$.plot($('#placeholder'), data, options);
</script>
I am confused why the graph is not getting plotted with the data. Ignore my novice knowledge on flot. Can anyone give me an idea how i should be able to do it.
Are you sure flot can handle values formatted as strings? You should probably convert the strings to real dates or milliseconds...
You can use the moment.js library:
var data =[ { label: "Foo", data: [ [moment("2012-09-01","YYYY-MM-DD").toDate(), 1], ...
Flot does not automatically parse dates. If you want those to be used as-is then you should include the categories plugin. If you actually want to treat them as dates then you should convert them to dates as Nikos suggested and then take a look at the time plugin.
What's the easiest way to get my data to show in HighCharts/HighStock? I'm populating the javascript arrays from another source, but I don't know how to assign my javascript array data to the series. I've looked at other examples and posts, but I just don't get it. Any helpful pointers or links to tutorials would be appreciated.
arClosingDates[0] = '2/1/2013'
arClosingDates[1] = '2/2/2013'
arClosingDates[2] = '2/3/2013'
arClosingDates[3] = '2/4/2013'
arClosingDates[4] = '2/5/2013'
arClosingPrices[0] = 3.23
arClosingPrices[1] = 3.28
arClosingPrices[2] = 3.56
arClosingPrices[3] = 3.90
arClosingPrices[4] = 3.23
$('#Chart1').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'Test Stock Price'
},
series : [{
name : 'Test',
data : [arClosingDates[],arClosingPrices[]],
tooltip: {
valueDecimals: 2
}
}]
});
You are formatting the data array incorrectly. Try this instead:
var arClosingData = [
[Date.UTC(2013, 1, 1), 3.23],
[Date.UTC(2013, 1, 2), 3.28],
[Date.UTC(2013, 1, 3), 3.56],
[Date.UTC(2013, 1, 4), 3.90],
[Date.UTC(2013, 1, 5), 3.23]
];
...
series: [{
name: 'Test',
data: arClosingData,
tooltip: {
valueDecimals: 2
}
}]
jsFiddle example using your data
EDIT: I forgot that the month parameter in DATE.UTC(year, month, day) expected 0-11 instead of 1-12.