API Docs

Getting Started Edit

Welcome to the GraphJS Library.

This API document is designed for those interested in developing and using the library.

This library is still under development and will evolve.

Credits

Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Installation Edit

GraphJS library can be installed as an npn dependacy.

npm install @ivantha/graphjs

Usage Edit

Chart type
LINE_CHART
SIMPLE_XY_LINE_CHART
STEP_CHART
BAR_CHART
PIE_CHART
COMBINATION_CHART
MULTIPLE_XY_LINE_CHART
AREA_CHART
STACKED_BAR_CHART
DONUT_CHART
SPLINE_CHART
LINE_CHART_WITH_REGIONS
STACKED_AREA_CHART
SCATTER_PLOT
GUAGE_CHART

let chart = new Graph("generate <CHART_TYPE> from <JSON_DATASOURCE>")
chart.getOutputJson()

Errors Edit

Name	Description
InvalidGrammarError	Thrown after trying to parse invalid grammer
InvalidOperationError	Thrown when trying to access restricted functionality of a chart through grammar

Step Chart Edit

{
  "data1": [300, 350, 300, 0, 0, 100],
  "data2": [130, 100, 140, 200, 150, 50]
}

chart.do('where data1 as step')

chart.do('where data2 as area-step')

{
    "data": {
        "columns": [
            ["data1", 300, 350, 300, 0, 0, 100],
            ["data2", 130, 100, 140, 200, 150, 50]
        ],
        "types": {
            "data1": "step"
        }
    }
}

{
    "data": {
        "columns": [
            ["data1", 300, 350, 300, 0, 0, 100],
            ["data2", 130, 100, 140, 200, 150, 50]
        ],
        "types": {
            "types": "area-step"
        }
    }
}

Bar Chart Edit

{
  "data1": [30, 200, 100, 400, 150, 250],
  "data2": [130, 100, 140, 200, 150, 50]
}

chart.do('set bar width as 0.5')

chart.do('set bar width as 100 pixels')

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 130, 100, 140, 200, 150, 50]
        ],
        "type": "bar"
    },
    "bar": {
        "width": 100
    }
}

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 130, 100, 140, 200, 150, 50]
        ],
        "type": "bar"
    },
    "bar": {
        "width": {
            "ratio": 0.5
        }
    }
}

Donut Chart Edit

{
  "data1": [30],
  "data2": [120]
}

chart.do('set title as my-donut')

{
    "data": {
        "columns": [
            ["data1", 30],
            ["data2", 120],
        ],
        "type" : "donut"
    },
    "donut": {
        "title": "my-donut"
    }
}

Line Chart Edit

{
  "data1": [30, 200, 100, 400, 150, 250],
  "data2": [50, 20, 10, 40, 15, 25]
}

chart.do('set bar width as 0.5')

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ]
    }
}

Multiple XY Line Chart Edit

{
  "x1": [10, 30, 45, 50, 70, 100],
  "x2": [30, 50, 75, 100, 120],
  "data1": [30, 200, 100, 400, 150, 250],
  "data2": [20, 180, 240, 100, 190]
}

chart.do('set data1 for x1')
chart.do('set data2 for x2')

{
    "data": {
        "xs": {
            "data1": "x1",
            "data2": "x2",
        },
        "columns": [
            ["x1", 10, 30, 45, 50, 70, 100],
            ["x2", 30, 50, 75, 100, 120],
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 20, 180, 240, 100, 190]
        ]
    }
}

Pie Chart Edit

{
  "data1": [30],
  "data2": [120]
}

{
    "data": {
        "columns": [
            ["data1", 30],
            ["data2", 120],
        ],
        "type" : "pie"
    }
}

Scatter Plot Edit

{
  "setosa_x": [3.5, 3.0, 3.2],
  "versicolor_x": [3.2, 3.2, 3.1],
  "setosa": [0.2, 0.2, 0.2],
  "versicolor": [1.4, 1.5, 1.5]
}

{
    "data": {
        "columns": [
            ["setosa_x", 3.5, 3.0, 3.2],
            ["versicolor_x", 3.2, 3.2, 3.1],
            ["setosa", 0.2, 0.2, 0.2,],
            ["versicolor", 1.4, 1.5, 1.5],
        ],
        "type": "scatter"
    }
}

Simple XY line Chart Edit

{
  "myX": [30, 50, 100, 230, 300, 310],
  "data1": [30, 200, 100, 400, 150, 250],
  "data2": [130, 300, 200, 300, 250, 450]
}

chart.do('where myX as x')

{
    "data": {
        "x": "myX",
        "columns": [
            ["x", 30, 50, 100, 230, 300, 310],
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 130, 300, 200, 300, 250, 450]
        ]
    }
}

Spline Chart Edit

{
  "data1": [30, 200, 100, 400, 150, 250],
  "data2": [50, 20, 10, 40, 15, 25]
}

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 130, 100, 140, 200, 150, 50]
        ],
        "type": "spline"
    }
}

Stacked Area Chart Edit

{
  "data1": [300, 350, 300, 0, 0, 120],
  "data2": [130, 100, 140, 200, 150, 50]
}

chart.do('where data1 as area-spline')
chart.do('where data2 as area')
chart.do('group data1, data2')

{
    "data": {
        "columns": [
            ["data1", 300, 350, 300, 0, 0, 120],
            ["data2", 130, 100, 140, 200, 150, 50]
        ],
        "types": {
            "data1": "area-spline",
            "data2": "area-spline"
        },
        groups: [["data1", "data2"]]
    }
}

Stacked Bar Chart Edit

