Using flot chart, I need to split the background into two colors. It is not going to be right down the middle, it will have a slight offset.
As of what I can see I can not find any documents on the internet that provide this information. If someone could point me in the right direction that would be great. Can someone put code in on how to do it if it is possible?
If I understand your question correctly, the easiest way is to use the grid markings option.
For example:
$.plot($("#placeholder"), [ d1 ], {grid: {
markings: [
{xaxis: { from: 0, to: 6 },color: "#C11B17"},
{xaxis: { from: 6, to: 100},color: "#FDD017"}
]}
});
Produces:
Fiddle here.
Related
I have a (Highcharts) graph with a percentage over time. The input for my series looks something like:
series: [{
name: "Percentage",
data: [
[1472515200000, 49],
[1472601600000, 48.83],
[1472688000000, 49.6],
[1472774400000, 48.77]
]
}]
However on the actual chart (areaspline) I get different values:
30 Aug, 48.91
31 Aug, 49.36
1 Sep, 49.6
2 Sep, 48.87
Not entirely sure why this is the case, I'm assuming it's because the graph has a datetime type and it's figuring out the average over time. Is there a way I can make the values exact as they are input? Couldn't find anything in docs
Thanks for any ideas/help/advice.
Upon further research, it seems like it's not so much a Highcharts problem but a React one. I seem to be getting different values on each render. Will look into this further and update for the curious.
Problem seemed to be related to React re-rendering and therefore recalculating my percentage values - not a Highcharts issue. Thanks for everyone who commented, bit of a wild goose chase.
Jamie, to make the input values be taken literally, you need to either leave the type value of your x-axis unset or change it to type: 'literal'.
Here's a basic fiddle I created with your data to show how it can be interpreted exactly as input (vs. converted to dates): http://jsfiddle.net/brightmatrix/vtLswcex/1/
$(function () {
Highcharts.setOptions({
lang: {
thousandsSep: ',' // adds comma for axis labels
}
});
Highcharts.chart('container', {
xAxis: {
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value,0);
}
}
},
series: [{
name: "Percentage",
data: [
[1472515200000, 49],
[1472601600000, 48.83],
[1472688000000, 49.6],
[1472774400000, 48.77]
]
}]
});
});
Note that I've added formatting for the x-axis labels, as well as a thousands separator in the Highcharts.setOptions() function, so that your labels will be more easily readable as trillions.
Does this help answer your question? If you are instead looking for a better way to format time-specific data, the comment by #morganfree is well worth looking into.
I need to draw a rather simple graph for a web project.
The data will always be the same, so the graph line will not change. However, I need to draw on top of the graph 2 projected lines, highlighting some aspect of the graph. These lines will change depending on some variable.
Here is what I am trying to achieve:
I looked at Chart.js, Chartist and a few other libraries but did not see any examples that will draw those projected lines that I need.
Can someone please point me to a library which can accomplish this?
You can achieve it with highcharts.
I have found some almost exactly suiting example and slightly modified it:
http://jsfiddle.net/mt2becws/1/
Below there are calls setting "crosshair" after some time:
setTimeout(function() {
addCrosshair(3,14.5);
}, 1000);
setTimeout(function() {
addCrosshair(2,5.7);
}, 2000);
And the part of the code really doing it is:
function addCrosshair(x,y) {
chart.xAxis[0].addPlotLine({
id: 'xPlotLine'+x,
value: x,
width: 1,
color: '#C0C0C0'
});
chart.yAxis[0].addPlotLine({
id: 'yPlotLine'+y,
value: y,
width: 1,
color: '#C0C0C0'
});
}
Managed to do this using D3, by following this example here My Favorite tooltip method for a line graph
Had to modify a few things, like the positioning of the tooltips (also using divs for this so I can also style them) and stop the projected x line where it meets the graph path, amongst other things.
But here is a snapshot of the result:
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.
I need a javascript library where I can really easily display two dimensional data in the form of a line chart. I need to display discontinuous lines. I've looked at a few libraries, but they do much more than I want. I tried with Rickshaw, but it accepts only a series.
Let's say I have this data:
long_short_data = [
{
key:'round_1_1',
color:"#468966",
values:[
{
label:"user_0",
value:31
},
{
label:"user_1",
value:93
}
]
},
{
key:'round_1_2',
color:"red",
values:[
{
},
{
label:"user_1",
value:34
}
]
}
];
Here I want that the round_1_2 basically to start from the second tick. I've used this data with nvd3's stackedmultibarcharts, but I need to represent it in the form of line chart/time series.
I've found an answer here. If anybody else has the same problem you will understand how the data is constructed if you check out the documentation.
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.