RGraph Charting

By pjain      Published Dec. 29, 2019, 7:33 a.m. in blog AI-Analytics-Data   

IMPORTANT - PKMR STOPPED USING THIS RGRAPH.NET LIB as could not figure out how to do combo scatter with a line-for-regression

RGraph PKJ LIKED --> Charting Basics

About, 101 REFs

  • RGraph - lightweight enough - simple API esp for axis - pkj liked

How to draw multiple charts on a single canvas with RGraph? - Stack Overflow How to create a bank of Gauge charts How to add a javascript array to data part of RGraph - Stack Overflow javascript - Date.UTC creating wrong dates - Stack Overflow jquery - I'm trying to add multiple RGraphs canvases to website - Stack Overflow node.js: Building a graph of build times using the Go API - DZone Java RGraph with Node-Red - Scargill's Tech Blog 12 Best Charting Libraries for Web Developers ModelN/sDashboard modeln.github.io/sDashboard/example/ex.html

JavaScript charts that knock your socks off! The documentation and examples of features for the canvas charts libraries A list of guides and tutorials that accomplish specific tasks Features and examples of features that RGraph supports Adding RGraph to your website and creating faster charts Rgraph dashboards - Google Search dashboard/animation.html at master · mneedham/dashboard dashboard/thermometer.html at master · mneedham/dashboard Banker's Dashboard Page not found | StIPS Highest voted posts containing 'javascript dashboard' - Stack Overflow site:github.com search likes dislikes - Google Search 1. Installing Crab — scikit-recommender v0.1 documentation

Integration into IOS


Integration into Android

RGraph uses the HTML5 Canvas component, which is NOT accommodated in the webkit packaged with Android 1.5. RGraph will works nicely and tested with Android 2.1 and 2.2.

main/assets - Android internally maps it to file:///android_asset/ (note singular asset) - rgraphview.html goes here - see below .. main/assets/RGraph/*.js go here - all Rgraph latest versions ..

RGraph: HTML5 canvas graph library - pie chart

[No canvas support] [No canvas support]

  • Activity & layout with webview as normal .. <?xml version="1.0" encoding="utf-8"?> public class Main extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); WebView webview = (WebView) this.findViewById(R.id.webview); WebSettings webSettings = webview.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setBuiltInZoomControls(true); webview.requestFocusFromTouch(); webview.setWebViewClient(new WebViewClient()); webview.setWebChromeClient(new WebChromeClient()); webview.loadUrl("file:///android_asset/rgraphview.html"); } }

RGraph WebView Ex: Java to

  • w2davids.wordpress.com/creating-android-charts-with-htmljavascript-rgraph/

Ex 1

SRC: http://pavan2pyati.blogspot.com/2013/12/android-native-data-to-hmtl-page.html

import java.text.SimpleDateFormat; import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import android.annotation.SuppressLint; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.webkit.JavascriptInterface; import android.webkit.WebView;

public class HtmlToAndroid extends Activity{ WebView mWebview; @SuppressLint("SetJavaScriptEnabled") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.html_layout); mWebview = (WebView)findViewById(R.id.webview); mWebview.getSettings().setJavaScriptEnabled(true); // Adding javascript interface to your page. // Pass the JavaScriptInterface class & related String "AndroidNativeCode" to call android methods written mWebview.addJavascriptInterface(new JavaScriptInterface(this), "AndroidNativeCode"); mWebview.loadUrl("file:///android_asset/www/index.html"); }

