Lightweight Chart and Reporting Plugin JSCharts

Add-ons

2026-07-26 03:25 4 次浏览 • 0 次下载 78.1KB

Lightweight Chart and Reporting Plugin JSCharts

Plugin Description: JScharts is a JavaScript toolkit for drawing charts directly in the browser. JScharts supports bar charts, pie charts, and line charts. Charts can be embedded directly into web pages, and their data can come from XML files, JSON files, or JavaScript array variables.

Updated: 2017-05-09Changed to a version without the logo.

JScharts User Guide

1. Download the JScharts Library

Download the JScharts library from the official website. We use the jscharts.js file included in the archive. It is approximately 150 KB.

2. Use the JScharts Library

Include the JScharts library in your web page file (such as .html or .jsp).

1	`<scripttype="text/javascript"` `src="js/jscharts.js"></script>`

3. Define a Container

To display an image generated by JScharts on a web page, you need to place the image inside a page container. We typically define this container using a <div> tag, and you must assign a unique ID to this DIV element. For example:

<divid="chartcontainer">This is just a replacement in case Javascriptis not available or used for SEO purposes</div>

Note: All content inside this DIV container will be replaced by the JScharts image.

4. Display a JScharts Image

Next, we need to write a small amount of code to display a line chart. First, prepare the data required for the chart. We can provide the data using a JavaScript array, where each array element consists of two elements.

The code is as follows:

<scripttype="text/javascript">
    varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
    varmyChart = new JSChart('chart_container', 'line');
    myChart.setDataArray(myData);
    myChart.draw();
</script>

The complete code is as follows:

[html] view plaincopyprint?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
 <head>  
  <title>JScharts Test</title>  
 </head>  
 <body>  
<script type="text/javascript" src="sources/jscharts.js"></script>  
<div id="chartcontainer">This is just a replacement in case Javascript is not available or used for SEO purposes</div>  
<script type="text/javascript">  
var myData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);  
var myChart = new JSChart('chartcontainer', 'line');  
myChart.setDataArray(myData);  
myChart.draw();  
</script>  
 </body>  
</html>

5. View the Results in a Browser

1) Line Chart

Open the file above in a browser. The result is as follows:

2) Bar Chart

Change the code:

varmyData = new Array([10,20], [15,10], [20,30], [25,10], [30,5]);
varmyChart = new JSChart('chartcontainer', 'line');

To:

varmyData = new Array(['Unit 1',20], ['Unit 2',10], ['Unit 3',30], ['Unit 4',10],['Unit 5',5]);
varmyChart = new JSChart('chartcontainer', 'bar');

The result will be displayed as follows:

3) Pie Chart

Change the code:

varmyChart = new JSChart('chartcontainer', 'bar');

Change it to:

varmyChart = new JSChart('chartcontainer', 'pie');

The result will be displayed as follows:

6. JScharts Data Sources

In addition to JavaScript arrays, the data required by JScharts charts can also come from JSON or XML files.

1) Code for Providing Data Using a JavaScript Array:

1	`myChart.setDataArray(myData);`

2) Code for Providing Data Using a JSON File:

myChart.setDataJSON(‘data.json’);
The contents of the data.json file are as follows:
[javascript] view plaincopyprint?
{  
    "JSChart" : {  
        "datasets" : [  
        {  
        "type" : "pie",  
        "data" : [  
        {  
        "unit" : "Unit_1",  
        "value" : "20"  
        },  
        {  
        "unit" : "Unit_2",  
        "value" : "10"  
        },  
        {  
        "unit" : "Unit_3",  
        "value" : "30"  
        },  
        {  
        "unit" : "Unit_4",  
        "value" : "10"  
        },  
        {  
        "unit" : "Unit_5",  
        "value" : "5"  
        }  
        ]  
        }  
        ]  
    }  
}

3) Code for Providing Data Using an XML File:

1	`myChart.setDataXML(‘data.xml’);`

The contents of the data.xml file are as follows:

[html] view plaincopyprint?
<?xml version="1.0"?>  
<JSChart>  
    <dataset type="pie">  
        <data unit="Unit_1" value="20"/>  
        <data unit="Unit_2" value="10"/>  
        <data unit="Unit_3" value="30"/>  
        <data unit="Unit_4" value="10"/>  
        <data unit="Unit_5" value="5"/>  
    </dataset>  
</JSChart>