Clickable barchart, where clicking on any bar would redirect to concern information page - charts

I`m making student progress tracking system, where I need to show the progress chart on every subject.
Here every bar represent the subject, while clicking on any bar(subject) would produce another chart that is showing the progress of that particular subject.
I want every bar of bar-chart click-able that I can fire the event by clicking on that, so any help on that?(I am using ASP.NET(C#) for development)

You just need to bind a click event to the chart by inserting in page_load the following code: this.CT_RT_DB_Pt3_1.Click += new ImageMapEventHandler(Chart1_Click); And then add the protected void Chart1_Click(object sender, ImageMapEventArgs e) method inside the inherited page class, and use e.PostBackValue to specify the subject clicked..
Specify the postback value to be the xaxis label of the bar clicked in the .aspx file: <asp:Series Name="Series1" PostBackValue="#AXISLABEL"></asp:Series>

You can easily implement this with Flash or JavaScript version of amCharts
The charts are client-side so all you need to do on the server is generate your data in CSV or
XML format and feed it to the charting controls.

Related

SAPUI5 - Basic info - how to manage UI elements in view.js?

experts,
These are two very basic connected questions.
I'm studying SAPUI5 and I cannot find means to position my UI elements on the screen.
In my view.js file I create, let's say, a button, a datepicker and a text field.
If I do something like:
aControls=[];
<Define the button - oButton>
aControls.push(oButton);
<Define the datepicker - oDatePicker>
aControls.push(oDatePicker);
<Define the text field - oText>
aControls.push(oText);
return aControls;
then I get all three elements positioned in a row one right after another.
I cannot use css, because I pass all those objects in one array and all of them are placed into a common div on index.html.
How do I position these? A link to any good tutorial/examples is very welcome.
Also, how do I refresh UI elements?
For example, I have situation, when on button press I make a call to the server, get response and put it into a using something like:
response.placeAt('some-id');
The button is created in the view.js and the call is processed in controller.js.
The response is added every time I press the button and I have no idea how to replace the old response with the new one.
A good link is very welcome.
Thanks.
There are a lot of layout controls of SAPUI5 you can use: Grid, HorizontalLayout, VerticalLayout, MatrixLayout,etc. You can check the examples and see how you need to layout your views.
You are currently doing UI5 JS view which implements createContent method to define views, this is one approach. Another common approach is to use XML views, it is declarative and more straightforward, also needs less code. See this simple example in JSBin of defining XML view and controller to refresh UI.
SAP UI5 is all about Model(JSONModel/ODataModel)-View(JSView/XMLView)-Controller. You are highly recommend to read this MVC example, though it is based on SAP UI5 mobile, the content is relevant to SAP UI5 desktop as well.
Hope you will get some hints.

Set progress message/state from custom action possible?

We wrote a custom action to deploy some artifacts to our glassfish server. Now we wanted to display the names of the artifacts to the message-text of the progess bar. Therefore we want to set the text directly from the custom action instead using a separate set-progress-action. Is this possible? We want to avoid a bunch of custom-action/set-progress-message entries in our configuration although we can recap these inside a action group.
Thanks in advance
Call
context.getProgressInterface().setStatusMessage("Your text");
in your code. The progress interface also has methods for changing the percentage, the indeterminate state and the detail message.

Nvigation within a GWT application

I intend to build a web application where users can enter their time every week and have been struggling to get my head around the concept of a single page in GWT that gets repainted with data depending on the user actions. After researching a lot on this site and google, I found one link that I would like to emulate but dont know how to go about doing it in GWT. Although their source code is available, I dont think it is full and complete. I got some idea from this link - Multiple pages tutorial in Google Web Toolkit (GWT) but again dont know how to implement it into a working version. One small working sample would be great to help me understand and get started.
Could anyone please guide me as to how to achieve the look and feel of the screen with the link below and how the content can be repainted with data from the server ? Would I need to put all the logic in one EntryPoint class ? I would like to have the hyperlinks in the left navigation panel and show the content in the right panel. I seem to be completely lost after a few hours of research.
http://gwt.google.com/samples/Showcase/Showcase.html#!CwHyperlink
Thanks a lot for your help.
Regards,
Sonu.
A single page application layout is actually quite easy to achieve.
The first thing you do is define the general layout, using GWTs layout panels. For your layout, I'd suggest using a DockLayoutPanel.
Content content = new Content();
Button switchContent = new Button(content);
Navigation navigation = new Navigation();
navigation.add(switchContent);
DockLayoutPanel pageLayout = new DockLayoutPanel(Unit.EM);
p.addWest(new HTML(navigation), 7.5);
p.add(new HTML(content));
Here, the width of the navigation panel will be fixed, whereas the content will take the remaining space. You have to pass a reference of the button (or some other widget) which does the switch of the content area, add the button to the navigation area, and so on.
Put this into a class, e.g. called MasterPageFactory:
public class MasterPageFactory {
private MasterPageFactory() {}
public static MasterPage newInstance() {
Content content = new Content();
Button switchContent = new Button(content);
Navigation navigation = new Navigation();
navigation.add(switchContent);
DockLayoutPanel masterPage = new DockLayoutPanel(Unit.EM);
masterPage.addWest(new HTML(navigation), 7.5);
masterPage.add(new HTML(content));
return masterPage;
}
}
Now, in your EntryPoint class, call the factory:
RootLayoutPanel.get().add(MasterPageFactory.newInstance());
This example should get you an idea. Other options would be using a DI framework like Guice or the Command pattern.
Your question is mixing up a couple of concepts. If you want the user to click something that looks like a link, and in reponse the application sends a request to the server and shows a page that looks different than the page they're on, and that page has fresh data that just came from the server, then you want a perfectly normal anchor or form submit button. You don't need anything special or weird from GWT.
The showcase example you referenced lets the user click something that looks like a link, and looks like it loads a new page, even to the point of letting the back button work as expected, but does not actually hit the server to get a new page or new data.

How to find in GSP from which action of controller its been called?

I am new to grails and i got stuck with another issue.
I have two form's in my single GSP search.gsp and have two actions in my controller serach and results.
Now when i click on search button in one of my GSP file it takes me to search action which renders me search.gsp.At this time it should display me only first form in it. when i click results button in that form it will take me to results action.which has code line.
redirect(action:"search",params:[merchants:merchant,address:address])
this will take me back to search action but now i want to display 2nd form in search.gsp..
My problem is
how can i make search action once to run with out parameter's and once with parameter's?
how to determine in GSP from which action its been called?
with Advance thanks.
Depending on how different your forms are, you may want to consider having two separate GSP files (e.g., search.gsp and results.gsp). Use render(view:'action', model:[...]) to render a different view in the controller. This is often clearer that a single file with lots of conditionals.
Otherwise, you can find out the action using ${params.action}, so for example:
<g:if test="${params.action == 'search'}">
Text to show if the action is search
</g:if><g:else>
Text to show if the action is results
</g:else>
I would suggest you to separate your result page as template (_search.gsp), and render it from your result action. So that's how you will have different forms in different files.
By the way template is nothing but an ajax response, google it for detail about template in grails.

DataFormWebPart accessing previous versions of an item in WSS3.0

I am running WSS3.0 and have a custom list which contains versioning on a couple of fields. When I click on an item and I view the item page I see the history of all the fields which I have made changes to. This works fine as expected.
I have also created a page using Microsoft Office Sharepoint Designer and using a DataFormWebPart I have created a page that shows all the items in the list in a list view, I have also changed the XSL node of the DFWP to display the datain a way that my client wants.
The issue that I have is, it is only showing the latest version of the item record e.g. some of the fields are blank as the client did not update those fields the last time that the item was saved. I can fully understand why it is not showing these previous versions of the item but is there anyway that I can change an option in the webpart that will return that last non blank version of the field?
If this is not possible does anybody know if it is possible to change the edit page for the item so that it defaults certain fields to have the previous value of the field.
Many thanks for you ideas in advance
Jonathan
I eventually was able to add the following jQuery code at the bottom of the page (using Sharepoint Designer). You will also need to add a link at the top of the page to include a link to the jQuery code (or you can install it as a feature).
<script>
jQuery.fn.GetLastUpdate = function () {
$updates = this.parent().next().clone();
$("nobr", $updates).remove();
$("a", $updates).remove();
$("br", $updates).remove();
$lastUpdate = $updates.text().split("(): ")[1]; //.find("a").replaceWith("##++##").text();
this.text($lastUpdate);
return $lastUpdate;
}
$("[title='CONTROL_TITLE']").GetLastUpdate();
</script>
Then you just have to replace the CONTROL_TITLE with the title of the text box that you want to auto fill.