I'm using ZingChart and I'm trying to add 3 different series to a line chart. The problem is that when I do this, the select marker does not work. What seems to happen is that the second and third series don't receive any events as I would expect and instead other nodes receive them. Is what I'm trying to do invalid?
I want to group these dates in 3 sets so that I set a different marker to each one. If I could set the marker in some other way that would be acceptable too.
var myConfig = {
graphset:[
{
type:"line",
x:"0%",
y:"0%",
height:"100%",
width:"100%",
plot: {
selectionMode : 'multiple',
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star5",
backgroundColor:"white",
borderColor:"black",
borderWidth:2,
size:8
}
},
scaleY: {
minValue: 0,
maxValue: 10,
step: 1
},
scaleX: {
// minValue: 1480883248000,
// step: 720000,//12min
transform: {
type: 'date',
all: '%m/%d/%y %h:%i %A'
},
},
series: [
{
text: 'f',
values: [
[1480883248000, 1],
[1480898368000, 1],
[1480883248000, 1],
[1480883968000, 1],
[1480884688000, 1],
[1480885408000, 1],
[1480886128000, 1],
[1480886848000, 1],
[1480887568000, 1],
[1480888288000, 1],
[1480889008000, 1],
[1480889728000, 1],
[1480890448000, 1],
[1480891168000, 1],
[1480891888000, 1],
[1480892608000, 1],
[1480893328000, 1],
[1480894048000, 1],
[1480894768000, 1],
[1480895488000, 1],
[1480896208000, 1],
[1480896928000, 1],
/* [1480897648000, 1, 'n'],
[1480898368000, 1, 'n'],
[1480899088000, 1, 'n'],
[1480899808000, 1, 'n'],
[1480900528000, 1, 'n'],*/
],
marker: {
type: 'circle',
size: 2
}
},
{
text: 'a',
values: [[1480883728000, 1]],
marker: {
type: 'triangle',
size: 7
}
},
{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square', //circle
size: 7
}
}
]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: "100%"
});
There are couple things you need to do.
1) Apply the selectedMarker attribute to each individual series object. Series takes the same values as plot. Thus, you can overwrite and redefine individual styling within each series object.
{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square', //circle
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star6",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
}
]
}
If you are using the data posted, you must adjust two things.
1) Adjust the z-index of the first plot (series[0]). Making this z-index a lower value will allow you to click on plots placed on top of it.
2) Two of your timestamps in series[0].values[1] and series[0].values[2] are plotted beyond the furthest point in the values array and plotted before the first point in the values array. If you keep the data the same and click on the blue line, it always looks like its selecting the first point. This is true because it's really selecting the 3rd point which the line spans the first half of the plot.
Try clicking on the blue line for the first half of the chart issue chart here
If you still don't believe me, fork the demo above and change the first couple values from 1 to 2 and 3 etc...
The final product (fixed data) looks like the following.
var myConfig = {
graphset:[
{
type:"line",
plot: {
selectionMode : 'multiple',
},
scaleY: {
minValue: 0,
maxValue: 10,
step: 1
},
scaleX: {
// minValue: 1480883248000,
// step: 720000,//12min
transform: {
type: 'date',
all: '%m/%d/%y %h:%i %A'
},
},
series: [
{
zIndex:300,
text: 'f',
values: [
[1480883248000, 1],
//[1480898368000, 1],
//[1480883248000, 1],
[1480883968000, 1],
[1480884688000, 1],
[1480885408000, 1],
[1480886128000, 1],
[1480886848000, 1],
[1480887568000, 1],
[1480888288000, 1],
[1480889008000, 1],
[1480889728000, 1],
[1480890448000, 1],
[1480891168000, 1],
[1480891888000, 1],
[1480892608000, 1],
[1480893328000, 1],
[1480894048000, 1],
[1480894768000, 1],
[1480895488000, 1],
[1480896208000, 1],
[1480896928000, 1],
],
marker: {
type: 'circle',
size: 2
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star5",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
},
{
text: 'a',
values: [[1480883728000, 1]],
marker: {
type: 'triangle',
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star3",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
},
{
text: 'n',
values: [[1480894168000, 1]],
marker: {
type: 'square', //circle
size: 7
},
selectedMarker:{ //sets the styling for selected marker (per series)
type:"star6",
backgroundColor:"black",
borderColor:"black",
borderWidth:2,
size:8
}
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>