I'm starting to work with NVD3.js and I'm a little lost about the configurations possible with this tool.
I want to configure many items like:
Display x axis label for every bar, currently I have only the even ones displaying:
I want to configure a click function on the bars, which will redirect to a page passing the x axis as parameter, this link can be displayed on the label, but in this case I need to change it, to be able to click on it.
These are my doubts, can someone help me with the documentation link or with the answer to my questions?
-- EDIT --
Found how to display the label for every bar on x axis:
In the nv.d3.js edit the function nv.models.multiBarChart. In this line: reduceXTicks = true, set the value to false.
or
Just add this line to your nv.addGraph function:
chart.reduceXTicks('false');
Development of NVD3 appears to have moved to the nvd3-community fork which has documentation available.
Agreed with shabeer90. There is no documentation for NVD3 (wish there was).
D3.js documentation is of course largely in play...
Thanks for all replies, but I've done it by myself:
For displaying x axis label for every bar:
Add chart.reduceXTicks('false'); to your nv.addGraph() function, like this:
nv.addGraph(function () {
var chart = nv.models.multiBarChart();
chart.reduceXTicks(false);
return chart;
});
For adding an event to click on the bars, use this on your chart function:
d3.selectAll("rect.nv-bar").on("click", function (d) { // You can pass d to function to recover x ou y value of the bar
// Whatever you want to do on click
});
If someone has a better solution, please comment here.
While not the ideal solution, I find it easier to find out the available configuration options by using the link below and tinkering with the parameters on the right until I get the results I want. It's for an angularjs wrapper to nvd3, but the configuration is pretty much the same, only through JSON instead.
https://krispo.github.io/angular-nvd3/#/historicalBarChart
There is documentation for the API here. None of these tools are going to be useful until someone comes along with an abstraction that simply ingests JSON. Nobody wants to code a damn graph.
https://github.com/novus/nvd3/wiki/API-Documentation
Related
I'm trying to control the visibility of the HeaderRow at runtime.
[Note: To clear any confusion: I'm not talking about the row with the column names; I'm talking about the row that's made visible with grid option "showHeaderRow:true"; i.e., what might be better termed the "Filter Row"].
I'm trying to use:
grid.setOptions({ showHeaderRow: true/false });
grid.invalidate();
This seems to have no effect on the grid or the display of the HeaderRow.
Any thoughts on what I'm missing?
this worked for me:
if(grid.getOptions().showHeaderRow){
grid.setHeaderRowVisibility(false);
}else{
grid.setHeaderRowVisibility(true);
}
Yes this one should be simple enough, I use these 2 pieces of code to hide/show dynamically after the grid is already created.grid.hideHeaderRowColumns(); grid.showHeaderRowColumns();
Give it a try, hope it helps...
I'm using SlickGrid version 2.1 at the time of writing, and I have a similar requirement as yours. After digging some depth into the source code, I assume that option showHeaderRow has no effect on the display of the resulting grid unless co-work with the grid.setHeaderRowVisibility(visibility).
Anyway, I managed to work around with simple jquery technique after the grid is created, simply by using the code below, if you don't want any animation:
$(".slick-header").hide();
Although this is an old question asked 2 years ago, and Slick Grid hasn't got any progress for quite some time, I still believe it's quite a useful lib. Hope this complements the thread and be of a little help for the up-coming users.
I am using jpgraph bar chart. It all works fine but there is one thing I could not really figure it out. I need to display the value of each bar on the top of that bar (column) but it seems like I am missing something that I cant do it.
I have tried using the following:
$bplot->value->Show();
But yet it does not work! Any help is GREATLY appreciated!
It is an old question, but as I had the same problem and I solved it, I'm posting this answer as a future reference.
My problem was the order of the invoked methods. You MUST call Show after addnig the plot to the graph. As an example:
$graph = new \Graph($width, $height);
[... init graph ...]
$plot = new \BarPlot($datay);
$graph->Add($plot);
$plot->value->Show();
$plot->value->SetColor("black","darkred");
$plot->value->SetFormat('%01.2f');
I hope it helps someone.
Call the Show() method after you've added the plot to the graph.
$graph->Add($plot);
$plot->value->Show();
This example shows it can be done, and it gives a complete example of how to pull it off:
http://enacit1.epfl.ch/php/jpgraph/docs/html/exframes/frame_example20.1.html
I'd be glad to look at your code and troubleshoot if you require help beyond this.
Putting the value on top of the bar:
$bplot->SetValuePos('top');
Changing the angle:
$bplot->value->SetAngle(90);
Hiding value that are 0:
$bplot->value->HideZero();
I'm working on a stockchart and i would like to show the highstock tooltip programmatically as asked here.
I managed to solve this problem but now, my goal is to show the tooltip for all series (the same behavior when i select a point with the mouse - please check this example).
Is that possible?
Here the key code (more code):
xchart.tooltip.refresh([xchart.series[0].points[i]]);
//DOESN'T WORK
//chart.tooltip.refresh([chart.series.points[i]]);
//DOESN'T WORK ALSO
//chart.tooltip.refresh([chart.series[0].points[i]]);
//chart.tooltip.refresh([chart.series[1].points[i]]);
Just enable sharing for tooltip. And refresh both series's tooltip by giving the points of array that you want to show on the tooltip.
tooltip : {
valueDecimals : 2,
shared: true
}
xchart.tooltip.refresh([xchart.series[0].points[i], xchart.series[1].points[i]]);
http://jsfiddle.net/cf7wq/5/
And seems like showing two different tooltips without sharing is not possible through only api itself.
http://highslide.com/forum/viewtopic.php?f=9&t=12670
In GTK+ I would like to have a vertical list of labels, that a user can scroll. A user can click on any label and it will go to it's own callback function.
Right now I'm using a vertical area of buttons, but I really do not like having buttons. To give a good example, what I am trying to achieve would be considered very similar to a ListView in Android:
Is it possible to achieve this? I have tried replacing my buttons with labels but the signals stopped working (which would make sense). The GtkList is depecrated, and I am not sure what I am supposed to use instead?
I think you can use GtkTreeView with GtkListStore ( GtkTreeSelection for selection in GtkTreeView ). For scrolling of course you will make use of GtkScrolledWindow. Using GtkTreeView can be a little intimidating for a beginner but there are quite a few tutorial available online like this one. Also, if you can install gtk-demo application (part of gtk2.0-examples package on Ubuntu) which demonstrates using Gtk widgets along with code, it will be quite helpful for you.
Hope this helps!
What you could do as well (if you really want to use labels) is to just put each of them into a GTKEventBox, and then set the event mask to receive mouse clicks.
EDIT:
Example:
GtkWidget* gtk_clickable_label_new(const gchar *str)
{
GtkWidget *eventbox, *label;
label = gtk_label_new(str);
gtk_widget_show(label);
eventbox = gtk_event_box_new();
gtk_widget_add_events(eventbox, GDK_BUTTON_PRESS_MASK);
gtk_container_add(GTK_CONTAINER(eventbox), label);
return eventbox;
}
Have you tried putting your labels in a GtkVBox in a GtkScrolledWindow?
I think what you want is a bunch of GtkButtons that have no hieght/depth.
To do this use gtk_button_set_relief and choose the GTKReliefStyle of GTK_RELIEF_NONE.
That's how I put buttons in GtkTreeViewColumn headers, it looks nice.
Try it!
I want to persist the user's location in the document he or she is browsing, then bring them back to that spot when they return from tombstoning or between sessions.
My first approach was to wrap the browser component in a scrollviewer, but it turns out it handles its own scrolling and the scrollviewer never changes its verticaloffset.
My guess is that the browser component must have a scrollviewer or something like it embedded in it. I need to get the verticaloffset and scroll to an offset.
Any guesses how to get there?
My next approach would be a painful mish-mash of javascript and c# to figure out where they are...
Because of the way the WebBrowser control is built you'll need to track scrolling in Javascript then pass the location to managed code to handle storage of that value.
On resuming you'll need to have the managed code pass the scroll position to a Javascript function to reset the scroll position.
That's the theory but I haven't looked at the funcitonality around javascript scrolling events in the WebBrowser yet. That's the only place I can see possible problems.
Would be good to hear how you get on.
I've accepted Matt's answer, but I want to put in some details here. I'm also going to blog about how I did it once I'm completely done.
Since the WebBrowser component is essentially a black-box, you don't have as much control as I would like. Having said that, it is possible to get and set the vertical offset.
Javascript lets you ask for the value, but different browsers use different variations on HOW to ask. For THIS case I only have one browser to worry about.
First I make a couple of simple javascript functions:
function getVerticalOffset() {
return document.body.scrollTop;
}
function setVerticalOffset(offset) {
document.body.scrollTop = offset;
}
Next I call into the WebBrowser using the InvokeScript method on the browser object.
I'll post an update here with a link to my blog when I get the full write-up done.
I have been writing an eBook reader and had a similar question. Code for setting a scroll position has been easy enough to find.
Code for setting vertical scroll position:
string script = string.Format("window.scrollBy(0,{0});", "put your numeric value here");
wb_view.InvokeScript("eval", script);
Google didn't help much in finding solution for getting the value of current scroll position. Lacking any knowledge in javascript it took me almost two hours to get it right.
Code for getting the vertical scroll position:
var vScroll = wb_view.InvokeScript("eval",
"var vscroll = window.pageYOffset; vscroll.toString();");