Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
jscharting
Advanced tools
JSCharting is a JavaScript chart library for visualizing your data across all devices and platforms. Every JSCharting license includes the full suite of 150+ advanced chart types plus Gantt charts, JavaScript Org Charts, interactive stock and finance charts, seamless grid and calendar charts, JavaScript maps, and micro charts all for no additional charge. JSCharting has all the features you need and many you don't yet know you want.
Example Charts: Chart Types | Feature Examples
Visit code.jscharting.com for a list of available releases.
<script src="https://code.jscharting.com/latest/jscharting.js"></script>
The latest release can be downloaded here.
See npm documentation to get started with npm.
npm install --save jscharting
The npm package folder jscharting/dist/
includes all the necessary charting JavaScript files and resources such as icons, polyfills, and mapping data files. The chart loads these resources dynamically as needed. The content of this folder should be accessible through http, so when building, copy this folder to a destination in the output website.
If the chart detects a script tag pointing to the main jscharting.js file, it will assume the rest of the resources are located in the same place and will load them from there.
If the JSC
namespace is imported from the jscharting.js
file as a module, the chart will not know where resources
are located and will load them from the CDN. If debug: true
chart option is set, a warning message will note that the
chart is using the CDN. In order to use local resources, point the chart baseUrl option to the location of the local
copy of the jscharting/dist/
folder.
To avoid setting the baseUrl property on every chart instance, it can be set as a global default like so:
JSC.defaults({ baseUrl: './js/jsc/' });
A wrapper module can be used to apply the baseUrl and any other default options that should be used globally such as debug, or styling options. All subsequent charts can import this wrapper instead of the chart itself to ensure the default options are always applied.
import * as JSC from "jscharting";
JSC.defaults({ baseUrl: './js/jsc/' });
export default JSC;
A target div element is required in the page for the chart to render in.
<div id="chartDiv" style="width: 100%; height: 400px;"></div>
The chart will automatically conform to the container size by default.
Instantiate a chart with some static data.
const chart = new JSC.Chart('chartDiv', {
series:[{
points: [{ x: 'A', y: 10 }, { x: 'B', y: 5 }]
}],
});
JSC.fetch() is an alias for vanilla JS fetch() function but includes a polyfill for IE11. This function makes it easy to get data for the chart.
JSC.fetch('./data.csv')
.then(response => response.text())
.then(text => {
//Use csv text
});
If data is transferred as csv, tsv or any delimiter separated values, it can be converted to JSON format. See the fetch(), CSV, and JSON tutorial for more information.
let data = JSC.csv2Json(
'date,actual,goal\n1/1/2018,5409,7000\n1/2/2018,4893,7000'
)
// ->
// [ {date: 1514786400000, actual: 5409, goal: 7000},
// {date: 1514872800000, actual: 4893, goal: 7000} ]
let points = data.map(d => {
return { x: d.date, y: d.actual };
});
//-> [{ x: 1514786400000, y: 5409 }, { x: 1514872800000, y: 4893 }]
const chart = new JSC.Chart('chartDiv', {
// Pass points to the series
series: [{
points: points
}],
// Set the x axis scale to time.
xAxis_scale_type: 'time'
});
(5 min read to hit the ground running)
The JSCharting API is designed with ease of use in mind. The chart attempts to select default options that are obvious to reduce the need to customize.
Chart types can be set easily through options such as:
const chart = new JSC.Chart('divId', { type:'line step' });
Examples of chart type settings:
Chart options are set in the chart constructor
const chart = new JSC.Chart('divId', { /*options*/ });
Or at any time after the chart is rendered with
chart.options({ /*options*/ });
JSCharting offers a declarative API with options such as
chart.options({ title: { label: { text: 'title text' }}});
However, property paths can be combined into single property names as follows:
chart.options({ title_label_text: 'title text' });
chart.options({ legend_visible: false });
//Less Detail
chart.options({ legend_template: '%icon %name' });
//More Detail
chart.options({ legend_template: '%average %sum %icon %name' });
The following code snippet sets a series palette which causes each point in a series to have an entry in the legend box.
chart.options({ defaultSeries_palette: 'default' });
chart.options({
//Title text
title_label_text:'Title text',
//Axis label text
xAxis_label_text:'Time',
yAxis_label_text:'Steps',
//Point labels
defaultPoint_label_text:'%yValue',
//Annotations
annotations:[{
position:'top',
label_text:'Annotation text'
}]
});
Quickly add UI elements to make charts more interactive.
JSC.Chart('chartDiv', {
toolbar_items: {
'Click Me': {
events_click: function(){ alert('Button clicked');}
}}
});
[3.0.2] - 2021-01-27
series.0.points = [1,2,3]
FAQs
JavaScript charting library
The npm package jscharting receives a total of 905 weekly downloads. As such, jscharting popularity was classified as not popular.
We found that jscharting demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.