Loading...

Dojo Charts

Dojo comes with an amazing charting library, in the form of dojox.charting. You can create different types of versions 2D chart, 3D Chart, Pie, Animated Chart.
Dojo Charts

Here is a sample html code for Columns chart by using dojo:

<html>  
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
        </script>
        <script type="text/javascript">
            dojo.require("dojox.charting.Chart2D");
            dojo.addOnLoad(function() {
                var c = new dojox.charting.Chart2D("chartOne",{
                    title: "Revenue per year",
                    titlePos: "bottom",
                    titleGap: 5,
                    titleFont: "normal normal normal 15pt Arial",
                    titleFontColor: "orange"
                });

                c.addPlot("default",{type: "Columns", gap: 5, minBarSize: 3, maxBarSize: 20})
                .addAxis("x", {
                    fixLower: "major",
                    fixUpper: "minor",
                    labels: [{value: 1, text: "Item1"}, {value: 2, text: "Item2"},{value: 3, text: "Item3"}]})
                .addAxis("y", {
                    title: "Revenue ($ Million)",
                    vertical: true,
                    fixLower: "major",
                    fixUpper: "major",
                    includeZero: true})
                .addSeries("Series A",
                    [{y: 4, color: "red"},{y: 2, color: "green"},{y: 6, color: "blue"}]);
                c.render();
            });
        </script>
    </head>
    <body>
        <div id="chartOne" style="width: 400px; height: 240px; margin: 30px auto 0px auto;">
        </div>
    </body>

</html>
Training 2081228587911875042

Post a Comment

emo-but-icon

Home item

Blog Archive

Popular Posts

Random Posts

Flickr Photo