Charts and gauges without JavaScript ... well just a tiny bit.

Related tags

Charts tlx-chart
Overview

tlx-chart

The module tlx-chart provides both a JavaScript component oriented and and reactive HTML custom element oriented TLX based wrapper for the Google Charts library. Although they have not all been tested yet, theoretically all charts in the Google gallery should work.

Installation

npm install tlx-chart

Usage

To create a chart using HTML use the tag tlx-chart and provide attributes in hyphenated form that match the camelCased object keys used in the Google documentation, e.g.

<tlx-chart id="mychart" 
	chart-type="PieChart" 
	chart-editable="true" 
	chart-columns="${['Element','Percentage']}" 
	chart-data="${[['Nitrogen',0.78],['Oxygen',0.21],['Other',0.01]]}"
</tlx-chart>

Will produce this chart:

PieChart Example

You can also add event handlers. The ones below just log co-ordinates to the console.

<tlx-chart id="mychart" 
	chart-type="PieChart" 
	chart-editable="true" 
	chart-columns="${['Element','Percentage']}" 
	chart-data="${[['Nitrogen',0.78],['Oxygen',0.21],['Other',0.01]]}" 
	chart-on="${{select: function() { console.log(this.getSelection())}, mouseover: (event) => console.log(event)}}"
</tlx-chart>

You can create charts from JavaScript using the factory function tlxChart.create(config). The code below will produce the same chart.

	const chart = tlxChart.create({
		chartType:"PieChart",
		chartEditable: true, 
		chartColumns: ['Element','Percentage'],
		chartData: [['Nitrogen',0.78],['Oxygen',0.21],['Other',0.01]],
		chartOn= {select: function() { console.log(this.getSelection())}, mouseover: (event) => console.log(event)}
	});
	document.body.appendChild(chart);

Element Specification

tlx-chart

A custom HTML element with a tlx wrapper that renders Google Charts.

Attributes

chart-type - In alphabetical order (click on the names for examples), one of: BarChart, BubbleChart, ColumnChart, ComboChart, Gauge, LineChart, OrgChart, PieChart, ScatterChart, Table, TreeMap.

chart-editable - A unary attribute, which if present, provides an Edit button the end user can click on to invoke an editor to change the chart type or appearance such as font labels, etc. Note, this editor does not support changing data. Use tlx-chart-editor element to change data.

chart-columns - An array of column names. The value must be inside "${ }" to tell the tlx engine to treat this as a JavaScript object, e.g. chart-columns="${['Element','Percentage']}".

chart-data - An array of arrays, one for each row of data being charted. The value must be inside "${ }" to tell the tlx engine to treat this as a JavaScript object, e.g. chart-data="${[['Nitrogen',0.78],['Oxygen',0.21],['Other',0.01]]}".

chart-on - An object, the property names of which are event names to respond to and the property values of which are event handler functions. The value must be inside "${ }" to tell the tlx engine to treat this as a JavaScript object, e.g. chart-on="${{select: event => console.log(event)}}".

