CODEWITHSUNDEEP
javascriptcsshtmlgraphraphael
user1599964
user1599964

Reputation: 890

Suggestions for graph ui library for showing analytical graph

I want to make analytical graphs of tweets, something like the following website link

Website-Link

I wanted to know what are the best option available in open source ?

I have heard Raphael.js is good. Other suggestions ?

Upvotes: 0

Views: 259

Answers (1)

John
John

Reputation: 111

The site you listed uses http://www.flotcharts.org. I've used it before with success.

Edit 5/25

Flot has some excellent documentation included, as well as many many examples (examples can be found here http://www.flotcharts.org/flot/examples/). For the sake of simplicity, however, I have taken their simplest example and removed some of the un-needed code (example from http://www.flotcharts.org/flot/examples/basic-usage/index.html).

Code Example 

    <title>Flot Example</title>

    <!-- Import Flot Scripts -->
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>   
    <!-- /End Import Flot Scripts -->

    <script type="text/javascript">
    <!-- This is just a simple example, creating the data in-line. -->

    $(function() {

        // This will generate the curved line you will see on the page.
        var d1 = [];
        for (var i = 0; i < 14; i += 0.5) {
            d1.push([i, Math.sin(i)]);
        }

        // Create static data for second data series.
        var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

        // A null signifies separate line segments
        // Create static data for third data series, with line segments.
        var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

        $.plot("#placeholder", [ d1, d2, d3 ]);
    });

    </script>

    <style>
        <!-- These styles come from http://www.flotcharts.org/flot/examples/examples.css.
             The most important thing is that your chart needs a height and width set for it
             before you try to create it with JavaScript. -->
        .demo-container {
            box-sizing: border-box;
            width: 850px;
            height: 450px;
            padding: 20px 15px 15px 15px;
            margin: 15px auto 30px auto;
            border: 1px solid #ddd;
            background: #fff;
            background: linear-gradient(#f6f6f6 0, #fff 50px);
            background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
            background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
            background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
            background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
            -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .demo-placeholder {
            width: 100%;
            height: 100%;
            font-size: 14px;
            line-height: 1.2em;
        }

        .legend table {
            border-spacing: 5px;
        }
    </style>
</head>
<body>

    <!-- Begin fancy chart container. -->
    <div class="demo-container">
        <!-- Begin chart placeholder. This is wher your chart will appear -->
        <div id="placeholder" class="demo-placeholder"></div>
        <!-- /End chart placeholder. -->
    </div>
    <!-- /End fancy chart container. -->

</body>
</html>

Now, you are going to want to get your data from PHP, .NET (or any other server side language - or- connect to an API with ajax) (which will probably be pulling it from Twitter or from another aggregate data source). But that would have to be another question!

Upvotes: 1

Related Questions