IGViz.js Drawing a chart has never been this easy!

Interactive Generic Visualization library for Javascript that is based on d3.js

Line Chart Sample

Data Collection 

    {
                "metadata" : {
                    "names" : ["Year","Sales","Expenses"],
                    "types" : ["C","N","N"]
                },
                "data" : [
                    [2004,  1000,      400],
                    [2005,  1170,      460],
                    [2006,  660,       1120],
                    [2007,  1030,      540]
                ]
    };

Configurations

Property Value Description
title String Title of the table
yAxis [0-(dataset.length-1)] An array of indices of dataset for Y-axis
lineColors [colorCodes] An array of color codes for each Y variable
xAxis 0-(dataset.length-1) column index of the dataset for X-axis
pointLabel 0-(dataset.length-1) column index of the dataset for text labels
width px width of the chart
height px height of the chart
interpolationMode basis,step-after,step-before,linear,cardinal method of interpolation
padding px padding of the chart
chartType line Type of the chart

Sample code for above charts


/******************************************************* Installation of the library ******************************************************/

             <link rel="stylesheet" href="bootstrap.min.css">
             <link rel="stylesheet" href="igviz.css">
             <script src="d3.min.js"> </script>
             <script src="igviz.js"> </script>


/********************************************************** Invoking the Library **********************************************************/
             <script>

                    //dataset used to plot charts
                    var dataTable = new igviz.DataTable();
                        dataTable.addColumn("Year","C");
                        dataTable.addColumn("Sales","N");
                        dataTable.addColumn("Expenses","N");
                                 
                        dataTable.addRows(
                            [
                                [2004,  1000,      400],
                                [2005,  1170,      460],
                                [2006,  660,       1120],
                                [2007,  1030,      540]
                            ]
                        );


                    var width = document.getElementById("line").offsetWidth ; //canvas width
                    var height = 270;   //canvas height

                    var lineChartConfig = {
                           "xAxis": 0,
                           "yAxis": [1,2],
                           "padding": 60,
                           "width": width,
                           "height": height,
                           "textAngle" : -90,
                           "chartType": "line",
                       }



                    //draw a bar chart on div #bar
                    igviz.plot("#line", lineChartConfig, dataTable);


            </script>