I'm pulling some data out of graphite, transforming it and using epoch.js to display it as a realtime line chart.
$('#graph').epoch({
type: 'time.line',
data: data,
axes: ['left', 'right', 'bottom']
});
This successfully displays the graph, but both the lines are black. The graph in the epoch example has different colours for each line, but I can't find any reference of how to do this in the docs or work out how it is doing it from the example's source.
How can I change the colours of the lines?
I've faced the same issue and it took me quite some time before I realized what's wrong.
In my case I forgot to add class="epoch category10" to the div that has the graph in it. E.g.
<div id="area" class="epoch category10" style="height: 200px;"></div>
It seems that the examples on the basic and real-time chart pages are missing this class definition. The getting started page however specifically states the above line.
If you want to set colors layer per layer, this trick works:
https://github.com/epochjs/epoch/issues/137#issuecomment-177531945
var layer_num = 0 # insert here the number of the layer
var catname = "category2" # insert here the css class category
chart.getVisibleLayers()[layer_num].className = "layer " + catname
Visit this link for more informations about category colors. By default, category10 is used, so "category1" is #1f77b4, "category2" is #ff7f0e etc
Related
I present bar charts in datatables.net using the configuration suggested by #KevinDasilva at https://stackoverflow.com/a/51749815/12417398 ... What I need is to add a properly placed red bar to either this bar chart, or to add an under or overlapping second chart with one-bar in a different color - I can find no documentation on this.
The datatables.net table and chart looks as follows:
Rather than use aocolumns, I leave this datatables config-line out and add text to the data directly in json - which looks like:
[{"Color":"2-Yellow","Indicator":"Export per Capita","TEP Chart":"<img src=\"Export.per.Capita.jpg\">","Chart":"<span class=\"spark\">0. ,0. ,0.25,0.19,0.25,0.31,0.19,0.5 ,0.44,0.67,0.67,0.87,1. <\/span>"},{each line repeats ...}]
Any experience, suggestions, or working examples are greatly appreciated.
I am pleased to say this was answered with an hour and the two libraries work well together ... I hope it helps others because this is a very interesting tool with this addition.
This uses the jQuery Sparklines library.
If you use a 2-element array for each data point, you can create a stacked bar chart. You can then set all of the values to zero for one value in each pair, so there are never any actual stacks.
This lets you control the colors, as if you had painted specific bars a different color.
Try this outside of DataTables, as a demo:
<span class="bar1"></span>
$('.bar1').sparkline([ [1,0], [2,0], [0,3], [4,0] ], { type: 'bar' });
Note the [0,3] array, which will generate a red bar. All the other bars will be blue. These are the default colors:
You can specify custom colors:
$('.bar1').sparkline([ [1,0], [2,0], [0,3], [4,0] ],
{ type: 'bar', stackedBarColor: ['red', 'green'] });
For additional features see the documentation here.
Note:
Stacked bar charts require version 2.0 or higher.
I am working with Dygraph in python. I want to remove a label from the legend. If you look into the example photo attached bellow you can see "A:2.77 B:2.29". Is it possible to remove the B label, but still use its values and to be displayed in the graph?
Currenlty, in my project self.page().runJavaScript(f'g.updateOptions({{file:{file},labels:{labels}}});') is getting the calculated labels and their values and displaying them. However, if I go and remove part of it , it will be removed from the graph as well.
self.exampleCalculated.emit({'Price (Next 2 days)': example_forecast['price1'][0:48], 'SystemPrice': systemPrice[0:48], 'Other': otherPrice[0:48]})
Example
I'm using MetricsGraphics.js to plot a simple time series. I'm having trouble linking a "line" chart with a "point" chart using the linked: true option. The linking works when both charts are of the same type, but not when they're different.
The following jsfiddles show this. In the first, when you hover over data points in one chart, the points in both charts are highlighted. In the second, hovering over data points in one chart doesn't affect the other.
Both charts have chart_type: 'line': jsfiddle.net/7jc1h8vv
One chart has chart_type: 'point', the other chart_type: 'line': jsfiddle.net/7jc1h8vv/1
Question: How can I link a "point" chart and a "line" chart together? Alternatively, if that can't be done, then how can I create data symbols for each data point on the line in a 'line' chart, such that the two charts are effectively superimposed?
The MetricsGraphics.js library provides an option linked: true that will do the following, according to the doc:
Links together all other graphs whose linked option is set to true. When one graphic in that set is rolled over, the corresponding values in the other graphics are also rolled over.
See this example from the doc of two charts linked together.
I'm trying to implement highlight for a single section of line chart while hovering over this section. Under section I mean space between (in my case) vertical lines, which are representing separate date intervals depending on chart zoom level. The chart itself has dynamic data, which is being pulled from an endpoint with more detailed data, depending on date interval zoomed in.
During investigation I've found a plotBands property of x/yAxis. But the thing is, that this property only allows to set each plotBand manually.
So the question is, if there is something that will help me to do automatic creation of plotBands or similar hoverable/clickable stuff, for each separate time "interval"?
you can set the TestValue dynamically according to your needs and use something like this JSFiddle:
plotBands: [{
color: '#FCFFC5',
from: ($.TestValue)+1,
to: ($.TestValue)+2
},...]
I have a rendering problem when I have two column material Google charts on the same page. Basically, the first column gets partially drawn on the vertical line which corresponds to axis of the second chart. If I have only 1 chart - everything is OK.
Please take a look at the following screenshots to see the problem:
2 charts (problem): https://www.dropbox.com/s/9p0ji49kpv2vtl1/gc-svg-pb.png?dl=0
1 chart (no problems): https://www.dropbox.com/s/12rpxl23ojean2b/gc-svg-1.png?dl=0
It seems to be a problem with the different scales on the Y-axis. If you look at this example the problem is gone, because the widths of the Y-axis labels of both charts are equal: fiddle1
If you force the Y-axis label to a fixed width, using the vAxis.format option for example, the chart is also correctly rendered: fiddle2
You could try to define a usable format string (refer to the Google documentation for more information), but it seems like a bug in the Google API, see phts's answer for the support page.
You'd better to find/tell about your problem on Google Charts project page directly - https://code.google.com/p/google-visualization-api-issues/issues/list.
Here is the thing, the two tables are in the same line and their Y-axis unit confuses the charts styling. I mean;
There are two-digit numbers in the first case [25,34,33,45,...,26] and five-digit numbers in the second case [31209,43658,42007,...30177] These five-digit numbers become strings like 20K,40K...
Thus, problem is in that part. One solution can be formatting the numbers as #mhu suggested. Another solution can be using the ColumnChart type by changing the code part;
var chart = new google.visualization.ColumnChart(document.getElementById('traffic-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
and adding this to the options ;
hAxis: {viewWindowMode: 'maximize'}
https://jsfiddle.net/L0gxnywu/
Solution 2: You can change the div's sequence as;
<div id="requests-chart"></div>
<div id="traffic-chart"></div>
https://jsfiddle.net/3j4s1vfj/