I started off with this example: https://www.amcharts.com/demos/floating-bar-chart/ but want the floating-aspect also cover a date axis. This way I will be able to color a rectangular area in my charts.
I made the following changes:
Changed the x-axis to a date axis
Changed the y-axis to a value axis
Changed the data correspondingly
Changed the data-fields in the series-definition to use openValueXField, valueXField for the dates and openValueYField and valueYField for the values
Something (vertical colored lines) are displayed in the most left part of the chart but no colored areas.
When using values for both axes it works perfectly but not with dates. I hope some of you knows what is wrong here. The Amcharts Demo's only provide example with one axis.
The two source codes are included hereafter.
//
// Source Code for two numeric axis -> working
//
<meta content="text/html;charset=utf-6" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: 8,
endTime: 11,
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: 10,
endTime: 13,
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
91,31 43%
//
// Source Code for one date and one numeric axis -> NOT working
//
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<!-- Styles -->
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- Chart code -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "panX",
wheelY: "zoomX",
layout: root.verticalLayout
}));
// Add legend
// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50,
x: am5.p50
}))
var colors = chart.get("colors");
// Data
var data = [{
name: "John",
startTime: new Date(2021, 1, 28),
endTime: new Date(2021, 3, 17),
startValue: 10,
endValue: 14,
columnSettings: {
stroke: colors.getIndex(1),
fill: colors.getIndex(1)
}
}, {
name: "Joe",
startTime: new Date(2021, 2, 5),
endTime: new Date(2021, 5, 7),
startValue: 12,
endValue: 17,
columnSettings: {
stroke: colors.getIndex(3),
fill: colors.getIndex(3)
}
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var yAxis = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {pan:"zoom"}),
})
);
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
renderer: am5xy.AxisRendererX.new(root, {
pan:"zoom",
minimumDate: new Date(2021, 1, 18),
maximumDate: new Date(2021, 7, 20),
}),
})
);
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Income",
xAxis: xAxis,
yAxis: yAxis,
openValueXField: "startTime",
valueXField: "endTime",
openValueYField: "startValue",
valueYField: "endValue",
sequencedInterpolation: true
}));
series.columns.template.setAll({
height: am5.percent(100),
templateField: "columnSettings",
tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
chart.appear(1000, 100);
}); // end am5.ready()
</script>
<!-- HTML -->
<div id="chartdiv"></div>
94,3 97%
I am using D3 for the exercise. However, I am having trouble passing an object to the .style() method:
var myStyles = [
'#268BD2',
'#BD3613',
'#D11C24',
'#C61C6F',
'#595AB7',
'#2176C7'
];
This below piece of code is working
d3.selectAll('.item')
.data(myStyles)
.style('background',function(d){return d});
But none of the below two code pieces are working
d3.selectAll('.item')
.data(myStyles)
.style({'background':function(d){return d}});
d3.selectAll('.item')
.data(myStyles)
.style({'color':'white','background':function(d){return d}});
Please explain what is wrong here.
You can apply objects in styles and attributes by using d3-selection-multi.
First, you have to reference the mini library:
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
Then, you have to use styles, not style:
.styles({'color':'white','background':function(d){return d}});
You can see the code working in this fiddle, in which I'm using an object to set the styles: https://jsfiddle.net/gerardofurtado/o54rtrqc/1/
For attributes, use attrs instead of attr.
Here is the API.
I'm also working through the Lynda.com course. Here's an example of the "Binding data to the DOM" exercise using D3 version 4:
JSFiddle
HTML:
<!--
Added these two scripts:
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
-->
<div class="container">
<h2>D3 Graphic</h2>
<section id="chart">
<div class="item">Darth Vader</div>
<div class="item">Luke Skywalker</div>
<div class="item">Han Solo</div>
<div class="item">Obi-Wan Kenobi</div>
<div class="item">Chewbacca</div>
<div class="item">Boba Fett</div>
</section>
</div>
JS:
var myStyles = [{
width: 200,
color: '#A57706'
}, {
width: 300,
color: '#BD3613'
}, {
width: 150,
color: '#D11C24'
}, {
width: 350,
color: '#C61C6F'
}, {
width: 400,
color: '#595AB7'
}, {
width: 250,
color: '#2176C7'
}];
d3.selectAll('.item')
.data(myStyles)
.styles({
'color': 'white',
'background': function(d) {
return d.color;
},
width: function(d) {
return d.width + 'px';
}
})
I want to make a bar chart with two sets of stacked bars which are grouped together to compare the two groups of stacked bars. This should be displayed in the following manner:
I have gone through this link
But it didn't help me plot something like you see in the above image. I even tried sending two data sets like [[s1, s2, s3], [s4, s5, s6]] But it didn't help me plot the chart.
Does anyone know how to do it?
Any help will be greatly appreciated.
Thanks in advance.
Setting the option stackSeries: true will create the desired display for bar charts.
Official sources:
jqPlot Source code: source code, version 1.0.8r1250 of
2013-03-27. For this issue, src/jqplot.core.js lines 2499, 2563, and 2649.
jqPlot Documentation: It says that the API Documentation is most accurate. you can also see the webpage, README.txt,
optionsTutorial.txt, jqPlotOptions.txt, jqPlotOptions.txt,
jqPlotCssStyling.txt, usage.txt, changes.txt in the 1.0.8r1250
general release
The jqPlot documentation is not up to date so I took a look at the source code. Unfortunately, there is no way to directly have two sets of bars with a stacked-bar chart. The jqPlot.stackSeries property is only a boolean value. It's only function is to tell jqPlot to stack each series on top of each other for as many bars as there are values in the different series. Each series is plotted one value per bar with the first series being on the bottom. In other words, all [0] values are plotted in the first bar, [1] values in the second, etc. The amount shown within the bar is the sum of the [n] value for the current series and all prior series. There is no way to specify that there are two, or more, groupings of series. The capability to do what is desired just does not exist in jqPlot.
But you can accomplish what you desire:
The fact that jqPlot does not natively support what you want does not mean that you can not do it, merely that you need to get creative.
The graph you desire can be looked at as being two separate graphs that have been overlaid upon each other with spacing between the bars on the individual graphs permitting enough space (seriesDefaults.rendererOptions.barMargin) for the bars from the other graph to be overlaid next to them.
You can use jqPlot to create:
That graph has the scale, background and grid-lines you desire set to be visible. Note that the graph has an extra bar in it. This is needed to provide enough background and grid-lines for the last bar provided by the other graph.
You can also use jqPlot to create the second graph:
This graph has the scale and grid-lines set in jqPlot to not be visible.
seriesDefaults.axes.xaxis.tickOptions.show = false;
seriesDefaults.axes.yaxis.tickOptions.show = false;
etc.
The background is set to be transparent. Note that you are going to need to offset the position of this graph somewhat to the right when positioning the <div> relative to the first graph.
Overlaid, you end up with:
You then use a blank <div> with the same background color as the background color of your webpage and overlay that to cover the extra bar on the first graph, but leaving enough of the first graph's background and grid-lines to extend a bit past the last bar of the second graph.
You will end up with:
You can see a working solution at at JSFiddle using jqPlot 1.0.8r1250.
Comparing the original request vs. the final version of the graph produced using this method you can see that they are very close:
Between the two the most noticeable difference is the larger space between the Y-axis in the jqPlot version. Unfortunately, there does not appear to be an option to reduce that amount for stacked bar charts.
Note that the lack of a border on the right of the graph this code produces is intentional because it did not exist in the original request. Personally, I prefer having a border on the right side of the graph. If you change the CSS a bit, that is easy to obtain:
My preferred version of the graph includes a border on the left and balances the whitespace:
You can see a working JSFiddle of this version.
All-in-all it is not that difficult. It would, of course, be easier if jqPlot supported multiple sets of bars. Hopefully it will at some point. However, the last release was 2013-03-27 and there does not appear to have been any development work after that time. Prior to that there were releases every few months. But, jqPlot is released under the GPL and MIT licenses so anyone could continue the work.
$(document).ready(function () {
//Numbers derived from desired image
//var s1 = [10, 29, 35, 48, 0];
//var s2 = [34, 24, 15, 20, 0];
//var s3 = [18, 19, 26, 52, 0];
//Scale to get 30 max on plot
var s1 = [2, 5.8, 7, 9.6, 0];
var s2 = [6.8, 4.8, 3, 4, 0];
var s3 = [13.6, 8.8, 3, 7.8, 0];
plot4 = $.jqplot('chart4', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesColors: ["#1B95D9", "#A5BC4E", "#E48701"],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
// jqPlot does not actually obey these except barWidth.
barPadding: 0,
barMargin: 66,
barWidth: 38,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: false
},
title: {
text: '', // title for the plot,
show: false,
},
markerOptions: {
show: false, // wether to show data point markers.
},
pointLabels: {
show: false
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
show: false
},
lastPropertyConvenience: 0
},
yaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0
}
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid: {
drawGridLines: true, // wether to draw lines across the grid or not.
shadow: false, // no shadow
borderWidth: 1,
background: 'white', // CSS color spec for background color of grid.
lastPropertyConvenience: 0
},
lastPropertyConvenience: 0
});
});
$(document).ready(function () {
//Numbers derived from desired image
//var s1 = [10, 29, 35, 48, 0];
//var s2 = [34, 24, 15, 20, 0];
//var s3 = [18, 19, 26, 52, 0];
//Scale to get 30 max on plot
var s1 = [2, 5.8, 7, 9.6, 0];
var s2 = [6.8, 4.8, 3, 4, 0];
var s3 = [3.6, 3.8, 5.2, 10.4, 0];
plot4 = $.jqplot('chart5', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesColors: ["#754DE9", "#666666", "#000000"],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
rendererOptions: {
// jqPlot does not obey these options except barWidth.
show: true,
barPadding: 0,
barMargin: 66,
barWidth: 38,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: false
},
title: {
text: '', // title for the plot,
show: false,
},
markerOptions: {
show: false, // wether to show data point markers.
},
pointLabels: {
show: false
}
},
axesDefaults: {
//show: false
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
show: false
},
lastPropertyConvenience: 0
},
yaxis: {
show: false,
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0,
tickOptions: {
show: false
},
}
},
legend: {
show: false,
location: 'e',
placement: 'outside'
},
grid: {
drawGridLines: false, // wether to draw lines across the grid or not.
shadow: false, // no shadow
borderWidth: 10,
background: 'transparent', // CSS color for background color of grid.
gridLineColor: 'transparent', // *Color of the grid lines.
borderColor: 'transparent', // CSS color for border around grid.
lastPropertyConvenience: 0
},
lastPropertyConvenience: 0
});
});
#cover1 {
padding:0;
margin: 0;
background-color: white;
left: 451px;
width: 88px;
/* Uncomment the next three lines to have a border on the right of the graph and
balanced whitespace:*/
/*
border-left: 2px solid #CCCCCC;
left:476px;
width: 62px;
*/
}
#chart4 .jqplot-xaxis-tick {
visibility: hidden;
}
#chart5 .jqplot-xaxis-tick {
visibility: hidden;
}
#chart4 .jqplot-yaxis-tick {
font: 9px arial
}
<link class="include" rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Main jqPlot -->
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script>
<!-- Additional jqPlot plugins -->
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<div style="position:absolute; left:10px; top:10px;">
<div id="chart4" style="width:548px; height:185px;"></div>
<div id="chart5" style="width:536px; height:185px; top:-185px; left:53px;"></div>
<div id="cover1" style="position: relative; height: 152px; top:-361px;"></div>
</div>
The above code is based on that at the example page listed in the question.
Practical solution...
$(document).ready(function(){
var s1 = [2, 0, 0, 10,11,0, 6, 2, 0,10,11];
var s2 = [7, 0, 0, 4,11,0, 6, 2, 0,10,11];
var s3 = [4, 0, 0, 7,11,0, 6, 2, 0,10,11];
var s4 = [0, 20, 0, 0,0,0, 0, 0, 0,0,0];
plot3 = $.jqplot('chart3', [s1, s2, s3,s4], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barMargin: 30,
highlightMouseDown: true
},
pointLabels: {show: true}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
Image:
I am using timestamps values for xaxis in this format: var timestamp = 1201662065000
Under Chrome it works but in FF.17/IE8 it just renders chart grid with y-axis but it doesnt render x-axis and series (the plot). So it doesn't give any error but it doesn't render my chart...
I think it must be something with date-parsing, maybe its different in FF/IE?
You must do something wrong. Here is a fiddle I made to show you an example : http://jsfiddle.net/Bouillou/WdLnm/291/
In some cases, Chrome is a very nice browser which correct automatically html errors (like lack of end marker ) or aberration like define a form in a table outside cell (). Other browsers will just not execute the code.
My advice is : test your code with HTML validator.
Here is the xaxis code portion :
xaxis:
{
label: 'Dates',
renderer: $.jqplot.DateAxisRenderer,
rendererOptions: { tickRenderer: $.jqplot.CanvasAxisTickRenderer },
tickOptions: {
formatString: '%d/%m/%Y',
angle: -30,
fontFamily: 'Arial',
fontSize: '13px',
fontWeight: 'bold'
},
min: "01-01-2012",
tickInterval: '2 month',
labelOptions: {
fontFamily: 'Arial',
fontSize: '14pt',
fontWeight: 'bold',
textColor: '#0070A3'
}
},
And data used :
var data = [[1325376000000, 1], [1350864000000, 2], [1354320000000, 3]];
I've created a horizontally oriented bar chart with stacked bars with jqPlot.
Now I'm struggling with the following two issues:
jqPlot displays bar (point) labels at the end of the bars. How can I get the labels positioned in the middle of the bars?
jqPlot sums up the values in the stacked bars. So, if the bar values are e.g. 1, 2 and 3, the labels will be correspondingly 1, 3 (=1+2) and 6 (=1+2+3). How can I get the labels to represent the bars' actual values instead of summing the values up?
I searched though all the jqPlot docs and found nothing that worked to resolve these issues :-(
Thank you in advance for your help!
Here comes the code used:
here are the scripts loaded:
<script language="javascript" type="text/javascript" src="jquery.1.6.2.min.js"></script>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="jqplot/excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jqplot/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.pieRenderer.js"></script>
<script language="javascript" type="text/javascript" src="jqplot/plugins/jqplot.ohlcRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
here is an example of HTML needed:
<div id="jqplot-id" style="width: 300px; height: 30px;"></div>
here is the function that is used to draw bars:
function drawPlotBars(id, series)
{
this.sum = function(series){
var series;
var s = 0;
for (var i = 0; i < series.length; i++)
{
s += parseInt(series[i]);
}
return s;
};
// padding correction
$.jqplot.preInitHooks.push(function(){
this._defaultGridPadding = {
top:1,
right:1,
bottom:1,
left:1
};
});
var plot = $.jqplot(id, series, {
stackSeries: true,
seriesDefaults:
{
renderer:$.jqplot.BarRenderer,
rendererOptions:
{
barDirection: 'horizontal',
barWidth: qsParseInt($('#'+id).height()),
shadowDepth: 0,
shadowOffset: 0
},
pointLabels: {
show: true,
formatString: '%u%'
}
},
series: [{
pointLabels:{
labelsFromSeries: true,
stackedValue: false
}
}],
axesDefault:
{
show: false,
pad: 0.5,
numberTicks: 0,
tickOptions:
{
show: false,
showLabel: false,
showMark: false,
showGridline: false,
markSize: 0,
mark: 'inside'
},
showTicks: false,
showTickMarks: false
},
axes:
{
xaxis:
{
min: 0,
max: this.sum(series),
show: false,
pad: 0.2,
tickOptions:
{
show: false,
showGridline: false
}
},
yaxis:
{
show: false,
padMin: 0,
padMax: 0,
min: .8,
max: 1.2,
pad: 0,
tickOptions:
{
show: false
}
}
},
grid:
{
drawGridLines: true, // wether to draw lines across the grid or not.
gridLineColor: '#cccccc', // *Color of the grid lines.
background: '#ffffff', // CSS color spec for background color of grid.
borderColor: '#002F41', // CSS color spec for border around grid.
borderWidth: .2, // pixel width of border around grid.
shadow: false, // draw a shadow for grid.
shadowAngle: 0, // angle of the shadow. Clockwise from x axis.
shadowOffset: 0, // offset from the line of the shadow.
shadowWidth: 0, // width of the stroke for the shadow.
shadowDepth: 0, // Number of strokes to make when drawing shadow.
// Each stroke offset by shadowOffset from the last.
shadowAlpha: 0.07 // Opacity of the shadow
}
});
// add some contrast for labels to be seen clearer
var labels = $('#'+id).find('.jqplot-point-label');
labels.css('color', '#fff');
}
here is how it is called:
drawPlotBars('jqplot-id', [[1], [2], [3]]);