I am trying to get those cool network graphs I saw on the cubism.js presentation where the RX was upside down on top and the tx was normal below.
The fact is that the only way I seem to get the chart drawing upside down is doing metric.multiply(-1) but then the values are negative so its not exactly ideal.
Any hint?
In the absence of a nice way to do this, you can replace the horizon chart formatter with one that just emits absolute values. You can do something similar with comparison charts too.
Something like this works :
var horizon = cubism.context().horizon();
var existingFormatter = horizon.format(); // Obtain the format function
var absoluteFormatter = function(value) {
return existingFormatter(Math.abs(value));
};
horizon.format(absoluteFormatter);
This will have the effect of still rendering the charts as a "negative" but will allow you to render your values as desired.
Obviously, you can adopt according to your needs.
Related
I'm beginner and try to use QCustopPlot.
I want to draw a real time chart.
I use this example code.
but I have so many questions:
1) how can I fixed yAxis to a specific int number (0 to 50)
2) how can I fixed xAxis? I mean I want to have a chart that in passing time, the plot moves. (not the xAxis or yAxis)
sory for my bad language.
It looks like these three links should help.
void QCPAxis::setRange ( double lower, double upper )
http://www.qcustomplot.com/documentation/classQCPAxis.html#a57d6ee9e9009fe88cb19db476ec70bca
void QCPAxis::moveRange ( double diff)
http://www.qcustomplot.com/documentation/classQCPAxis.html#a18f3a68f2b691af1fd34b6593c886630
QCPAxis Class Reference.
Manages a single axis inside a
QCustomPlot.
http://www.qcustomplot.com/documentation/classQCPAxis.html#details
Very similar functions exist in QWT, also.
the cpuplot example in QWT shows a scrolling realtime example. There isn't an online link that I can find for the examples, so you should download it and open the examples after you build it.
Hope that helps.
I'm using pyqtgraph for a live view of a camera acquisition program. Most of the times my images are composed of a lot of background noise and a signal of just a few pixels with higher intensity. For that reason, the part of the HistogramLUTItem that corresponds to the actual signal looks like a thin line and the noise is big next to it. Being able to plot the logarithm of the data would make the data to stand up more.
Is this possible?
I'm currently creating the histogram this way:
imagewidget = pg.GraphicsLayoutWidget()
self.p1 = imagewidget.addPlot()
self.img = pg.ImageItem()
self.p1.addItem(self.img)
self.p1.getViewBox().setAspectLocked(True)
self.hist = pg.HistogramLUTItem()
self.hist.setImageItem(self.img)
self.hist.autoHistogramRange = False
imagewidget.addItem(self.hist)
Doing self.hist.axis.setLogMode(True) didn't work as it affected the x-axis of the histogram instead of the y-axis.
And finally, I would also like to be able to limit the accesible range in the x-axis of the histogram. How can this be done?
Cheers!
Ok, I finally figured out. In case someone wonders, I solved it by adding these two lines:
self.hist.plot.setLogMode(False, True)
self.hist.vb.setLimits(yMin=0, yMax=16000)
Is there any way to create a break in my vertical scale on the Google charts api?
I have a couple of dozen data points all about 600-2000 on the y-axis except for one value which is almost 300,000; this makes all the smaller data points nearly unreadable. I need to represent all this data and a logarithmic scale is not an option.
Simple answer: no, it is not possible.
Breaking axes is (generally) frowned upon in the visualization community and therefore isn't supported most of the time in various software.
If you want to be tricky, you can create a function to find outliers, and then move them to a second series in your data. Plot that series on the second axis, and have it with a different color. This says, "This figure is different and does not fit" which brings added attention to it, while still allowing the rest of the data to be seen in the same scale.
Personally I would just cut off the graph at an arbitrary value, set the value of that point to the maximum value, and add a tooltip saying, "Outlier: 300,000" or whatever it is. This will allow people to see the other numbers, but show that this number itself is an outlier without coloring it differently or removing it from the single series.
Either way is doable.
You need use a log scale. It's a vAxis and hAxis attribute. The supported values are:
log: Conventional logarithm scale
mirrorLog: Logarithm scale that allows 0 values
var options = {
vAxis: {
scaleType: 'mirrorLog',
}
};
var data = {};//your data
chart.draw(data, options);
I want to create a stacked bar graph as in url below
(source: jpowered.com)
I want to make hyperlink for each of the red ,violet and blue boxes.The graph is possible with jfree chart but i don't know how to make each of the individual bars as URL so that a click on it can refresh the page.
Is it possible to do it with jfree chart?
Does Jquery plot help in this case to make each box url enabled ?Please suggest.
Using jfreechart, you can apply a CategoryURLGenerator to the plot using whichever of the two implementations better suits your needs. The approach is outlined here for the related PieURLGenerator. ChartFactory.createStackedBarChart() uses a StackedBarRenderer and allows PlotOrientation.HORIZONTAL.
Addendum: To generate URLs for individual items, you can examine the ChartEntity returned in a ChartMouseListener, as shown here.
I know that you can achieve something like this in jqPlot without much trouble.
The only think you need to remember, after you create your plot, is to bind your function to jqplotDataClick event. In your function you would need to map your clicks to a structure of urls. I have presented this in a sample example, where only the first series' bars take you to some websites. The sample is on jsfiddle --- it could be found here.
Effectively all comes down to this piece of code:
var urls = ["www.yahoo.com", "www.google.com", "www.java.com", "www.w3schools.com/js/js_obj_date.asp"];
$('#chart').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
if(seriesIndex === 0){
var url = urls[pointIndex];
window.open("http://"+url);
}
});
EDIT
I do not know an easy way, i.e. that wouldn't involve changing the script of jqPlot, of identifying the clicked bar by highlighting its background. Though I figured out a way to get a similar effect by coloring background of point labels which are on bars, the code would also need to be in the jqplotDataClicked, something like:
var prevClicked;
var prevBackgroundColor;
$('#chart').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
var str = ".jqplot-point-label.jqplot-series-"+seriesIndex+".jqplot-point-"+pointIndex;
$(str).each(function(){
if(prevClicked)
$(prevClicked).css('background-color', prevBackgroundColor);
prevClicked = this;
prevBackgroundColor = $(prevClicked).css('background-color');
$(prevClicked).css('background-color', 'red');
});
});
You just find the clicked point label using jQuery and apply your style, e.g. changing background color, remembering the previous label so you can remove its color to previous state on click on another bar. First I tried using addClass/removeClass functions but it didn't change a label's style, thus I had to use the css function instead.
I have created a chart with following code:
ChartAmalkerd.Titles[0].Text = "xxxx";
ChartAmalkerd.Series.Add("x");
ChartAmalkerd.Series["x"].ChartType = SeriesChartType.Column;
ChartAmalkerd.Series["x"]["PointWidth"] = (0.5).ToString();
ChartAmalkerd.Series["x"].Points.AddY(10);
ChartAmalkerd.Series["x"].IsValueShownAsLabel = true;
ChartAmalkerd.Series.Add("y");
ChartAmalkerd.Series["y"].ChartType = SeriesChartType.Column;
ChartAmalkerd.Series["y"].Points.AddY(20);
ChartAmalkerd.Series["y"]["PointWidth"] = (0.5).ToString();
ChartAmalkerd.Series["y"].IsValueShownAsLabel = true;
ChartAmalkerd.Series.Add("y");
ChartAmalkerd.Series["z"].ChartType = SeriesChartType.Column;
ChartAmalkerd.Series["z"].Points.AddY(20);
ChartAmalkerd.Series["z"]["PointWidth"] = (0.5).ToString();
ChartAmalkerd.Series["z"].IsValueShownAsLabel = true;
but the columns are together and there is no any gap between columns.
How do I add a gap between columns?
I would normally come up with less hacky solutions, but as I have no time to research tonight - I at least have semi-solutions that might serve your purpose depending on your requirements, so I will give you something to start with.
What you are experiencing is the default mschart behavior if you do not set an X datapoint for this chart type.
If you never set an x for the points in a series each datapoint 'x' will be defined by the data point index position within its series + 1. You are using three series, each with one data point, so in your example all points are set to an x value of 1 automatically.
Based on this, each column above will be squeezing in to be drawn as close to their automatically generated x value as possible, which in this case, all points are x = 1.
There may be a better workaround, however, one solution to this would be to assign an x value with an offset based on the number of series/data points you plan on using.
If you know you are going to have three series you can add apply a unique offset for each series
For example
chart1.Series["x"].Points.AddXY(chart1.Series["x"].Points.Count + 1 - 0.05, yValue);
chart1.Series["y"].Points.AddXY(chart1.Series["y"].Points.Count + 1, yValue);
chart1.Series["z"].Points.AddXY(chart1.Series["z"].Points.Count + 1 + 0.05, yValue);
NOTICE: You will discover interesting 'bugs'/features if you do not add the '+ 1' to the datapoint count for series "y" above. Without it, the first data point of series 'y' will be zero. When you leave things at zero, microsoft charting will assume you have not set anything and use a default behavior.
Another hacky workaround is less pretty if you are using grid lines, but it will work.
Use your original code, but add white borders!
i.e. add this to each series (or perhaps just the center series)
chart1.Series["y"].BorderWidth = 2;
chart1.Series["y"].BorderColor = Color.White;
The workaround code examples I cite are tailored to your code sample above, which has three series, each with one data point, but can be adapted for more series and more data points per series to make it more dynamic. Let me know if you need help with such a task and I will try to get you going.
I will return and edit this answer later if I have time to research a less hacky answer this weekend. Good luck!
chart1.Series["y"].BorderWidth = 2;
chart1.Series["y"].BorderColor = Color.Transparent;
works nicely.