Brief Intro

PlusCharts is javascript charting library which is easy to setup and configure. You can use this chart in websites, internal applications and other web applications which renders in a browser.

Currently Pluscharts supports Line, Area, Bar, Column and Pie charts. Bar, Column and Pie charts are available in 2D and 3D formats.

Set Up

Download

You may download the chart from our website. You just need to provide your email where we will send download instructions and setup guide.

Install

Include the downloaded js file pluscharts.js in the webpage.

<script src="“/js/pluscharts.js"></script>

You are ready to go! Please see article on developing your first chart

Getting Started – Your First Chart

Once you have included pluscharts.js file in your web page, you can start creating your charts right away.

Step1: Create a container element where you would like to render your chart. For e.g., we can use the following div element as the container for the chart

<div id="“demoContainer”"></div>

Step2: Create Pluscharts Object by providing basic configuration. This is

var sample2dcolumn = new PlusCharts( 
{
        "chart": {
            "type":"2dcolumn",
            "chartcontainer":"demoContainer",
            "heading":"Average Weekday Server Load",
            "subheading": "Data Transfer in MBs",
            "xaxisname":"Week Day",
            "yaxisname":"Mega bytes",
            "width": 700,
            "height": 400,
            maxy: 600,
            yaxisstep:12,
            "originx": 10,
            "originy": 10,
            "margin": 10,
            "xlabels": ['Mon','Tue','Wed','Thu','Fri'],
            "stacked": false,
        },
        "series": [{
            "name": 'Server Load',
            "color":'#33bdda',
            "data": [248,323,154,168,542]
        }],
        "style":{
            "chartheading":{ font: "18px 'Fontin Sans', Fontin-Sans, sans-serif", fill:"black"},
            "chartsubheading":{ font: "13px 'Fontin Sans', Fontin-Sans, sans-serif"},
            "legendtext":{ font: "12px 'Fontin Sans', Fontin-Sans, sans-serif", "text-anchor": "start"},
            "axisname":{ font: "13px 'Fontin Sans', Fontin-Sans, sans-serif"},
            "axislabel":{ font: "11px 'Fontin Sans', Fontin-Sans, sans-serif" }
        }
    }
);


sample2dcolumn.draw();

Step3: Draw the chart Complete code for the example


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Demo Chart</title>
    <script src='/js/herocharts-min.js'></script>
    <script> 
    window.onload = function() {
        var sample2dcolumn = new PlusCharts( 
        {
                "chart": {
                    "type":"2dcolumn",
                    "chartcontainer":"demoContainer",
                    "heading":"Average Weekday Server Load",
                    "subheading": "Data Transfer in MBs",
                    "xaxisname":"Week Day",
                    "yaxisname":"Mega bytes",
                    "width": 700,
                    "height": 400,
                    maxy: 600,
                    yaxisstep:12,
                    "originx": 10,
                    "originy": 10,
                    "margin": 10,
                    "xlabels": ['Mon','Tue','Wed','Thu','Fri'],
                    "stacked": false,
                },
                "series": [{
                    "name": 'Server Load',
                    "color":'#33bdda',
                    "data": [248,323,154,168,542]
                }],
                "style":{
                    "chartheading":{ font: "18px 'Fontin Sans', Fontin-Sans, sans-serif", fill:"black"},
                    "chartsubheading":{ font: "13px 'Fontin Sans', Fontin-Sans, sans-serif"},
                    "legendtext":{ font: "12px 'Fontin Sans', Fontin-Sans, sans-serif", "text-anchor": "start"},
                    "axisname":{ font: "13px 'Fontin Sans', Fontin-Sans, sans-serif"},
                    "axislabel":{ font: "11px 'Fontin Sans', Fontin-Sans, sans-serif" }
                }
            }
        );
        
sample2dcolumn.draw();

    };
    </script>
</head>
<body>
<div id="“demoContainer”"></div>
</body>
</html>

Congratulations! You have set up your first chart (a basic column chart) using pluscharts.js library

Next step: Learn how to configure other chart types