I want to make create a slider animation with multiple traces in plotly js like the image below but it shows only trace 1.
when I click on the play button it only shows the first trace lines without any warning or error in the console.
I used version plotly-2-12.1.
enter image description here
let myArr = new Array(35).fill(0).map((d, i) => i + 1);
`Plotly.plot("graph", {
trace1: {
x: myArr,
y: [0, -5, 2, 5, 15, 1, 2, 5, 15, , 20, 5, 17],
type: "scatter",
id: myArr,
mode: "lines+markers",
text: "Asas",
name: "rex",
marker: {
color: "rgb(128, 0, 128)",
size: 8,
},
line: { simplify: false },
transforms: [
{
type: "filter",
operation: "<=",
target: myArr,
value: 0.0,
},
],
},
trace2: {
x: myArr,
y: [0, 10, 20, 5, 17, 80, 3, , 20, 5, 17],
text: "Asas",
name: "rex",
type: "scatter",
id: myArr,
mode: "lines+markers",
text: "as",
marker: {
color: "rgb(0, 0, 128)",
size: 8,
},
line: { simplify: false },
transforms: [
{
type: "filter",
operation: "<=",
target: myArr,
value: 0.0,
},
],
},
data: [trace1, trace2],
layout: {
xaxis: { autorange: false, range: [1, 35] },
yaxis: { autorange: false, range: [0, 100] },
updatemenus: [
{
type: "buttons",
xanchor: "left",
yanchor: "top",
direction: "right",
x: 0,
y: 0,
pad: { t: 60 },
showactive: false,
buttons: [
{
label: "Play",
method: "animate",
args: [
null,
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
fromcurrent: true,
},
],
},
{
label: "Pause",
method: "animate",
args: [
[null],
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
},
],
},
],
},
],
sliders: [
{
currentvalue: {
prefix: "t = ",
xanchor: "right",
},
pad: { l: 130, t: 30 },
transition: {
duration: 500,
},
steps: myArr.map((t) => ({
label: t,
method: "animate",
args: [
[t],
{
transition: { duration: 500 },
frame: { duration: 500, redraw: false },
mode: "immediate",
},
],
})),
},
],
},
frames: myArr.map((t) => ({
name: t,
data: [{ "transforms[0].value": t }],
})),
});`
enter image description here
Related
I'm trying to display total monthly sales and daily stock level. This way you could easily see that you didn't have any sales a particular month because you had low stock. Monthly sales is a bar chart that should be in the center of each month (in between the ticks).
In order to get it close to the middle my data is using the 15th of each month as the date to center it. I would want to know if there is a better way to achieve this?
JSFiddle to play around with: https://jsfiddle.net/8Lydhpqc/3/
const dailyStock = [
{ x: "2017-08-02", y: 1 },
{ x: "2017-08-25", y: 3 },
{ x: "2017-09-10", y: 7 },
{ x: "2017-09-28", y: 0 },
{ x: "2017-10-02", y: 3 },
{ x: "2017-10-24", y: 2 },
{ x: "2017-11-01", y: 1 },
{ x: "2017-11-30", y: 0 },
];
//using the 15th of each month to center it
const monthlyTotal = [
{ x: "2017-08-15", y: 1 },
{ x: "2017-09-15", y: 10 },
{ x: "2017-10-15", y: 5 },
{ x: "2017-11-15", y: 5 },
];
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
datasets: [
{
label: "sales",
data: data,
backgroundColor: "green",
borderColor: "black",
borderWidth: 1,
order: 2,
},
{
label: "stock",
type: "line",
data: dailyStock,
backgroundColor: "orange",
borderColor: "orange",
fill: false,
order: 1,
},
],
},
options: {
scales: {
xAxes: [
{
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM",
},
},
distribution: "linear",
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
Welcome to Stackoverflow!
It seems that there is a way better than using the 15th of the month.
You need to add another axis for the bar that is a category type axis. Also its pretty critical that you have "offset: true" on that axis as well. Otherwise it will not center.
In the code below I named that category "bar" and the existing one "line"
I also created a fiddle: https://jsfiddle.net/jyf8ax3e/
var myChart = new Chart(ctx, {
type: "bar",
data: {
labels: ["2017-08", "2017-09", "2017-10", "2017-11"],
datasets: [
{
barPercentage: .7,
xAxisID: "bar",
label: "sales",
data: monthlyTotal,
backgroundColor: "green",
borderColor: "black",
borderWidth: 1,
width: 55,
order: 2,
},
{
label: "stock",
type: "line",
data: dailyStock,
backgroundColor: "orange",
borderColor: "orange",
fill: false,
order: 1,
},
],
},
options: {
scales: {
xAxes: [
{
id: "line",
type: "time",
time: {
unit: "month",
displayFormats: {
month: "MMM",
},
},
distribution: "linear",
},
{
id: "bar",
offset: true,
type: "category",
distribution: "series",
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
},
});
I have a multiselect dropDownList and a chart,i want my chart to by dynamic to plot more based on my multiselect dropdownlist,but i have no idea, I would appreciate if you give me a hint by a demo or an example.because in the following code,i have a chart which works only based normal dropdownlist not the multiplechioce,
Here is Multiselect:
$('#multiselect').kendoMultiSelect({
dataTextField: "Text",
dataValueField: "Text",
valuePrimitive: true,
dataSource: result.list_of_parks,
})
here is the chart:
function createChart(data, data_wind) {
$("#topMonth").kendoChart({
series: [{
data: data,
type: "column",
axis: "l100km",
field: "productionvalue",
categoryField: "name",
color: "#228B22"
},
{
axis: "ava",
data: data_wind,
type: "line",
field: "windvalue",
categoryField: "name",
color: "#007eff",
},
],
valueAxes: [
{
name: "l100km",
title: { text: "Production (MW/H)" },
// min: 0,
// max: 2000000,
// majorUnit: 200000,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
},
{
name: "ava",
title: { text: "Averge Wind Speed(KM/H)" },
min: 0,
// max: 20,
majorUnit: 1,
majorGridLines: {
visible: false
},
minorGridLines: {
visible: false
},
}
],
categoryAxis: {
majorGridLines: {
visible: false
}
,
labels: {
padding: {
left: -20,
buttom: 0
},
rotation: 340
},
axisCrossingValues: [0, 20],
},
tooltip: {
visible: true,
// majorUnit:10,
template: " #= value #"
},
});
$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});
}
}
});
});
Can I set Custom label values for Y axis in amcharts js?
example : convert 10,20,30,... y-axis value to 'very low','low','high'
There are two solutions here.
The first solution uses a labelFunction in your valueAxis to specify what label you want given the value being drawn on the chart, i.e
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelFunction: function(value, valueText, valueAxis) {
switch (value) {
case 10:
valueText = "Very Low";
break;
case 20:
valueText = "Low";
break;
case 30:
valueText = "Average";
break;
case 40:
valueText = "Above Average";
break;
case 50:
valueText = "High";
break;
default:
valueText = "";
}
return valueText;
}
}
],
Demo:
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelFunction: function(value, valueText, valueAxis) {
switch (value) {
case 10:
valueText = "Very Low";
break;
case 20:
valueText = "Low";
break;
case 30:
valueText = "Average";
break;
case 40:
valueText = "Above Average";
break;
case 50:
valueText = "High";
break;
default:
valueText = "";
}
return valueText;
}
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.2,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
Note that this solution is slightly brittle in that you're depending on the value axis to generate the correct scale (increments of 10, for instance) and there isn't a guaranteed way to control that.
The better solution is to use guides instead to draw your axis labels, lines and ticks at the appropriate points on the axis, while disabling the ones generated by the axis to ensure that you get the correct lines:
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
//disable the axis' labels, gridAlpha and tickLength so you can
//draw them using guides
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 5,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 5,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 5,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength: 5,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 5,
lineAlpha: .15,
label: "High"
}]
}
]
Demo:
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 50,
strictMinMax: true,
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 5,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 5,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 5,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength: 5,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 5,
lineAlpha: .15,
label: "High"
}]
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.2,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
In v4, you can use adapters to achieve this.
var chart = AmCharts.makeChart("chartdiv", {
type: "serial",
theme: "light",
valueAxes: [
{
minimum: 0,
maximum: 100,
strictMinMax: true,
labelsEnabled: false,
gridAlpha: 0,
tickLength: 0,
guides: [{
value: 10,
tickLength: 2,
lineAlpha: .15,
label: "Very Low"
},{
value: 20,
tickLength: 2,
lineAlpha: .15,
label: "Low"
},{
value: 30,
tickLength: 2,
lineAlpha: .15,
label: "Average"
},{
value: 40,
tickLength:2,
lineAlpha: .15,
label: "Above Average"
},{
value: 50,
tickLength: 2,
lineAlpha: .15,
label: "High"
}]
}
],
dataProvider: [
{
category: "cat-1",
value: 32
},
{
category: "cat-2",
value: 41
},
{
category: "cat-3",
value: 27
},
{
category: "cat-4",
value: 29
},
{
category: "cat-5",
value: 22
},
{
category: "cat-6",
value: 11
},
{
category: "cat-7",
value: 46
},
{
category: "cat-8",
value: 18
},
{
category: "cat-9",
value: 32
},
{
category: "cat-10",
value: 32
}
],
graphs: [
{
fillAlphas: 0.9,
lineAlpha: 0.1,
type: "column",
valueField: "value"
}
],
categoryField: "category"
});
#chartdiv {
width: 100%;
height: 300px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
I use canvasJS to paint chart,but when the page change different window, the X axis will show different. when page open in little window show right like this enter image description here,but when page show big window show wrong like thisenter image description here
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: false,
animationEnabled: false,
title: {
text: "BJS Site Record Item QTY"
},
axisY2: {
valueFormatString: "0",
maximum: 50,
interval: 5,
interlacedColor: "#F5F5F5",
gridColor: "#D7D7D7",
tickColor: "#D7D7D7"
},
axisX:{
//title: "BJS Site Record Item QTY",
interval: 1
},
theme: "theme2",
toolTip: {
shared: true
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center",
fontSize: 15,
fontFamily: "Lucida Sans Unicode"
},
data: [
{
type: "line",
lineThickness: 3,
axisYType: "secondary",
showInLegend: true,
name: "BJSC",
dataPoints: [
{ x: new Date(2016,11,08), y:11 },
{ x: new Date(2016,11,09), y:0 },
{ x: new Date(2016,11,10), y:0 },
{ x: new Date(2016,11,11), y:0 },
{ x: new Date(2016,11,12), y:0 },
{ x: new Date(2016,11,13), y:0 },
{ x: new Date(2016,11,14), y:0 },
]
},
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
}
</script>
Scott,
intervalType defaults to “number” when you set the interval. If you prefer interval to be 1 day, set intervalType to "day" along with setting interval to 1.
Check this code.
var chart = new CanvasJS.Chart("chartContainer", {
zoomEnabled: false,
animationEnabled: false,
title: {
text: "BJS Site Record Item QTY"
},
axisY2: {
valueFormatString: "0",
maximum: 50,
interval: 5,
interlacedColor: "#F5F5F5",
gridColor: "#D7D7D7",
tickColor: "#D7D7D7"
},
axisX: {
//title: "BJS Site Record Item QTY",
interval: 1,
intervalType: "day"
},
theme: "theme2",
toolTip: {
shared: true
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center",
fontSize: 15,
fontFamily: "Lucida Sans Unicode"
},
data: [
{
type: "line",
lineThickness: 3,
axisYType: "secondary",
showInLegend: true,
name: "BJSC",
dataPoints: [
{ x: new Date(2016, 11, 08), y: 11 },
{ x: new Date(2016, 11, 09), y: 0 },
{ x: new Date(2016, 11, 10), y: 0 },
{ x: new Date(2016, 11, 11), y: 0 },
{ x: new Date(2016, 11, 12), y: 0 },
{ x: new Date(2016, 11, 13), y: 0 },
{ x: new Date(2016, 11, 14), y: 0 }
]
},
],
legend: {
cursor: "pointer",
itemclick: function(e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;"></div>
I am using timeseries chart from highchart plugin as follow:
var series1={
type: 'area',
color:lineColors[numOfLines],
name: legends[numOfLines],
pointInterval: 24 * 3600 * 1000,
pointStart:Date.UTC(dateStart[0], dateStart[1], dateStart[2]) ,
data: democrat};
var series2={
type: 'area',
color:lineColors[numOfLines+1],
name: legends[numOfLines+1],
pointInterval: 24 * 3600 * 1000,
pointStart:Date.UTC(dateStart[0], dateStart[1], dateStart[2]) ,
data: repub};
youDynamicSeries.push(series1);
youDynamicSeries.push(series2);}
and after creating the series I create the chart like this:
highcharttimeseries(youDynamicSeries,xLabel,'trend_chart');
and highcharttimeseries function is as follow:
function highcharttimeseries(series,date,chartcontainer)
{
$('#'+chartcontainer).highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
type: 'datetime',
minRange: 7 * 24 * 3600000 // fourteen days
},
yAxis: {
title: {
text: ''
}
},
legend: {
layout: 'horizontal',
align: 'middle',
verticalAlign: 'top',
borderWidth: 0
},
plotOptions: {
area: {
fillColor: {
linearGradient: { x1:0, y1: 5, x2: 0, y2: 0},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba(f,f,f,f)')]
]
},
marker: {
radius: 2
},
lineWidth: 2,
states: {
hover: {
lineWidth: 3
}
},
threshold: null
}
},
series:series
});
}
Now when I run it I get the following error:
Can anyone help what is wrong with my code?(I appreciate any help in advance)