{
  "data1": [-30, 200, 200, 400, -150, 250],
  "data2": [130, 100, -100, 200, -150, 50],
  "data3": [-230, 200, 200, -300, 250, 250]
}

chart.do('group data1, data2')

{
    "data": {
        "columns": [
            ["data1", -30, 200, 200, 400, -150, 250],
            ["data2", 130, 100, -100, 200, -150, 50],
            ["data3", -230, 200, 200, -300, 250, 250]
        ],
        "type": "bar",
        "groups": [
            ["data1", "data2"]
        ]
    }
}

Area Chart Edit

{
  "data1": [300, 350, 300, 0, 0, 0],
  "data2": [130, 100, 140, 200, 150, 50]
}

chart.do('where data1 as area')
chart.do('where data2 as area-spline')

{
    data: {
        columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
        ],
        types: {
            data1: 'area',
            data2: 'area-spline'
        }
    }
}

Axis Label Edit

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250],
            ["sample2", 130, 300, 200, 500, 250, 350]
        ]
    },
    "axis": {
        "x": {
            "label": "undefined"
        },
        "y": {
            "label": "undefined"
        }
    }
}

chart.do('set x axis label as my-x')
chart.do('set Y axis label as my-y')

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250],
            ["sample2", 130, 300, 200, 500, 250, 350]
        ]
    },
    "axis": {
        "x": {
            "label": "my-x"
        },
        "y": {
            "label": "my-y"
        }
    }
}

Range for Axis Edit

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250]
        ]
    },
    "axis": {
        "y": {
            "max": "undefined",
            "min": "undefined"
        }
    }
}

chart.do('set y axis min as -400')
chart.do('set y axis max as 400')

{
          "data": {
              "columns": [
                  ["sample", 30, 200, 100, 400, 150, 250]
              ]
          },
          "axis": {
              "y": {
                  "max": 400,
                  "min": -400
              }
          }
      }

Rotated Axis Edit

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ],
        "types": {
            "data1": "bar",
        }
    },
    "axis": {
        "rotated": false
    }
}

chart.do('enable rotate')

{
          "data": {
              "columns": [
                  ["data1", 30, 200, 100, 400, 150, 250],
                  ["data2", 50, 20, 10, 40, 15, 25]
              ],
              "types": {
                  "data1": "bar",
              }
          },
          "axis": {
              "rotated": true
          }
      }

Data Name Edit

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ],
        "names": {
        }
    }
}

chart.do('set data1 data label as Name1')
chart.do('set data2 data label as Name2')

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ],
        "names": {
            "data1": "Name 1",
            "data2": "Name 2"
        }
    }
}

Grid Lines Edit

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250, 120, 200]
        ]
    },
    "grid": {
        "x": {
            "show": false
        },
        "y": {
            "show": false
        }
    }
}

chart.do('show grid x')
chart.do('show grid Y')

{
          "data": {
              "columns": [
                  ["sample", 30, 200, 100, 400, 150, 250, 120, 200]
              ]
          },
          "grid": {
              "x": {
                  "show": true
              },
              "y": {
                  "show": true
              }
          }
      }

Optional Grid Lines Edit

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250]
        ]
    },
   "grid": {
        "x": {
            "lines": [
            ]
        }
    }
}

chart.do('set gridline x at 20 as another-x')

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250]
        ]
    },
    "grid": {
        "x": {
            "lines": [
                {"value": 20, "text": "another-x"}
            ]
        }
    }
}

Sub Chart Edit

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250]
        ]
    },
    "subchart": {
        "show": false
    }
}

chart.do('show subchart')

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250]
        ]
    },
    "subchart": {
        "show": true
    }
}

Zoom Edit

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 150, 200, 170, 240 120, 70, 40]
        ]
    },
    "zoom": {
        "enabled": false
    }
}

chart.do('enable zoom')

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 150, 200, 170, 240 120, 70, 40]
        ]
    },
    "zoom": {
        "enabled": true
    }
}

Hide Legend Edit

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250]
        ]
    },
    "legend": {
        "show": true
    }
}

chart.do('hide legend')

{
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250]
        ]
    },
    "legend": {
        "show": false
    }
}

Legend Position Edit

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ]
    },
    "legend": {
        "position": "bottom"
    }
}

chart.do('move legend to right')

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ]
    },
    "legend": {
        "position": "right"
    }
}

Hide Tooltip Edit

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ]
    },
    "tooltip": {
        "show": true
    }
}

chart.do('hide tooltip')

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ]
    },
    "tooltip": {
        "show": false
    }
}

Tooltip Grouping Edit

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25],
            ["data3", 500, 320, 210, 340, 215, 125]
        ]
    },
    "tooltip": {
        "grouped": true
    }
}

chart.do('ungroup tooltip')

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25],
            ["data3", 500, 320, 210, 340, 215, 125]
        ]
    },
    "tooltip": {
        "grouped": false
    }
}

Chart Size Edit

{
    "size": {
          "height": "undefined",
          "width": "undefined"
    },
    "data": {
         "columns": [
             ["sample", 30, 200, 100, 400, 150, 250]
          ]
    }
 }

chart.do('set height as 500')
chart.do('set width as 1000')

{
    "size": {
        "height": 500,
        "width": 1000
    },
    "data": {
        "columns": [
            ["sample", 30, 200, 100, 400, 150, 250]
        ]
    }
}

Hide Points Edit

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ]
    },
    "point": {
        "show": true
    }
}

chart.do('hide points')

{
    "data": {
        "columns": [
            ["data1", 30, 200, 100, 400, 150, 250],
            ["data2", 50, 20, 10, 40, 15, 25]
        ]
    },
    "point": {
        "show": false
    }
}