Linear Graph

Question

5.00/5 (2 votes)

See more:

I work for a State Legislature and I would like to create a page that is similar to the following page. http://www.destatis.de/bevoelkerungspyramide/[^]

My “Men” side would be the bills introduced by the State Senate, and my “Women” side would be the State House. My “play” button would traverse the legislative sessions.

Mine will start at the bottom with the first bill introduced by the chambers. The line would indicate the progress the bill has made. So if it is introduced, but no further action was taken on it, it would be super short. If went all the way, and became a law, it will be a very long line.

Hovering over the line could show who introduced it, what party they belong to. The check boxes at the bottom could recolor the lines according to the party that introduced the bill (red or blue for republican or democrat). I have dozens of other cool ideas that would fit, but not a CLUE how to make it happen. The more I research things the more I feel like I’m going the wrong way.

I am overwhelmed. This page seems to have used SVG with canvas? I got a book about both and a book about HTML5 and also jquery and am reading my way through all but I’m having trouble figuring out how to plug all this cool stuff into my Visual Studio .NET environment and make anything cohesive happen.

Due to budget restraints I’m a lone programmer here. I do it all alone and I don’t even have anyone to talk to about my dreams for the site. Would anyone be willing to give me a short bullet pointed task list of the things THEY would do to accomplish this project?

Would you use SVG with Canvas? So do I write a VB.net program that loops through the bills and creates an SVG path for each bill into some kind of file and then include that page in header? I’ve written the stored procedures to capture all the information I need and code that is creating an SVGish file.

I’m good with the code to tell the programs what they need to know. I just don’t know how to show it to the web. Thanks for any help you could give.

[original title]
I want to turn an sample page into something useful - a linear graph for my state legislature

Posted 27-Dec-10 5:28am

Jenny Quinn

Updated 27-Dec-10 5:33am

Slacker007

v2

Add a Solution

Comments

Slacker007 27-Dec-10 11:35am

Shortened question title and improved readability.

#realJSOP 27-Dec-10 13:03pm

Please list your honest self-assessment of your skill level, the dev tools/code libraries you have on hand, the likelihood that management would buy you additional tools, and whether or not you have admin access to your box. Lastly, are you mandated to use HTML5, or can you experiment with different technologies, such as Flash or Silverlight (my guess is no).

Jenny Quinn 28-Dec-10 11:45am

John,
Thanks for your reply. I have about 12 years of web development experience but have been required to avoid browser based scripting languages until just recently. I've written all of the code and database access for several important and heavily accessed sites including the Michigan Legislative Website, an online placement system (thought to be the nation's first - back in 1997) and an online university for Michigan State University. I'm probably not as 'skilled' as many of your readers, but I am not too shabby.
I do use Flash for some tutorials which I present on our site and to do this I use a tool called Camtasia by TechSmith. I am looking into jquery and have downloaded the library and am reading "JQUERY / Novice to Ninja". I am not mandated to use HTML5 but I must be careful because we have a HUGE audience on this website and I am mandated to deliver the critical information to as broad a set of browsers as possible. Thanks again for your interest in this project!

Jenny Quinn 28-Dec-10 11:49am

also, it is highly unlikely that management would buy me additional tools.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Espen Harlinn · Answer 1 · 2010-12-28T00:18:00

From your question I guess you are familiar with VB.Net, while SVG, Flash and HTML5 is something you are just learning.

I hope you will find SilverLight development somewhat more familiar, and I think you will be able to build upon what you know using that platform. While learning by doing is great, it tends to be somewhat more time consuming ...

The "men" side could be created using something like this:

XML

<UserControl x:Class="MenSide.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel HorizontalAlignment="Right">
            <Rectangle Fill="Black" Width="100" Height="20" HorizontalAlignment="Right">

            </Rectangle>
            <Rectangle Fill="Black" Width="80" Height="20" HorizontalAlignment="Right">

            </Rectangle>
            <Rectangle Fill="Black" Width="110" Height="20" HorizontalAlignment="Right">

            </Rectangle>
        </StackPanel>
    </Grid>
</UserControl>

You will have to create the rectangles dynamically. Hope it's enough to get you started.

Regards
Espen Harlinn