mEmMini by Damion Mullins

Clickable to view at 100% Users can change graph types on the fly Configurable colors, sizes, labels, values, etc... Pie, Line, Bar, Scatter Plot Graphs, and Info Graphics You can place data on top of any image Cross-browser & Device Compatible Written in plain JavaScript (i.e. no dependencies and 100% modifiable)

Instructions:

Include easyGraph.js to your application or website
Add canvas elements anywhere you would like a graph
Give each canvas element a unique id
Setup your configurations in the API (i.e. {...}} as shown below
initialize each graph by running: new EasyGraphs({...})

Make sure to click on the graphs!
Also, you can make changes to the configurations and then click the "Run Changes" button to see your changes.

Info Graphic Example

Run Changes

Configuration API

{
    "elementId": "myGraph",                                 /*id of canvas element*/
    "graphType": "infoGraphic",                             /*Graph types: pie, line, bar, scatterPlot, infoGraphic*/
    "bgImageAndColor": ["/img/usa.png", "#cccccc"],         /*Back ground color and image for your graph (not required - default is white)*/
    "graphName": "U.S. 2019 Population by State (in millions)", /*Graph Name (not required)*/
    "graphNameFontSize": 40,                                /*Font size of graph name (not required)*/
    "graphSizeWidth": "100%",                               /*CSS width and unit (i.e %, px, etc...)*/
    "graphSizeHeight": "100%",                              /*CSS height and unit (i.e %, px, etc...)*/
    "addModalWindowOption": "yes",                          /*Allow users to click on graph to get more options (i.e. yes/no)*/
    "modalGraphChoices": ["pie", "line", "bar", "scatterPlot", "infoGraphic"], /*If enabling addModalWindowOption, add the graphs that you would like to show (empty equals all)*/
    "colorConfig": {                                        /*Colors (i.e. hex or color name). None of these colors are required, but they are recommended*/
        "xAxis": "#6699cc",                                 /*x axis color*/
        "yAxis": "#6699cc",                                 /*y axis color*/
        "xAxisValues": "#333333",                           /*x axis values colors*/
        "yAxisValues": "#333333",                           /*y axis values colors*/
        "graphName": "#333333",                             /*Graph name color*/
        "xAxisLabel": "#6699cc",                            /*x axis label color*/
        "yAxisLabel": "#6699cc",                            /*y axis label color*/
        "dataPoints": ["#333333"],                          /*Color of each set of data points (i.e. [color1, color2, etc...])*/
        "graphLine": ["#BCC6CC", "#98AFC7", "#6D7B8D"],     /*Color of each graph line (i.e. [color1, color2, etc...]*/
        "bars": [],                                         /*Color of each bar in bar graph (i.e. [color1, color2, etc...])*/
        "xTicks": "#6699cc",                                /*x axis tick mark color*/
        "yTicks": "#6699cc",                                /*y axis tick mark color*/
        "trendLine": ["#BCC6CC", "#98AFC7", "#6D7B8D"],     /*Each line of best fit color (i.e. [color1, color2, etc...])*/
        "pie": [                                            /*Color of each slice in each pie graph (not required)*/
            []
        ]
    },
    /*Each set of data points.  Making the y point an object where the point is the index and the label is the value will allow you to have a label at that point.*/
    "dataPointsXandY": [                                    
        {
            "1":{"35.5":"CA (35.5)"},
            "2":{"28.9":"TX (28.9)"},
            "3":{"21.4":"FL (21.4)"},
            "4":{"19.4":"NY (19.4)"},
            "5":{"12.8":"PA (12.8)"},
            "6":{"12.6":"IL (12.6)"},
            "7":{"11.6":"OH (11.6)"},
            "8":{"10.6":"GA (10.6)"},
            "9":{"10.4":"NC (10.4)"},
            "10":{"9.9":"MI (9.9)"},
            "11":{"8.8":"NJ (8.8)"},                    
            "12":{"8.5":"VA (8.5)"}, 
            "13":{"7.6":"WA (7.6)"},
            "14":{"7.2":"AZ (7.2)"},
            "15":{"6.9":"MA (6.9)"},
            "16":{"6.8":"TN (6.8)"},            
            "17":{"6.7":"IN (6.7)"},
            "18":{"6.1":"MO (6.1)"},
            "19":{"6.0":"MD (6.0)"},
            "20":{"5.8":"WI (5.8)"},
            "21":{"5.7":"CO (5.7)"},
            "22":{"5.6":"MN (5.6)"},
            "23":{"5.1":"SC (5.1)"},
            "24":{"4.9":"AL (4.9)"},
            "25":{"4.6":"LA (4.6)"},
            "26":{"4.4":"KY (4.4)"},
            "27":{"4.2":"OR (4.2)"},
            "28":{"3.9":"OK (3.9)"},
            "29":{"3.5":"CT (3.5)"},
            "30":{"3.2":"UT (3.2)"},
            "31":{"3.1":"IA (3.1)"},
            "32":{"3.0":"NV (3.0)"},
            "33":{"3.0":"AR (3.0)"},
            "34":{"2.9":"MS (2.9)"},
            "35":{"2.9":"KS (2.9)"},
            "36":{"2.0":"NM (2.0)"},
            "37":{"1.9":"NE (1.9)"},
            "38":{"1.7":"ID (1.7)"},
            "39":{"1.7":"WV (1.7)"},
            "40":{"1.4":"HI (1.4)"},
            "41":{"1.3":"NH (1.3)"},
            "42":{"1.3":"ME (1.3)"},
            "43":{"1.3":"MT (1.3)"},
            "44":{"1.0":"RI (1.0)"},
            "45":{"0.9":"DE (0.9)"},
            "46":{"0.8":"SD (0.8)"},
            "47":{"0.7":"ND (0.7)"},
            "48":{"0.7":"AK (0.7)"},
            "49":{"0.7":"DC (0.7)"},
            "50":{"0.6":"VT (0.6)"},
            "51":{"0.5":"WY (0.5)"}
        }
    ],	
    /*Location of each datapoint in each set for infoGraphic*/
    "infoGraphicPointLocations": [                   
        {
            "1": [200, 260], 
            "2": [500, 375], 
            "3": [850, 425], 
            "4": [850, 175], 
            "5": [850, 210], 
            "6": [670, 240], 
            "7": [770, 230], 
            "8": [800, 360], 
            "9": [850, 300],
            "10": [750, 170],
            "11": [930, 210],
            "12": [850, 265],
            "13": [200, 90],
            "14": [290, 320],           
            "15": [970, 170],            
            "16": [720, 310],
            "17": [730, 260],
            "18": [620, 260],
            "19": [930, 255],
            "20": [670, 150],
            "21": [400, 260],
            "22": [600, 120],
            "23": [850, 340],
            "24": [730, 340],
            "25": [630, 380],
            "26": [730, 285],
            "27": [200, 150],
            "28": [540, 320],
            "29": [930, 200],
            "30": [320, 250],
            "31": [620, 220],
            "32": [250, 230],
            "33": [620, 340],
            "34": [680, 360],
            "35": [520, 270],
            "36": [400, 320],
            "37": [490, 220],
            "38": [300, 150],
            "39": [820, 250],
            "40": [450, 490],
            "41": [940, 140],
            "42": [970, 100],
            "43": [350, 120],
            "44": [940, 190],
            "45": [930, 225],
            "46": [490, 170],
            "47": [490, 120],
            "48": [200, 400],
            "49": [930, 270],
            "50": [920, 150],
            "51": [380, 180]
        }
    ], 
    "infoGraphicWidthAndHeight": [1000, 500],               /*Width and height of the graphic (not required, but highly recommended  )*/        
    "infoGraphicPointFontSize": "10",                       /*Font size of each info graphic point (not required)*/
    "tickValueFontSize": 14,                                /*Font size of all tick values (not required)*/
    "labelFontSize": 30,                                    /*Font size of both axis labels (not required)*/
    "tickLength": 10,                                       /*Length of all tick markss (not required)*/
    "xAxisLabel": "My X Axis",                              /*x axis label name (not required)*/
    "xTickMarkSpacing": 30,                                 /*Space between each x axis tick mark (not required)*/
    "xAxisValues": [0, 51],                                 /*Range of values from 0 to nth number (required)*/
    /*Change text of x axis values i.e. {x:"Text..."} (not required)*/
    "xAxisValueAliases": {
        "1": "CA", 
        "2": "TX", 
        "3": "FL", 
        "4": "NY", 
        "5": "PA", 
        "6": "Il", 
        "7": "OH", 
        "8": "GA", 
        "9": "NC", 
        "10": "MI", 
        "11": "NJ",
        "12": "VA",
        "13": "WA",
        "14": "AZ",
        "15": "MA",
        "16": "TN",
        "17": "IN",
        "18": "MO",
        "19": "MD",
        "20": "WI",
        "21": "CO",
        "22": "MN",
        "23": "SC",
        "24": "AL",
        "25": "LA",
        "26": "KY",
        "27": "OR",
        "28": "OK",
        "29": "CT",
        "30": "UT",
        "31": "IA",
        "32": "NV",
        "33": "AR",
        "34": "MS",
        "35": "KS",
        "36": "NM",
        "37": "NE",
        "38": "ID",
        "39": "WV",
        "40": "HI",
        "41": "NH",
        "42": "ME",
        "43": "MT",
        "44": "RI",
        "45": "DE",
        "46": "SD",
        "47": "ND",
        "48": "AL",
        "49": "DC",
        "50": "VT",
        "51": "WY"
    },      
    "xAxisValuesEveryNth": 1,                               /*Bold each x axis value on every nth number (e.g. every 7th value) (not required)*/
    "xOnlyShowNthValues": "false",                           /*Only show each x axis value based on xAxisValuesEveryNth (not required)*/
    "yTickMarkSpacing": 10,                                 /*Space between each y axis tick mark (not required)*/
    "yAxisValues": [0, 350],                                /*Range of values from 0 to nth number (required)*/
    "yAxisValueAliases": {},
    "yAxisLabel": "My Y Axis",                              /*y axis label name (not required)*/
    "yAxisValuesEveryNth": 7,                               /*Bold each y axis value on every nth number (e.g. every 7th value) (not required)*/
    "yOnlyShowNthValues": "true"                            /*Only show each y axis value based on yAxisValuesEveryNth (not required)*/
}

