We Keep Coding

ECharts - animation after append data

I have line-time-series chart (in ECharts). I need to keep a constant number of points, which moves from left to right with new data. However, when I add data using setOption, there is no shift, but each point just changes its position in the y direction.
Can someone please advise me what I'm doing wrong?
This example does exactly what I need. I think I have it the same, but it still behaves differently.
Thank you
<script src="https://unpkg.com/vue#2.6.12/dist/vue.js"></script>
<script src="https://unpkg.com/echarts#4.9.0/dist/echarts.js"></script>
<div id="app" style="width: 700px; height: 400px;">
<div ref="echart" style="width: 100%; height: 100%;" ></div>
<button type="button" #click="onClick"> Push data < /button></div>
new Vue({
el: '#app',
mounted() {
this.chart_data=[
['2020-09-01 15:14:13.0', 1],
['2020-09-01 15:14:14.0', 1.5],
['2020-09-01 15:14:15.0', 0.7],
['2020-09-01 15:14:16.0', 0.8],
['2020-09-01 15:14:17.0', 1.7]
]
this.chart=echarts.init(this.$refs.echart)
var option={
color: '#3283bb',
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [{
showSymbol: false,
type: 'line',
areaStyle: {
opacity: 0.2
},
lineStyle: {
width: 1.5
},
data: this.chart_data,
hoverAnimation: false
}]
}
this.chart.setOption(option)
},
methods: {
onClick: function() {
this.chart_data.shift()
this.chart_data.shift()
this.chart_data.push(['2020-09-01 15:14:18.0', 2.5])
this.chart_data.push(['2020-09-01 15:14:19.0', 2.0])
this.chart.setOption({
series: [{
data: this.chart_data
}]
})
}
},
})
JSFiddle example

I was able to find out the answer directly from the ECharts developers. Therefore, if someone has a similar problem, the solution is as follows:
ECharts performs animates "shift" if it recognizes part of the old data in the newly added data. Currently, this can be done by adding a unique name to each value. Each value is then an object with a name and value property.
{name: '2020-09-01 15:14:18.0', value: ['2020-09-01 15:14:18.0', 2.5]}
I am attaching a modified jsfiddle https://jsfiddle.net/Clyde256/b2d4juzt/44/ from the previous post, where the shift already works.

I would like to add, that if you are using dataset functionality, you need to name your dimension and then in the series property use the encode block and set itemId to any dimension name that has unique values like so:
dataset: {
dimensions: ['value', 'ts'],
source: [],
},
series: [
{
name: 'some line',
type: 'line',
encode: {
x: 'ts',
y: 'value',
itemId: 'ts',
},
},
],
Then the chart renders with correct 'shift left' animation when new values are added and old ones are removed.

Highcharts will not display anything in the div container with jade

