Comments (2)
Demo includes both radar samples from Chart.js
- https://github.com/chartjs/Chart.js/blob/master/samples/radar.html
- https://github.com/chartjs/Chart.js/blob/master/samples/radar-skip-points.html
from vaadin-chartjs.
Example Usage:
RadarChartConfig config = new RadarChartConfig();
config
.data()
.labels("Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running")
.addDataset(new RadarDataset().label("Skip first dataset").borderColor("rgb(255, 0, 0)").backgroundColor("rgba(255,255,0,0.5)").pointBackgroundColor("rgba(220,220,220,1)"))
.addDataset(new RadarDataset().label("Skip mid dataset").borderColor("rgb(255, 0, 255)").backgroundColor("rgba(0, 255, 0, 0.5)").pointBackgroundColor("rgba(151,187,205,1)").pointHoverBackgroundColor("#fff"))
.addDataset(new RadarDataset().label("Skip last dataset").borderColor("rgb(0, 255, 255)").backgroundColor("rgba(0, 0, 255, 0.5)").pointBackgroundColor("rgba(151,187,205,1)").pointHoverBackgroundColor("#fff"))
.and();
config.
options()
.title()
.display(true)
.text("Chart.js Radar Chart - Skip Points")
.and()
.elements()
.line()
.tension(0.0)
.and()
.and()
.scale(new RadialLinearScale().ticks().beginAtZero(true).and().reverse(false))
.done();
List<String> labels = config.data().getLabels();
int cnt = 0;
for (Dataset<?, ?> ds : config.data().getDatasets()) {
RadarDataset lds = (RadarDataset) ds;
List<Double> data = new ArrayList<>();
for (int i = 0; i < labels.size(); i++) {
if ((cnt == 0 && i == 0) || (cnt == 1 && i == 3) || (cnt == 2 && i == 6)) {
data.add(Double.NaN);
} else {
data.add((double) (Math.round(Math.random() * 100)));
}
}
lds.dataAsList(data);
cnt++;
}
ChartJs lineChart = new ChartJs(config);
lineChart.setJsLoggingEnabled(true);
lineChart.setWidth(50, Unit.PERCENTAGE);
lineChart.addClickListener((a,b) -> {
RadarDataset dataset = (RadarDataset) config.data().getDatasets().get(a);
Notification.show("RadarDataset at idx:" + a + "; Data: idx=" + b + "; Value=" + dataset.getData().get(b), Type.TRAY_NOTIFICATION);
});
return lineChart;
from vaadin-chartjs.
Related Issues (20)
- Push a single new data point to simple charts (Such as Line Chart) HOT 3
- Android - gradle build issue HOT 5
- OSGI support: add resources publish via HttpService
- Add minor/major configs to Ticks
- Add 'layout' option
- Add 'padding' to ScaleLabel
- Add missing 2.7.0 features and enhancements
- Add missing time scale options HOT 2
- How to configure chart background and scale labels HOT 1
- Chart Y range set to wrap aggressively HOT 3
- Too much recursion error HOT 1
- Integrate Chart.java as dependency and remove ChartJs own wrappers from project HOT 2
- Support for multiline label
- Vaadin 12 Support HOT 2
- TimeLineChart improper draw
- Timescale chart visualization issue
- Tooltips Cutoff - Seeking Example of Pie Chart Padding or Custom HTML Tooltip HOT 1
- time options in Timescale get overwritten everytime .time() is called
- How to perform the streaming smooth horizontal slide
- Datalabels plugin support
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vaadin-chartjs.