defer - A unary attribute that defers the first rendering of the chart until it is invoked by JavaScript. This is typically used when there is a lot of dynamic data that needs to assembled by JavaScript first. See the source of this [bubble chart example]((https://jsfiddle.net/anywhichway/yfdcn6mL/).

tlx-chart-editor

A custom HTML element that renders a basic table to support user editing of the data associaed with a chart.

Attributes

for - The DOM id of the chart associated with the editor. MUST BE FIRST ATTRIBUTE.

chart-types - An array of valid chart types. Diplayed as a select box in the top left of the chart editor.

edit-columns - An array of columns names to display for edit. If a column if not listed it is read-only.

validate-data - Typically, some column in the data will sum to a specific value, e.g. 100%, this function ensures the data meets the criteria prior to re-rendering the chart. The function you define that takes the arguments (dataArray,event,view). It should return true if the data is valid and the chart will be re-rendered; otherwise, the chart is not re-rendered. If it returns a string, the string is displayed in a JavaScript alert box. If it returns an Error, the error is thrown.

Custom Editors

With a little JavaScript and knowledge of tlx, you can build a custom editor. See configurable.html in the examples directory or on JSFiddle.

#API

It is also possible to create charts directly using JavaScript.

TlxChart

HTMLCustomElement TlxChart.create({attributes}) - The attributes is an object with properties the same name as the element attributes except camel cased, e.g. chart-data is chartData, and the values are JavaScript values, e.g."${[['Nitrogen',0.78],['Oxygen',0.21]]}" is [['Nitrogen',0.78],['Oxygen',0.21]]. For non-string data, the returned custom element will have the attribute keys as properties rather than regular attributes retrievable via getAttribute.

HTMLCustomElement TlxChart.Editor.create({attributes}) - The attributes is an object with properties the same name as the element attributes except camel cased. For non-string data, the returned custom element will have the attribute keys as properties rather than regular attributes retrievable via getAttribute.

More advanced use can be made by passing additional data, see the tlx documentation for more details.

More Reading

Charts and Gauges Without JavaScript.

Release History

2018-12-24 v0.0.8 Updated tlx dependency.

2018-12-11 v0.0.7 Added ability to specify chart-types and edit-columns for tlx-chart-editor.

2018-12-10 v0.0.6 Documentation updates.

2018-12-09 v0.0.5b Adjusted data editing validator.

2018-12-09 v0.0.4b Documentation updates. Added chart data editing.

2018-12-09 v0.0.3b Documentation updates. Added chart data editing.

2018-12-08 v0.0.2b Re-implemented to support most recent version of tlx.

2017-12-02 v0.0.1 ALPHA Initial public release

License

MIT

You might also like...
A Vue component to create charts with ZingChart
A Vue component to create charts with ZingChart

Quickstart guide Quickly add charts to your Vue application with our ZingChart component This guide assumes some basic working knowledge of Vue. 1. In

Vue component to draw bar charts with d3 v4
Vue component to draw bar charts with d3 v4

vue-d3-barchart Small component to draw charts using d3 v4 Demo Demo Installation npm install vue-d3-barchart --save Usage ... d3-barchart :da

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.
Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Vue Flowy makes creating flowchart or hierarchy chart functionality an easy task. Build automation software, mind mapping tools, organisation charts, or simple programming platforms in minutes by implementing the library into your project.

Vue.js Demos. jQWidgets Vue.js Components - Grids, Charts, Scheduling, Pivot Tables

jQWidgets Vue Components Demos You can view them online here: https://www.jqwidgets.com/vue/. Build modern Web Apps with jQWidgets and Vue. jQWidgets

 VueJS module for Flexmonster Pivot Table & Charts
VueJS module for Flexmonster Pivot Table & Charts

VueJS Module for Flexmonster Pivot Table & Charts

Google Charts plugin for Vue.js

vue-charts Google Charts plugin for Vue.js Demo Basic Line Chart Multiple Sets of Data, with auto-update Events Redraw on window resize Installation n

realtime charts with chart.js

vue-desktop-realtime-chart realtime charts with chart.js Setup Install vue-cli yarn install -g @vue/cli Initialize a project vue create vue-desktop En

A nicer look at your GitHub Profile! With charts! but its made with Vuejs/Nuxtjs :)
A nicer look at your GitHub Profile! With charts! but its made with Vuejs/Nuxtjs :)

⚛️ GitProfile A nicer look at your GitHub Profile! With charts! but its made with Vuejs/Nuxtjs :) 🔗 View it here 👩‍🏫 inspired by Brittany Chiang |

Export charts created by vue-chartjs to PDF files
Export charts created by vue-chartjs to PDF files

vue-chartjs-exporter Export charts created by vue-chartjs to PDF files. Demo here. Read the Requirements section below before proceeding, because it c

Owner
Simon Y. Blackwell
Simon Y. Blackwell
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library that allows you to build interactive data visualizations with simple API and 100+ ready-to-use samples. Packed wi

ApexCharts 12.1k Jan 7, 2023
Generate beautiful charts with CSS and Vue: full accessibility and no hassle.

Visualization helps end-users understand data. Vue Charts.CSS helps frontend developers turn data into beautiful charts and graphs using the powerful Charts.CSS framework.

VueChartsCSS 14 Dec 17, 2022
Vue3-Charts is a SVG-based charting library that is very easy to use and highly customizable.

Vue3-Charts is an SVG-based charting library that is very easy to use and highly customizable

Alexandru Ghiura 104 Jan 5, 2023
Simple and lightweight vue chart component without using chart library dependencies

Pure Vue Chart A simple and lightweight vue component for making charts that do not rely on large chart libraries and will not bloat your dependencies

Danny Jackson 61 Nov 24, 2022
vue-c3 is a reusable vue component for c3 charts

vue-c3 vue-c3 is a reusable vue component for c3 charts Install npm install --save vue-c3 # and if it's not already installed: npm install --save c3

Christoph Biering 79 Nov 20, 2022
Vue components for d2b charts.

vue-d2b Project setup yarn install Compiles and hot-reloads for development yarn run serve Compiles and minifies for production yarn run build Run

d2b 36 Dec 2, 2022
A Vue 2 integration using Frappe Charts

Vue 2 Frappe Charts This is a simple package to get using Frappe Charts within VueJS How to use First we need to import and initialize import Vue from

Steve McDougall 149 Dec 18, 2022
Reactive Vue.js wrapper for Google Charts lib

vue-google-charts Reactive Vue.js wrapper for Google Charts lib Table of contents Installation Usage Example Installation npm i vue-google-charts Def

Devstark 420 Dec 4, 2022
Lightweight Vue component for drawing pure CSS donut charts

vue-css-donut-chart Lightweight Vue component for drawing pure CSS donut charts Live demo Live demo can be found on the project page – https://dumptyd

Saad 127 Dec 9, 2022
Simple trend charts for Vue.js

Live Demo ?? Installation npm i vue-trend-chart ?? Usage import Vue from "vue"; import TrendChart from "vue-trend-chart"; Vue.use(TrendChart); Exampl

Dmytro Barylo 250 Dec 31, 2022