This is my first time using highcharts alongside with jade and the MEAN stack. I am able to get the chart to work on a jsfiddle, but it will not display anything inside of the div when running locally.
this is the jsfiddle I used jade-lang to convert the jade into html so I would be able to put it into jsfiddle.
<div id="chartcon" style="min-width: 310px; height:400px; margin 0 auto"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highchart.com/modules/exporting.js" type="text/javascript"></script>
$(function() {
$('#chartcon').highcharts({
chart: {
type: 'column'
},
title: {
text: 'colum chart w/ neg values'
},
xAxis: {
categories: ['Apples','Oranges', 'Pears']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5,3,4]
}, {
name: 'Jane',
data: [2,-2,-3]
}, {
name: 'Joe',
data: [3,4,5]
}]
});
});
I am trying to do this in a single jade file, which I have been thinking may be the problem (I can't find to much on using jade with highcharts so this leads me to think it may not be compatible?)

Change data source of Chart on select

I need a little bit of help to change data from a chart, when an option is selected from a drop-down menu. I've searched for similar questions but nothing was really helpful.
So far I have this code and I don't understand what am I missing that it's not working?
the html:
<div id="scroll-container">
<select id="menu">
<option value="Oil">Oil</option>
<option value="Gas">Gas</option>
</select>
<div id="container_Oil" data-role="ejmchart" style="height: 320px"></div>
</div>
and the javascript part:
<script>
$(function () {
var value = document.getElementById("menu").value;
var chart = document.getElementById("container_Oil");
$('#menu').change(function(evt){
var dataSelection = eval($("#menu").val());
var chart = $('#container_Oil').ejChart ({
dataSource: dataSelection
})
})
})
</script>
The date I am using for the chart, I have in another file, app.js and it contains the following:
var Oil = ...
var Gas = ...
$("#container_Oil").ejChart(
{
primaryXAxis:
{
//labelFormat: 'dd, MM',
//labelFormat: "{value}",
range: { min: 1, max: 30, interval: 2 },
font: { size: '10px' },
labelRotation: 20,
visible :false
},
primaryYAxis:
{
labelFormat: "{value}",
//range: { min: 39, max: 40, interval: 0.1 },
rangePadding: 'normal',
font: { size: '10px' },
visible : false
},
commonSeriesOptions: {
tooltip: { visible: true },
type: 'line', enableAnimation: false,
marker:
{
shape: 'circle',
size:
{
height: 5, width: 5
},
visible: true
},
border: { width: 2 }
},
series: [{
//Binding series with a JSON data source
dataSource: Oil,
//Mapping name of the field containing X value to series
//xName: 'Day',
//Mapping name of the field containing Y value to series
yName: 'Actual',
name: 'Actual'
},
{ dataSource: Oil,
//xName: 'Day',
yName: 'Plan',
name: 'Plan'
}
],
canResize: true,
load: 'onchartload',
title: { text: 'Product - Oil', font: { size: '12px' } },
legend: { visible: true, position: "top" }
});
I want when I select for example Gas in the selector to change the dataSource for the chart from Oil to Gas.
I tried debugging and it said that "Oil" and "Gas" were undefined. Then I tried to put the data for "Oil" and "Gas" in the same file with the script. No more error, but still not working. I think I am missing something important in my code, but I can't seem to understand what. A little help would be more than welcomed!

Perhaps it only creates the charts on page load? Since it's only two charts, you could create them both on page load, and then hide and show the divs depending on the dropdown value for a quick fix.

Did you tried?
$('#menu').on( "change", function(evt){
Instade of:
$('#menu').change(function(evt){

Flot fails to render charts on certain browsers

I have a simple line chart that contains 2 series, with the x-axis being a date and the y-axis an integer. The code that illustrates this is as follows:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="flot/jquery.js"></script>
<script type="text/javascript" language="javascript" src="flot/jquery.flot.js"></script>
<style type="text/css">
#overview-plot24 {
width: 94%;
margin-left: 20px;
height: 220px;
}
</style>
<script type="text/javascript">
$(function() {
var plotOptions = {
//Options go here
xaxis: {
mode: "time",
tickLength: 5,
reserveSpace: true,
autoscaleMargin: 0.01
},
yaxis: {
min: 0
},
legend: {
show: false
},
series: {
lineWidth: 1,
shadowSize: 0
},
grid: {
hoverable: true,
clickable: true
}
};
var plot2 = $.plot(
'#overview-plot24', [
{
label: "Alerts",
color: "#FC8200",
data: [
[Date.parse("2013-03-19 15:00"), 9650],
[Date.parse("2013-03-19 16:00"), 33124],
[Date.parse("2013-03-19 17:00"), 27806],
[Date.parse("2013-03-19 18:00"), 24143],
[Date.parse("2013-03-19 19:00"), 7573],
]},
{
label: "Scores",
color: "#8000FF",
data: [
[Date.parse("2013-03-19 15:00"), 26407],
[Date.parse("2013-03-19 16:00"), 93973],
[Date.parse("2013-03-19 17:00"), 77760],
[Date.parse("2013-03-19 18:00"), 68715],
[Date.parse("2013-03-19 19:00"), 20383],
]
}
],
plotOptions
);
});
</script>
</head>
<body>
<div id="overview-plot24"></div>
</body>
</html>
This is correctly rendered in Chrome and Opera, but the series fails to be rendered on Safari and Firefox.
Chrome renders is correctly.
Safari and Firefox renders it incorrectly.
This is perplexing as the examples on the flot web page render correctly on all browsers and I'm struggling to see where my code differs!
For those interested in running the code directly, zip archive containing all you need is available.

The problem is not in Flot or its rendering but in the JavaScript, specifically in the format you use for date.
Format you're using for date is not valid (see horizontal axis in the rendered chart) because that format 2013-03-19 19:00 is recognized by IE and Chrome but not FF and Safari.
The only format you're sure every browser will read is YYYY-MM-DDTHH:mm:ss.sssZ so in your case you should change string in your code to 2013-03-19T19:00. Take a look to this and this posts on SO for other details (or this little tutorial about dates).

Could this be a problem with the Date.parse function not working as you expect on Safari and Firefox? I think the date formats that are recognised are implementation dependent, and may not be consistent across different browsers.
See this question for more details

I had this same issue and, although I fixed the date format it didn't solve the problem. The issue turned out to be a bug in Flot where it will not graph the data if you specify min and max options for time values on the x-axis.
Once I removed the min and max it worked like a charm in all browsers.

jqplot vertical axis label

A really simple question but I could not figure it out... I tried to use jqplot to generate a line plot with vertical y axis label. Based on the example from jqplot web site, all I need is to use this plugin jqplot.canvasAxisLabelRenderer.min.js. I tried it locally, but it did not work. Can anyone give me a hint on this? Here is a demo of my problem.
Below is my code:
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = $.parseJSON($('#x_indi_val').text());
$.jqplot('chart1', [s1], {
seriesDefaults: {
showMarker:false,
pointLabels: { show:false } ,
},
series:[
{label:'Individuals'}
],
axes: {
xaxis: {
label :'Time units',
pad: 0,
},
yaxis: {
label: 'Number of individuals',
//jqplot example indicated that use the following js file can give you a vertical label, I tried locally, but it did not work
//renderer: $.jqplot.canvasAxisLabelRenderer
}
},
legend: {
show: true,
location: 'ne',
placement: 'inside',
fontSize: '11px'
}
});
})​;

You had a few minor yet important issues in your code, as observed in the provided demo sample:
You forgot to import the two scripts required by the label renderer:
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
You were setting the renderer of the axis rather than the label renderer of the axis:
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
Please see the code with the corrected sample.