Basic Bar Graph Example

Run Changes

Configuration API

{
    "elementId": "mySecondGraph",                                 /*id of canvas element*/
    "graphType": "bar",                             /*Graph types: pie, line, bar, scatterPlot, infoGraphic*/
    "bgImageAndColor": ["/img/fruit.jpg"],         /*Back ground color and image for your graph (not required - default is white)*/
    "graphName": "Basic Graph Example", /*Graph Name (not required)*/
    "graphNameFontSize": 40,                                /*Font size of graph name (not required)*/
    "graphSizeWidth": "100%",                               /*CSS width and unit (i.e %, px, etc...)*/
    "graphSizeHeight": "100%",                              /*CSS height and unit (i.e %, px, etc...)*/
    "addModalWindowOption": "yes",                          /*Allow users to click on graph to get more options (i.e. yes/no)*/
    "modalGraphChoices": ["pie", "line", "bar", "scatterPlot", "infoGraphic"], /*If enabling addModalWindowOption, add the graphs that you would like to show (empty equals all)*/
    "colorConfig": {                                        /*Colors (i.e. hex or color name). None of these colors are required, but they are recommended*/
        "xAxis": "#6699cc",                                 /*x axis color*/
        "yAxis": "#6699cc",                                 /*y axis color*/
        "xAxisValues": "#333333",                           /*x axis values colors*/
        "yAxisValues": "#333333",                           /*y axis values colors*/
        "graphName": "#666666",                             /*Graph name color*/
        "xAxisLabel": "#6699cc",                            /*x axis label color*/
        "yAxisLabel": "#6699cc",                            /*y axis label color*/
        "dataPoints": ["#333333"],                          /*Color of each set of data points (i.e. [color1, color2, etc...])*/
        "graphLine": ["#BCC6CC", "#98AFC7", "#6D7B8D"],     /*Color of each graph line (i.e. [color1, color2, etc...]*/
        "bars": [],                                         /*Color of each bar in bar graph (i.e. [color1, color2, etc...])*/
        "xTicks": "#6699cc",                                /*x axis tick mark color*/
        "yTicks": "#6699cc",                                /*y axis tick mark color*/
        "trendLine": ["#BCC6CC", "#98AFC7", "#6D7B8D"],     /*Each line of best fit color (i.e. [color1, color2, etc...])*/
        "pie": [                                            /*Color of each slice in each pie graph (not required)*/
            []
        ]
    },
    /*Each set of data points.  Making the y point an object where the point is the index and the label is the value will allow you to have a label at that point.*/
    "dataPointsXandY": [                                    
        {
            "1":{"5":"Apples"},
            "2":{"3":"Oranges"},
            "3":{"15":"Bananas"},
            "4":{"10":"Grapes"},
            "5":{"2":"Rasberries"},
            "6":{"25":"Blue Berries"},
            "7":{"11":"Strawberries"},
            "8":{"8":"Grapefruit"},
            "9":{"9":"Kiwi"},
            "10":{"28":"Pineapple"}
        }
    ],	
    /*Location of each datapoint in each set for infoGraphic*/
    "infoGraphicPointLocations": [
        {
            "1": [50, 75], 
            "2": [50, 100], 
            "3": [50, 125], 
            "4": [50, 150], 
            "5": [50, 175], 
            "6": [50, 200], 
            "7": [50, 225], 
            "8": [50, 250], 
            "9": [50, 275],
            "10": [50, 300]
        }
    ], 
    "infoGraphicWidthAndHeight": [1000, 500],               /*Width and height of the graphic (not required, but highly recommended  )*/        
    "infoGraphicPointFontSize": "20",                       /*Font size of each info graphic point (not required)*/
    "tickValueFontSize": 14,                                /*Font size of all tick values (not required)*/
    "labelFontSize": 30,                                    /*Font size of both axis labels (not required)*/
    "tickLength": 10,                                       /*Length of all tick markss (not required)*/
    "xAxisLabel": "My X Axis",                              /*x axis label name (not required)*/
    "xTickMarkSpacing": 50,                                 /*Space between each x axis tick mark (not required)*/
    "xAxisValues": [0, 10],                                 /*Range of values from 0 to nth number (required)*/
    /*Change text of x axis values i.e. {x:"Text..."} (not required)*/
    "xAxisValueAliases": {},      
    "xAxisValuesEveryNth": 1,                               /*Bold each x axis value on every nth number (e.g. every 7th value) (not required)*/
    "xOnlyShowNthValues": "false",                           /*Only show each x axis value based on xAxisValuesEveryNth (not required)*/
    "yTickMarkSpacing": 20,                                 /*Space between each y axis tick mark (not required)*/
    "yAxisValues": [0, 30],                                /*Range of values from 0 to nth number (required)*/
    "yAxisValueAliases": {},
    "yAxisLabel": "My Y Axis",                              /*y axis label name (not required)*/
    "yAxisValuesEveryNth": 1,                               /*Bold each y axis value on every nth number (e.g. every 7th value) (not required)*/
    "yOnlyShowNthValues": "true"                            /*Only show each y axis value based on yAxisValuesEveryNth (not required)*/
}