I'm implementing this charting solution and I'm a little stuck. If I have to line charts in the same graph, as in the first example in the link, but there seems to be a problem with the y-axis. It doesn't show the right ratio between the first and second line chart. See the two images below:
Does anybody have an idea of how to solve this?!
Thanx!
P
I think I understand your problem: the scale of each of the lines on the graph are independent, and the raphael line graph js file is looping through the table data and setting each line's max according to its max value. My recommendation to anyone thinking of using raphaeljs for graphing purposes is to use Graphael instead.
If you REALLY want to fix it, change line 366 of the raphael_linechart in the example files to
max = this.max,
Then add a function that gets the data, and changes the this.max variable to the max value of all the data:
changeMaxValue: function(id) {
var table = helpers.loadTableData(id);
var max = Math.max.apply(Math, table.data);
if(max > this.max) {
this.max = max;
}
},
Pass the id of each table data piece before you actually graph the lines. I didn't test this, so you will have to work out the kinks.
Related
I cannot find a way to get the dimensions nor the position of the hAxis of my Column chart.
I've tried those but none work (all return null).
cli.getBoundingBox('hAxis#0#gridline');
cli.getBoundingBox('hAxis#gridline');
cli.getBoundingBox('hAxis#0');
cli.getBoundingBox('hAxis');
Posting my code would be complicated, it's a Angular 5 app, so there is components and services everywhere. But I figured out I can get the height of what I want by doing so
function getHeight(cli) {
var chartBox = cli.getBoundingBox('chart');
var areaBox = cli.getBoundingBox('chartarea');
return chartBox.height - areaBox.height;
}
I will try to explain my problem as much accurate as possible. I am looking for a javascript chart library filling the two following conditions:
From an ajax request retrieving time series,
display dynamically data when changing the time window.
such as it is perfectly done on highstocks: http://www.highcharts.com/stock/demo/basic-line
And
plot an horizontal line corresponding to the mean,
changing when the user update the time window on the chart.
Actually it is possible to display an horizontal line. But they are fixed on the whole data and do not change accordingly when the time window is modified:
http://www.highcharts.com/stock/demo/yaxis-plotlines
I am quite new to the topic and would like to know if it'sp ossible to modify Highstock classes to have such a result. Or maybe some other js libraries exists?
Using a combination of the answer here:
Highchart, get total of visible series data after setExtremes
And an example of dynamic average using all visible series that I made for a previous question, here:
http://jsfiddle.net/jlbriggs/gweuLegq/
I put together this example, using the afterSetExtremes event, like this:
xAxis : {
events:{
afterSetExtremes:function() {
var ext = this.getExtremes();
getAverage(this.chart, ext.min, ext.max, show, width, avgColor, dashStyle);
}
}
},
Working example here:
http://jsfiddle.net/jlbriggs/c93543yL/
The idea is:
1) capture the afterSetExtremes event
2) get the resulting axis min and max
3) loop through the series data
4) if a point is between the min and max, increment the count, and add the
point's y value to the sum
5) calculate the average accordingly, check for existence of average series, if exists, update, if not, add
It could as easily use a plot line that you add/remove as needed instead of a series, but I like having it as a series so that it has a legend entry.
The Flot FillBetween plugin works nicely with line charts. However I need to smooth out the lines and make them more curvy. I have seen the CurvedLined plugin and the Spline plugin but both do not work properly with the fillbetween plugin.
Is there any way to use a two curved line/Spline series and fill the area between them? Something like the image below. Also fills any enclosed area between the two series any time when one crosses the other.
I am unfamiliar with the FillBetween plug-in. I am going to focus on aswering the smoothing part.
I had a similar problem where those smoothing options did not work for me either. I used an external plug-in to make the smoothing. It's name is smooth.js and it worked for me.
Smooth.js recives the data array and returns a function. To get a "smoothed point", apply the function to any value between 0 and the length of the array. The idea is to obtain more points than the original dataset.
For example, to smooth an array of values named test:
//obtaining smoothing function
var s = Smooth(test, {
method: Smooth.METHOD_CUBIC,
});
//obtaining smoothed data
//asking for 10 "smoothed points" per each point in the original dataset
test_smoothed = [];
for (var i = 0; i <= test.length; i = i + .1) {
test_smoothed.push(s(i));
}
I made a JSFiddle with this example.
You can use this plug-in and pass the smoothed data to flot and then use the FillBetween.
I'm toying with the Protovis Histogram example and I was wondering if it was possible to change the values of the x-ticks while keeping the histogram the same. Right now the x axis varies from 0 - 5 but what if I wanted to keep the whole histogram the same but just change the x-axis ticks to vary from 10 - 15? Is that possible?
I think the change should be somewhere in the following code:
vis.add(pv.Rule)
.data(x.ticks())
.left(x)
.bottom(-5)
.height(5)
.anchor("bottom").add(pv.Label)
.text(x.tickFormat);
but I'm not really sure what the code is doing. Any help greatly appreciated. Thanks!
hi Michael in that link at bottom of the page you could see the code
var experiment = {
trials: 10000, // number of trials
variables: 5 // number of random variables
};
experiment.values = pv.range(experiment.trials).map(function() {
return pv.sum(pv.range(experiment.variables), Math.random);
});
just try to change the variables parameter to 10 or your required value. it should work..
I try to create legends for jqPlot but they will just show the max and min values for y slope. Just like 'Max: 16 Min:2', but I can't figure out how. E.g, I tried giving labels as
var labels = [{'Max':16}, {'Min':2}];
But nothing seems to be working. Do you know any quick method or I should create my own special renderer for this?
Thanks.
ufucuk.
I had the same problem and I solved it doing the following:
$("#hereGoesMyMinValue").text($("#myGraphId").
children(".jqplotxaxis").children(":first").text());
//first value shown
$("#hereGoesMyMaxValue").text($("#myGraphId").
children(".jqplot-xaxis").children(":last").text());
//last value shown
Note that this will be done only once. Here explains how to sync them
By the way, you also can do the following:
var title=$("#selecting_period").children(".jqplot-title").text();
var coolTitle=
title+": Showing "+ $("#myGraphId").children(".jqplot-xaxis").
children(":first").text()+" to "+$("#myGraphId").
children(".jqplot-xaxis").children(":last").text();
$("#myGraphId").children(".jqplot-title").text(coolTitle);