I have a Line chart done with dygraphs, all the data is added using a Datatable so It has a variable number of series and data points.
All I want to do is to specify each series color. I know I can use an array in the constructor like this.
colors:
["#7FFF00", "#00FFFF", "#008080", "#00BFFF", "#FFD700", "#FF69B42", "#20B2AA",
"#FF0000", "#FFFF00", "#FF1493", "#000080", "#00FF00", "#6B8E23", "#00FA9A",
"#B0C4DE", "#F0E68C", "#DAA520"]
,
But as I said before the number of series is variable and unknown. I know I can update the options of a specific series like this:
g.updateOptions({
'S1001': {
strokeWidth: 10,
drawPoints: true,
pointSize: 4,
highlightCircleSize: 6,
}
});
Where S1001 is the name of the series, but I cant find any option to change its color.
How can I specify a series color if I know its Series ID?
Thanks in advance,
Pablo
EDIT: Well I found a workaround that works quite well. I can change
the colour of a series by setting the value in the "colorsMap_" and
then redrawing the graph so:
g.colorsMap_["SeriesID"] = "#FFFFFF";
g.updateOptions("Any option so the graph is redrawn");
Is there any way of redrawing or refreshing the graph that not
includes calling updateOptions?
thanks!
I came here while trying to solve this exact problem so I am adding a more up to date answer in the hope it helps someone else.
As of Dygraphs 2.0 (which contains breaking changes) it is possible to format individual series.
You can set in your options the following:
{
series: {
mySeriesName: {
color: "green", //Accepts CSS colour values.
//There are other properties you can set too:
strokeWidth: 3,
drawPoints: true,
pointSize: 5,
highlightCircleSize: 7
}
}
}
Replace 'mySeriesName' with the name given to a series in your CSV file or labels array.
You can try reading the documentation about series options but I don't personally find it all that clear. This demo was more helpful to me.
Maybe too late in answering but #pablito is correct that there should be an options of directly changing the color using updateOptions. Currently, this feature is not supported so we have to live with hacks. If we use the hack
g.colorsMap_["SeriesID"] = "#FFFFFF";
g.updateOptions({});
as suggested above, it works but the problem is that Dygraph does not remember the changes once you zoom in or out. To make Dygraph remember the changes, implement the following
g.colorsMap_["SeriesID"] = "#FFFFFF";
g.updateOptions({});
g.user_attrs_.colors[index] = "#FFFFFF"; // Where index is index number of the SeriesID
Dygraph.updateDeep(g.user_attrs_, g.user_attrs_);
You should define a greater number of colours than you have series in the initial constructor: extra entries beyond the number of series are ignored. later, when you add series, the extra colours will be used. Obviously, you will need to decide on some maximum number of series you want to handle.
Related
I have an issue trying to color my bar chart dynamically based on a JSON response.
I know this has been asked a number of times before but none of the answers I've found or tried to work thorugh have got me any closer to a solution.
I've created a quick JSfiddle to show the issue.
I have a number of other charts which are all generated from different JSON strings so have cut this down a lot to try and isolate the issue. I don't have the same problem with the other charts as the number of entries in the Label array in consistent with the number of colours. The offending piece of code is this;
DT_Labels.forEach(function(DT_LABELS, x) {
data.datasets.push({
label: DT_LABELS,
backgroundColor: backgroundColor[x],
data: JSON.parse(DT_Values[x]).map(Number)
});
});
DT_Labels only contains a single entry as the chart is a summarised list - In theory, this would work if I counted the number of DT_Values but if I do that, I can't get the correct data in the chart.
Any ideas how I can reformat this to generate the colours counter based on the number of Values instead of Labels?
Change:
backgroundColor: backgroundColor[x],
to:
backgroundColor: backgroundColor,
Result:
Why does this work?
The backgroundColor property can be specified in a number of ways. Typically it's set to a string, e.g. #abcdef but it can also be set to an array. In this case Chart.js itself will pick the colour from the array based on the index of the data point it is drawing.
I have a jqplot chart with 8 series. 7 of these are normalized in such a way that they look great with the default yaxis. The last series, however, needs to utilize a secondary yaxis. There are a ton of examples on utilizing a dual yaxis presentation when there are only two series.
So my question: Can you assign a specific series to a specific axis? If so, how?
Thanks in advance!
Ok -- I ended up finding an example in the api docs, where previously I was searching through the examples.
{
series:[
{color: '#ff4466', lineWidth: 5, label:'good line'},
{yaxis: 'y2axis', shadow: false, label:'bad line'}
]
}
The yaxis option is available per series, which allows a specific series to be assigned to a specific yaxis.
I hope this helps someone else.
I've been trying to add some custom yAxis labels to highcharts but I've not been able to so far. I've tried using formatter from a predefined array of strings and I've tried addAxis method but that doesn't get me the results I'm looking for.
Basically I have some numbers (lets say 4 and 4000) and I want to have these as my yLabels. However, I do NOT want the giant space between them. They need to be one right after the other and in ascending order. I cannot figure out how to do this leaving them as integers and I cannot figure out how to dynamically add them to highcharts as strings. I'm not even sure if this is possible
Any help would be greatly appreciated.
Here is the Y-axis label formatter documentation from Highcharts you're probably looking for. I wrote this fiddle to simulate the custom y-axis functionality you were wanting, although I'm not sure how you want to map those values to the x-axis data. This should give you a good starting point.
Code for reference:
$('#container').highcharts({
yAxis: {
categories: ['4', '4000', 'Foobar'],
labels: {
formatter: function () {
return this.value;
}
}
},
series: [{
data: [0, 1, 2]
}]
});
This stackoverflow question may also help although I noticed some dead links.
Say if my google chart data array looks like below,
Is there a way to target specific data set for google charts and do something.
something like if data = "13 dec 11 Tue" then the point of 56 should use a different color from rest...
["13 Dec 11 Tue",56],
["14 Dec 11 Wed",168],
["15 Dec 11 Thu",181],
["16 Dec 11 Fri",163],
["17 Dec 11 Sat",172]
...
Yes, it is possible, but it requires coding in javascript and cannot be done innately within Google Visualization save within tables using a ColorFormatter. Assuming you want to do it in a chart, you need to write code to do it.
Option 1: Create an Array of Colors
You can use the series configuration option of most charts to set the color of how each series is displayed.
For instance, if I have 3 series, then I can set the following option to turn the second one red:
series: [{}, {color: 'red'}, {}]
This will set no options for series 1 and 3, but change the color of series 2 to red.
So you can loop through your data with Javascript, and create an array of colors to assign to the various series. For instance, if you want any value in column 1 higher than 10 to be red, you could do it as follows:
var colorArray = {};
for(i=0;i<data.getNumberOfRows;i++) {
if(data.getDataValue(i, 1)>10)
colorArray.push({color: 'red'});
else
colorArray.push({});
};
Then you set the options as:
options = {series = colorArray};
Note: The above code has not been checked, it probably has errors since I just typed it out. If it doesn't work, correct my code, but the logic is appropriate.
Option 2: Move the Series
By default, each different column of data will have a different color. You can create a similar loop that checks the value of each item, and moves it to another series. Just create a different for loop that goes through the values you want to check, and if it finds what you're looking for, move the value in to that new series.
This is more complex, but it will give you more flexibility depending on what you want to do (since you have an entirely different series, you can customize it with different line size, or markers, or bar width, or whatever).
Whatever you pick to do, the best thing is to play with it and find something you like and that's easiest for you to code with your data.
I have a graph (http://jsfiddle.net/CfVZP/12/) with several series where the y-axis data is on two different scales. I'm using the yaxis for one scale and the y2axis for the other. I'd like to be able to display the legend for the series using the yaxis on the left side of the graph (location: 'nw') and the legends for the series using the y2axis on the right side (location: 'ne'). Is there a way to set different legend properties for different series?
Something like:
{series: [
showMarker: true,
color: "#00FF00",
legend: { // This doesn't actually work.
location: 'ne', // I'm looking for a substitute
} // for this functionality.
],
// Additional series with different legend locations
}
It doesn't seem possible to do this using the standard legend options (I tried playing with the position and the EnhancedLegendRenderere column options), but I was wondering if there is a different plugin that might be able to make this happen, or some other option that can be altered to cause the same result.
I'm not sure if this is going to be possible. Looking at the jqplot source code, each plot holds only a single Legend object - for this to work you would most likely need it to hold an array of them.
Is there a particular reason you would like to do this? It would be a little unusual to have a plot with multiple legends. Would it not suffice to have a single legend but give each series a good, descriptive name?