public class JavaScriptInterface {
    Context mContext;
JavaScriptInterface(Context c) {
        mContext = c;
    // Simple method to pass Data to HTML
public void getTimeAndroid() {
    long date = System.currentTimeMillis(); 
    SimpleDateFormat sdf = new SimpleDateFormat("dd MMM yyyy HH:mm");
// method to send JsonArray to HTML
public void getValueJson() throws JSONException {
     JSONArray jArray = new JSONArray();
     JSONObject jObject = new JSONObject(); jObject.put("Name", "Jackson"); jObject.put("Age","24"); 
     jObject = new JSONObject(); jObject.put("Name", "Jenny"); jObject.put("Age","23"); 
     jObject = new JSONObject(); jObject.put("Name", "Fenny"); jObject.put("Age","28"); 


// HTML Android is Awesome!!

Android DATA to HTML

    &lt;Button onclick="getTime()"&gt;Time&lt;/Button&gt;
    &lt;div id="datetime"&gt;&lt;/div&gt;
    &lt;Button onclick="getJson()"&gt;JSon Data&lt;/Button&gt;
    &lt;div id="JsonDiv"&gt;&lt;/div&gt;
&lt;/body&gt; &lt;/html&gt;

Android Data

Data values are hard-coded..(naughty naughty naughty). This was done to keep things simple as possible. Ideally the data would come from a data source/content provider such as SQLite or Web service.

Sending the data from the java files (onCreate method).

JSON integ

You would need a web service sending JSON data to the javascript RGraph front-end. To do that you can use one of the popular web frameworks such as Rails, Grails, NodeJS etc. From the javascript code – you make a service call to the web service url!

Android dynamics/Animation

seekbar view to dynamically resize the pie chart by sliding the seekbar?

RGraph Charting Basics

  • Needed in all ...

  • Depends on type of chart

  • Where it is shown - multiple divs with different id useful for separate charts

Basic Common Options

// Chart title, margins title: 'A line chart with a gradient',

hmargin: 10,

gutterLeft: 50,
gutterBottom: 50,

//Chart colors - BG backgroundColor: '#eee',

//Grid options backgroundGridBorder: false, backgroundGridHlines: false, backgroundGridColor: 'white',

//backgroundGridHlines: true,
backgroundGridVlinesCount: 20,
backgroundGridLinewidth: 2,

//Axis & Labels xaxis: false,

yaxisLabelsCount: 0, // if no 
yaxis: false,
yaxisDecimals: 3

Data integration

data: [1.911,1.66,1.789,2.113,2.318,2.472,2.652,3.552,4.420,4.102,4.598],
options: xaxisLabels: ['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015'],

//Line options colors: ['#0085BD'], // 'black' linewidth: 3,

//Markers tickmarksStyle: 'circle', // 'filledcircle', tickmarksLinewidth: 5, tickmarksSize: 7, // if size not mentioned default small


  • X axis scale https://www.rgraph.net/demos/svg-scatter-xscale.html
  • minimum value so doesn't begin at zero (default)
  • Appends units to numbers on scale
    data = [
    scatter = new RGraph.SVG.Scatter({
        id: 'cc',
        data: data,
        options: {
            xaxisScale: true,
            xaxisUnitsPost: 'Kg',
            xaxisMax: 200,
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false

Vertical Chart GOOD line

  • vertical line - note uses the scatter chart - not line included lib- rgraph.net/demos/svg-scatter-vertical-line.html Scatter chart with a connecting line so it looks like a line chart

    // <-- note the aspect ratio

    data = [{x:50, y:1}, {x:42, y:3}, {x:89, y:5}, {x:76, y:7}, {x:16, y:9}, {x:44, y:11}, {x:44, y:13} ]; new RGraph.SVG.Scatter({ id: 'chart-container', data: data, options: { backgroundGridVlinesCount: 5, backgroundGridHlines: false, backgroundGridBorder: false, line: true, lineLinewidth: 2, yaxisMax: 14, xaxisMin: 0, xaxisMax: 100, xaxisScale: true, xaxisLabelsCount: 5, xaxisLabelsPositionEdgeTickmarksCount: 5, yaxisLabelsPositionEdgeTickmarksCount: 14, yaxisLabels: ['', 'Bazz', '', 'Lucy', '', 'Pete', '', 'Olga', '', 'Hank', '', 'Jane', '', 'Jack', ''], yaxisScale: false, gutterLeft: 50, tickmarksSize: 0, xaxis: false } }).draw();

Line charts - Multi-Line

GOOD line With Labels above ..

// https://www.rgraph.net/demos/svg-line-labelsabove.html
new RGraph.SVG.Line({
    id: 'chart-container',
    data: [0.05,0.06,0.01,0.06,0.09,0.02,0.07],
    options: {
        labelsAbove: true,
        labelsAboveDecimals: 1,
        spline: true

3 SVG lines with tooltips GOOD

no vertical grid https://www.rgraph.net/demos/svg-line-tooltips.html

  • add to requirements above line.js

    new RGraph.SVG.Line({ id: 'chart-container', data: [ [15,23,-5,-15,23,35,31], [45,23,45,12,50,12,45], [5,6,3,5,8,9,44] ], options: { hmargin: 15, gutterLeft: 50, gutterRight: 35, gutterBottom: 50, yaxisMin: 'mirror', yaxisMax: 50, yaxisUnitsPre: '$', linewidth: 3, backgroundGridVlinesCount: 7, backgroundGridHlinesCount: 10, tooltips: [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ], xaxisLabels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] } }).draw();

Simple 2-3 line spline Charts

// note data HAS to align with xaxisLabels  https://www.rgraph.net/demos/svg-line-front-page.html
new RGraph.SVG.Line({
    id: 'chart-container',
    data: [
    options: {
        yaxis: false,
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
        hmargin: 15,
        gutterLeft: 75,
        gutterRight: 25,
        gutterBottom: 35,
        yaxisUnitsPre: '$',
        spline: true,
        filledAccumulative: true, //"stack" the datasets and also has the trace effect.
        linewidth: 0,
        filledOpacity: 0.3,
        title: 'A filled spline chart',
        titleFont: 'Arial black',
        titleItalic: true,
        titleColor: 'gray'
  • Simple 3 line angular line chart https://www.rgraph.net/demos/svg-line-multiple-lines.html
  • see also example with log scale on Y axis - https://www.rgraph.net/demos/svg-line-logarithmic.html new RGraph.SVG.Line({ id: 'chart-container', data: [ [19,165,132,111,185,149,199], [48,46,51,94,84,25,65], [35,26,15,23,43,12,26] ], options: { linewidth: 3, gutterLeft: 50, gutterBottom: 50, xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], title: 'A line chart with multiple lines' } }).draw();

  • No xy axis lines -see https://www.rgraph.net/demos/svg-line-ufo-sightings.html

  • trace effect Turquoise LARGE SVG 1 line chart https://www.rgraph.net/demos/svg-line-turquoise.html

    new RGraph.SVG.Line({ id: 'chart-container', data: [1.911,1.66,1.789,2.113,2.318,2.472,2.652,3.552,4.420,4.102,4.598], options: { backgroundColor: '#eee', backgroundGridBorder: false, backgroundGridHlines: false, colors: ['#0085BD'], linewidth: 3, hmargin: 0, gutterLeft: 50, gutterBottom: 50, tickmarksStyle: 'circle', tickmarksLinewidth: 5, tickmarksSize: 7, xaxisLabels: ['2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015'], xaxis: false, yaxis: false, yaxisDecimals: 3 } }).trace();

  • 3 Spline lines shadow, no vertical grid https://www.rgraph.net/demos/svg-line-spline.html new RGraph.SVG.Line({ id: 'chart-container', data: [ [4,1,8,6,3,5,4,2,9,3,6,3], [1,9,6,3,4,6,8,5,5,5,2,8], [4,6,3,5,2,8,9,5,6,5,6,1], [4,8,6,3,5,4,2,5,1,6,9,9] ], options: { backgroundGridVlines: false, backgroundGridBorder: false, yaxis: false, gutterLeft: 50, gutterBottom: 50, linewidth: 5, spline: true, shadow: true, shadowOpacity: .25, title: 'A multi-line spline chart', xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] } }).draw();

Multi-line stacked Filled

see: stacked multi-line https://www.rgraph.net/demos/svg-line-filled-accumulative.html

  • Fill gradient https://www.rgraph.net/demos/svg-line-gradients.html backgroundGridColor: 'Gradient(#ddd:white)', filled: true, filledColors: ['Gradient(blue:#ccf)'],

see: Filled Spline 2 lines https://www.rgraph.net/demos/svg-line-spline-filled.html see also where color below lower line is transparent - giving a wave like fill effect - rgraph.net/demos/svg-line-range.html see: https://www.rgraph.net/demos/svg-line-nvd.html see: https://www.rgraph.net/demos/svg-line-filled.html

Date - time axis

Horiz line date axis IMP

  • note uses the scatter chart https://www.rgraph.net/demos/svg-scatter-line.html data = [{x:'23:59 04-01-2012', y:1}, {x:'2012 5th February', y:6}, {x:'Mar 9 2012', y:6}, {x:'2012/08/30', y:9}, {x:'2012-09.12', y:5}, {x:'2012 November 5', y:4} ]; new RGraph.SVG.Scatter({ id: 'chart-container', data: data, options: { line: true, lineLinewidth: 2, backgroundGridVlines: false, backgroundGridBorder: false, yaxis: false, tickmarksSize: 0, colors: ['black'], title: 'A Scatter chart with a connecting line ', xaxisMin: '2012/01/01', xaxisMax: '31st dec 2012 23:59:59', xaxisLabels: ['Jan','Feb','Mar','Apr', 'May','Jun','Jul','Aug', 'Sep','Oct','Nov','Dec'] } }).draw();

Scatter using datetime values GOOD!

* Points have tooltips, no vertical gridlines - good for horiz

data = [
    {x:'23:59 15-01-2012', y:5, tooltip: 'Yunka'},
    {x:'2012 15th February', y:6, tooltip: 'Ally'},
    {x:'Mar 15 2012', y:6, tooltip: 'Fred!'},
    {x:'2012/04/15', y:6, tooltip: 'Tom!'},
    {x:'2012-05.15', y:5, tooltip: 'Rachel!'},
    {x:'2012 June 15', y:4, tooltip: 'Jone!'},
    {x:'July 2012 15th', y:5, tooltip: 'Luis!'},
    {x:'aug 15th 2012', y:6, tooltip: 'Peter!'},
    {x:'15th september 2012', y:7, tooltip: 'Harry!'},
    {x:'15 Oct 2012', y:6, tooltip: 'Bert!'},
    {x:'2012.11.15', y:4, tooltip: 'Bob!'},
    {x:'2012.12-15 00:00:00', y:5, tooltip: 'Bill!'}
new RGraph.SVG.Scatter({
    id: 'chart-container',
    data: data,
    options: {
        // tickmarksStyle: 'plus',
        // tickmarksStyle: 'cross',
        // tickmarksStyle: 'square',
        // tickmarksStyle: 'rect',
        // tickmarksStyle: 'dot',
        // tickmarksStyle: 'circle',
        // tickmarksStyle: 'cross',
        tickmarksStyle: 'cross',
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        yaxis: false,
        tickmarksSize: 15,
        colors: ['red'],
        title: 'A Scatter chart using datetime values',
        titleItalic: true,
        titleBold: true,
        //tooltipsEvent: 'click',
        xaxisMin: '2012/01/06 12:14:12',
        xaxisMax: '31st dec 2012',
        xaxisLabels: [

Fancy Charts, background, Dark Transparency

SVG Lines

see: SVG Line chart with a dark theme https://www.rgraph.net/demos/svg-line-dark.html see: dark background, transparency filled: https://www.rgraph.net/demos/svg-line-filled-dark.html see: dark background trace animation: https://www.rgraph.net/demos/svg-line-effect-trace.html

Dynamically updating JS charts

https://www.rgraph.net/demos/svg-line-dynamic3.html https://www.rgraph.net/demos/svg-line-dynamic2.html https://www.rgraph.net/demos/svg-line-dynamic.html

RGraph --- Dashboard & Guages

Line chart showing variations

  • https://www.rgraph.net/demos/svg-line-gsc.html Key is the YAxis scale - range given default:0 to 1200 - so random range 150=450 squished well in first of 2 600#

    new RGraph.SVG.Line({ id: 'chart-container', data: (function () { var arr = []; for (var i=0; i<90; ++i) { arr.push(RGraph.SVG.random({min: 150, max: 450})) } return arr; })(), options: { colors: ['blue'], linewidth: 1, yaxisMax: 1200, backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false, yaxisLabelsCount: 2, yaxisTextColor: '#aaa', yaxisLabelsOffsety: 10, yaxisLabelsOffsetx: 10, yaxisLabelsHalign: 'left', gutterTop: 5, gutterBottom: 5, gutterLeft: 50, textSize: 8, hmargin: 35 } }).draw();

Error Bars on Lines/Scatter? - GOOD Estimating range or low-high values

  1. Scatter chart with errorbars https://www.rgraph.net/demos/svg-scatter-errorbars.html The errorbars can be both upper and lower values. Errorbars can be used to show a range of possible values or standard-deviation etc. They can also be coloured indiviually if so desired.

    var data1 = [ {x:1, y:7, errorbar: 3, color: 'red'}, {x:2, y:5, errorbar: {max: 6, color: 'purple', linewidth: 2}, color: 'red'}, {x:3, y:3, errorbar: {min: 1, max: 1}, color: 'red'} ]; var data = [ {x:7, y:7, errorbar: {min: 1, max: 1}, color: 'red'}, {x:8, y:5, errorbar: {min: 1, max: 1}, color: 'red'}, {x:10, y:3, errorbar: {min: 1, max: 1}, color: 'red'} ]; new RGraph.SVG.Scatter({ id: 'chart-container', data: [data, data1], options: { gutterLeft: 35, xaxisMin: 0, xaxisMax: 12, xaxisLabels: ['Q1', 'Q2','Q3','Q4'], tickmarksStyle: 'circle' } }).draw();

  2. LINE Error Bars https://www.rgraph.net/demos/svg-line-errorbars.html The errorbars can have different min/max values, they can be colored differently, the width of the caps can be configured and the linewidth can be changed. Container seems different - maybe if error bars overflow ..

    line = new RGraph.SVG.Line({ id: 'cc', data: [ [1,5,1,2,1,2,1], [5,5,5,3,4,6,8] ], options: { linewidth:3, filled: true, filledAccumulative: true, errorbars: [ {min: 1, max: 1, color: 'red', linewidth: 3,capwidth: 25}, 1, {min: null, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1}, {min: 1, max: 1} ], errorbarsColor: 'black', errorbarsLinewidth: 1, errorbarsCapwidth: 10, colors: ['rgba(255,0,0,0.25)','rgba(0,0,255,0.25)'], hmargin: 20, xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'], //xaxis: false, yaxis: false, backgroundGridVlines: false, backgroundGridBorder: false } }).draw();

Bubble Chart

  • Simple great 3d lookng chart RGraph.svg.scatter.js

  • As well as X and Y points it also has a Z point as well which makes the chart into a Bubble chart.

  • The X labels are not positioned - just spread evenly about X axis
  • Y axis are numbered . dataset1 = [ {x: 10, y: 5, z: 10, color: 'red'}, {x: 20, y: 8, z: 8, color: 'yellow'}, {x: 30, y: 2, z: 3, color: 'blue'}, {x: 40, y: 5, z: 5, color: 'pink'}, {x: 50, y: 3, z: 6, color: 'black'}, {x: 60, y: 8, z: 1, color: 'magenta'}, {x: 70, y: 9, z: 2, color: 'cyan'}, {x: 80, y: 4, z: 8, color: 'red'} ]; var scatter = new RGraph.SVG.Scatter({ id: 'chart-container', data: [dataset1], options: { gutterTop: 50, xaxisMax: 100, xaxisLabels: ['Lower half','Upper half'], bubble: true, bubbleMaxValue: 10, bubbleMaxRadius: 50, bubbleColorsSolid: false, backgroundGridVlines: false, backgroundGridBorder: false, yaxis: false, colors: ['blue', 'red'], title: 'A Scatter/Bubble chart' } }).draw();

RGraph Data

Passing Arguments/Data to JS from Android

Remote connectors - CSV, JSON, GSheets

CSV Reader

https://www.rgraph.net/demos/svg-line-csv.html SVG Line chart using the trace effect https://www.rgraph.net/demos/svg-line-coco.html

JSON fetch ..

  • https://www.rgraph.net/demos/svg-line-json.html add: To prevent the scale from changing it has been set at 100.

    RGraph.SVG.AJAX.getJSON('/getdata.html?json', function (json) { new RGraph.SVG.Line({ id: 'chart-container', data: json.data, options: { xaxisLabels: json.labels, gutterLeft: 50, yaxisMax: 100, yaxis: false, linewidth: 3, shadow: true, shadowOpacity: 0.25 } }).trace(); });


Need to add before scatter.js include ..

https://www.rgraph.net/demos/svg-line-sheets.html https://www.rgraph.net/demos/svg-scatter-sheets.html



Super custom, markers, etc


rGraph in WebView ----

CHART: rgraph-> DIA LITE

Charting 101



Local Testing

DJ Integration

Core 101

RGraph Tutorials


There are no comments yet

Add new comment

Similar posts

Politics and Social Networks

Markov Models Quickstart

Monte Carlo Models, Chains and Monte Carlo Simulation

Datascience, Big Data, Analytics and Visualization Learning Guide