Zchart is a web app that helps display statistical data in a clear and simple way.
It's a serverless, user-friendly, Chart JS and VueJS 2 based and "ready to use" solution.
You can give it any JSON data and it will display it on a simple and readable chart.
$ git clone https://github.com/zenetys/zchart.git
$ cd zchart
$ npm install or $ yarn
$ npm run serve
or
$ yarn serve
To provide it with some data, there are two ways using the raw-data prop :
- Feed it some local data
- Give it a URL for a JSON file (remote or local) and it will fetch the data using Axios
By default, and depending on the number of dimensions in the structure of your data, it will :
- Either represent it as a Pie chart with a "count" on multiple entries for single dimension data
- Or display it as a Bar chart with two axes
The AutoChart is the main component used by the app. It consists of an instance of ChartJS and methods that help format your data.
You can give it a lightly customisable configuration by using the config prop :
<auto-chart :raw-data="myData" :config="myConfig" />/**
* @param {Object|Array|String} rawData - The source of your data.
* @param {Object|String} config - Configuration object for the chart.
* @param {String} config.type - Force a specific type of chart between Pie and Bar.
* @param {String} config.title - Title of the chart.
*/Note : setting either raw-data or config to a String value means it's a URL and it will be fetched.
In this section you will find information related to the usage of the AutoChart component as a standalone, complete library that you can inject in any HTML file or template.
In order to operate on its own, the AutoChart requires a few tools :
- Zchart's CSS
- Vue 2
- Axios (for fetching data or configs from remote URLs)
- Zchart
Zchart's plugin will auto-install as soon as Vue is detected and the component will then be readily available.
Then, all you need is a small JS script in order to create a Vue instance and set your table configuration.
Here's a basic snippet you can put in your HTML file or template :
<!DOCTYPE html>
<html>
<head>
<!-- CSS REQUIREMENTS -->
<!-- Zchart CSS -->
<link href="https://unpkg.com/pimise-zchart-test@latest/dist/style.css" rel="stylesheet" />
</head>
<body>
<!-- JS REQUIREMENTS -->
<!-- Vue 2 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!-- Axios, for fetching remote URLs -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.28.0/dist/axios.min.js"></script>
<!-- Zchart -->
<script src="https://unpkg.com/pimise-zchart-test@latest/dist/zchart.umd.js"></script>
<div id="auto-chart-container">
<auto-chart v-if="isDataReady" :raw-data="ips" />
</div>
<script>
new Vue({
el: '#auto-chart-container',
data() {
return {
ips: [],
isDataReady: false,
};
},
async mounted() {
// Fetch test data from a remote server and select a single set of data to display (IP addresses)
const response = await axios.get(
'https://www.pims-tools.fr/webdev/test_data/zchart/logs-sample.json'
);
this.ips = response.data.map((item) => item.ip);
this.isDataReady = true;
},
});
</script>
<style scoped lang="scss">
body {
height: 90vh;
}
#auto-chart-container {
height: 100%;
}
</style>
</body>
</html>npm run lib
or
yarn lib
Then you can pack the package to test it locally
npm pack
or
yarn pack
Then you can install it
npm install file:<path of the package>
or
yarn add file:<path of the package>