পরিদর্শন:
(আপডেট 12/04/07: একটি খুব আকর্ষণীয় ওয়েব অংশ মাধ্যমে এই সমস্যা যে অন্য কোন ব্লগে লিঙ্ক শেষে আরেকটি আকর্ষণীয় সম্পদ এখনো যোগ করেনি)
This blog entry describes how to create a bar graph in SharePoint. This works in both WSS and MOSS environments as it only depends upon the data view web part.
The overall approach is as follows:
- Create a list or document library that contains the data you want to graph.
- Place the associated document library / custom list onto a page and convert it to a data view web part (DVWP).
- Modify the DVWP’s XSL to generate HTML that shows as a graph.
ব্যবসা দৃশ্যকল্প / সেটআপ:
I have created a custom list with the standard Title column and one additional column, "Status". This models (very simplistically) an "Authorization For Expense" শিরোনাম প্রকল্প এবং স্থিতি তালিকা থেকে একটি মান প্রতিনিধিত্ব করে যেখানে দৃশ্যকল্প:
- প্রস্তাবিত
- প্রক্রিয়ায়
- স্থগিত
উদ্দেশ্য এই অবস্থা কোড দেখায় যে একটি মিথস্ক্রিয় অনুভূমিক বার গ্রাফ উত্পাদন হয়.
আমি তালিকা পূরণ করে থাকেন এবং এটা ভালো দেখায়:
ডেটা দেখুন ওয়েব পার্ট তৈরি করুন:
একটি পৃষ্ঠায় কাস্টম তালিকা যোগ DVWP তৈরি করুন (আমার ক্ষেত্রে সাইট পাতা) এবং নির্দেশাবলী অনুসরণ করুন এখানে (http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!395.entry).
সহজভাবে DVWP তৈরি ছাড়াও, we also need to set the paging property to show all available rows. আমার জন্য, এই ভালো কিছু দেখায়:
এই বিন্দু, I always close SPD and the browser. I then re-open the page using the browser. This avoids accidentally mucking up the web part layout on the page.
XSLT স্টাইলশীট পরিবর্তন করুন:
এটা XSLT স্টাইলশীট পরিবর্তন করার এখন সময়.
I always use visual studio for this. (দেখুন এখানে for an important note about intellisense that will help you a lot).
I create an empty project add four new files (replacing the words "Original" and "New" as appropriate):
- Original.xslt
- New.xslt
- Original Params.xml
- New Params.xml
আমার কেস, এটা ভালো দেখায়:
Modify the web part and copy the params and XSL to the "Original" ভিসুয়াল স্টুডিও সংস্করণ.
এখানে উদ্দেশ্য XSL গ্রাফ হিসাবে উপস্থাপনা করে HTML এর মধ্যে DVWP ক্যোয়ারী থেকে আমরা ফিরে পেতে ফলাফল রুপান্তর হতে হয়.
এই শেষ, it helps to first consider what the HTML should look like before we get confused by the insanity that is known as "XSL". (পরিষ্কার করা, নিম্নলিখিত কেবল একটি উদাহরণ; don’t type it or copy/paste into visual studio. I provide a full blow starting point for that later in the write-up). The following sample graph is rendered as per the HTML immediately following:
সংশ্লিষ্ট এইচটিএমএল:
<HTML> <শরীর> <কেন্দ্র> <টেবিল প্রস্থ = 80%> <tr><td><কেন্দ্র>Horizontal Bar Graph</td></tr> <tr> <td align="center"> <table border="1" প্রস্থ = 80%> <tr> <Td প্রস্থ = 10%>খুলুন</td> <td><টেবিল = cellpadding"0" = cellspacing"0" সীমানা = 0 প্রস্থ = 50%><TR bgcolor = লাল><td> </td></tr></টেবিল></td> </tr> <tr> <Td প্রস্থ = 10%>বন্ধ</td> <td><টেবিল = cellpadding"0" = cellspacing"0" সীমানা = 0 প্রস্থ = 25%><TR bgcolor = লাল><td> </td></tr></টেবিল></td> </tr> <tr> <Td প্রস্থ = 10%>স্থগিত</td> <td><টেবিল = cellpadding"0" = cellspacing"0" সীমানা = 0 প্রস্থ = 25%><TR bgcolor = লাল><td> </td></tr></টেবিল></td> </tr> </টেবিল> </td> </tr> </টেবিল> </শরীর> </HTML> |
I used a dead simple approach to creating my bars by setting the background color of a row to "red".
নিন-দূরে এখানে এই হল: শেষ পর্যন্ত, আমরা করছেন সব সারি এবং কলাম সঙ্গে এইচটিএমএল তৈরি হয়.
টেমপ্লেট XSLT স্টাইলশীট:
I’ve copied the XSLT that generates a horizontal bar graph. It’s fairly well commented so I won’t add much here except for these notes:
- আমি প্রথম DVWP তৈরি করার সময় SharePoint ডিজাইনার সম্পর্কে দিয়েছেন ডিফল্ট XSL শুরু.
- আমি SPD এর থেকে এই নিচে কাটা করতে পারবেন 657 লাইন 166 lines.
- আমি পরামিতি XML ফাইল সঙ্গে প্রায় বিশৃঙ্খল না (XSL থেকে পৃথক হয় এবং আপনি DVWP নিজেকে পরিবর্তন করতে যান তখন আপনাকে আমি বলতে চাচ্ছি তা জানতে পারবেন যা; আপনি পরিবর্তন করতে পারেন দুটি ফাইল আছে). কিন্তু, এটি সরল করার জন্য, I did remove nearly all of them from the XSL. This means that if you want to make use of those parameters, you just need to add their variable definitions back to the XSL. That will be easy since you will have the original XSL variable definitions in your visual studio project.
- You ought to be able to copy and paste this directly into your visual studio project. তারপর, remove my calls and insert your own calls to "ShowBar".
- The drill down works by creating an <একটি href> এমন: http://server/List?FilterField1=fieldname&FilterValue1=actualFilterValue. This technique may be of value in other contexts. প্রথমে, I thought I would need to conform to a more complex format: http://server/List/AllItems.aspx?View={guid}&FilterField1=blah&FilterValue1=blah, but in my environment that is not necessary. The List’s URL is passed to us by SharePoint so this is quite easy to generalize.
Here it is:
<xsl:স্টাইলশীট সংস্করণ="1.0" exclude-result-prefixes="rs z o s ddwrt dt msxsl" |
The Results:
The XSL from above generates this graph:
Drill down to the underlying data by clicking on the status code:
Concluding Thoughts:
Can This Be Generalized?
I love this graphing concept, but I hate the fact that I have to go in and do so much hand-coding. I’ve given a little thought to whether it can be generalized and I’m optimistic, but I’m also a little fearful that there may be a brick wall somewhere along the path that won’t offer any work-around. If anyone has some good ideas on this, please make a note in the comments or আমাকে ইমেইল.
Vertical Graphs:
This is a horizontal bar graph. It’s certainly possible to create a vertical graph. We just need to change the HTML. I would start the same way: Create an HTML representation of a vertical bar graph and then figure out how to get that via XSL. If anyone is interested in that, I could be persuaded to try it out and work out the kinks. If someone has already done that, please let me know and I’ll gladly link to your blog 🙂
I think that challenge with a vertical graph is that the labels for the graph are more difficult to manage, but certainly not impossible.
Field Name Gotcha’s:
There are at least two things to look out for with your field names.
প্রথম, a field name with a space has to be escaped in the XSL. This will probably be an issue here:
<xsl:পরিবর্তনশীল নাম="totalProposed"
নির্বাচন করা="গণনা(/dsQueryResponse / সারি / সারি[স্বাভাবিক-স্থান(@ স্থিতি) = 'প্রস্তাবিত'])" />
If your "Status" column is actually named "Status Code" then you need to reference it as "Status_x0020_Code":
<xsl:পরিবর্তনশীল নাম="totalProposed"
নির্বাচন করা="গণনা(/dsQueryResponse / সারি / সারি[স্বাভাবিক-স্থান(@Status_x0020_Code) = 'প্রস্তাবিত'])" />দ্বিতীয়, and I’m a little fuzzy on this, but you also need to be on the alert for field name changes. If you name your field "Status Code" and then later on, rename it to "AFE Status", the "internal name" does not change. The internal name will still be "Status Code" and must be referenced as "Status_x0020_Code". The "other resources" links may help diagnose and correct this kind of problem.
About that Color:
I picked "red" because it’s pleasing to me at the moment. It would not be a big deal to show different colors so as to provide more than just a visual description of a number, but to also provide a useful KPI. উদাহরণস্বরূপ, if the percentage of "stalled" AFE’s is > 10% then show it red, otherwise show it in black. ব্যবহার <xsl:নির্বাচন করা> to accomplish this.
Other Resources:
- Determine the internal name (and other good info) for the data in a list: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!134.entry
- Show all the data provided by SharePoint (কাঁচা এক্সএমএল): http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!190.entry
- একটি নির্দিষ্ট কলামের xpath প্রকাশ করুন: http://paulgalvin.spaces.live.com/blog/cns!1CC1EDB3DAA9B8AA!155.entry
- OWA ব্যবহার করে আরেকটি পন্থা(?). I have not dug into it, কিন্তু প্রতিশ্রুতি দেখায়, বিশেষ করে পাই চার্ট জন্য: http://www.waka.dk/Blog/PermaLink,guid,e2532e71-d774-4ac9-8f25-883964b830f4.aspx
রূপান্তর শুভ!
<শেষ />
এই পৃষ্ঠায় প্রায় আমি খুঁজছেন ছিল টাস্ক সম্পন্ন.
আমি কি একটা সাপ্তাহিক পোল তৈরি করার SharePoint সার্ভে তালিকা ব্যবহার করতে চায় যে একটা দল আছে. ছিটকিনি? তারা কোড দেখতে চাই না… অথবা সিস্টেমের তারা ভোট পাঠাতে প্রত্যেক সময় পরিবর্তন (একটি সাপ্তাহিক আপডেটের জন্য পরিকল্পনা).
আমি সার্ভে তালিকায় এই সংযোগ স্থাপন এবং প্রথমে উত্তর কলাম নেভিগেশন গ্রাফ তৈরি করতে পারবেন না. তারা অগ্রগতিশীল করতে হবে যে মান ও লেবেল যদিও আমি ভবিষ্যদ্বাণী করতে পারে না কি. বিষয়টাকে আরো খারাপ করতে তারা প্রতি সপ্তাহে উপলব্ধ করা more or less উত্তর থাকতে পারে.
I will look elsewhere just in case, but has anyone found a way to create rows and labels based off of the number of available options and dynamically setting these rather than hard coding the expected values?
ধন্যবাদ পল. Very helpful. Thanks to your work, I was able to add a graph bar column to an existing DVWP (e.g. for tasks) very easily with just a few lines of your code.
In SharePoint Designer, I inserted a data view with the Title and % complete columns from a task list. I put the cursor in one of the cells and right click. I select insert a column to the right. In code view, I found the <td> and replaced the <xsl:text element inside the cell with your code:
<টেবিল = cellpadding"0" = cellspacing"0" সীমানা ="0"
width="{round(@PercentComplete*100)+1}%">
<tr style="background-color:red">
<xsl:text disable-output-escaping="yes"><![CDATA[ ]]></xsl:পাঠ>
</tr>
</টেবিল>
Note I changed the row color code from bgcolor="red" to style="background-color:red"
এছাড়াও, was able to select one of the columns in my list (@PercentComplete) in place of "$BarPercent"
গ্রেগ
Another method (using only the SharePoint UI):
http://pathtosharepoint.wordpress.com/2008/09/02/a-progress-bar-for-your-tasks-list/
http://pathtosharepoint.wordpress.com/2008/10/21/progress-bar-color-coding/
xmlns:__designer=http://schemas.microsoft.com/WebParts/v2/DataView/designer xmlns:asp="http://schemas.microsoft.com/ASPNET/20">
select="count(/dsQueryResponse / সারি / সারি[স্বাভাবিক-স্থান(@ স্থিতি)=’WIP’])" />
http://www.microsoft.com/sharepoint/downloads/components/detail.asp?a1=701Ian Morrish posted this in May 2006. I tried in MOSS 2007 and it works well. Added to GAC, had to execadmsvcjobs and iisreset…
গ্রেট পোস্ট, ধন্যবাদ!
গ্রেট পোস্ট, ধন্যবাদ!
উচ্চ পল!
Nice work! I also had something like this in my mind to view SharePoint lists in a graphical way 😉
I have a ‘Using Dashboards in SharePoint’ question. We are a military hospital using MOSS standard for our Intranet and would like to build a dashboard for our Command Group to see ‘real time’ যদি সম্ভব. মুখ্য বিষয় হচ্ছে যেখানে সুবিধা মধ্যে বাস্তব সময় বর্তমান কাজের চাপ দেখার এবং এটা আক্ষরিক নিচে পর্যন্ত পরিবর্তন এবং পর্যবেক্ষণ করা হয় (ক্লিক করতে হতে পারে “সতেজ করা”/F5).
আগাম ধন্যবাদ,
আপনি এই প্রভাব সাধন jQuery সঙ্গে দরকারী কিছু করতে পারেন. আমাকে ইমেইল galvin.paul @ gmail.com এবং আমি চেষ্টা খুশি হতে হবে এবং একটি হাত দিতে যাব.