We Keep Coding

How to create a RealTime ApexChart with vue

I am trying to follow the vue documentation on ApexCharts website.
https://apexcharts.com/vue-chart-demos/line-charts/realtime/
and the way they structured the component isn't practical. and seem like they have some missing methods in the example.
I wish to create a chart as in the example above that fetches data every second (1 second worth data)
<template>
<VueApexCharts
type="line"
height="350"
width="100%"
:options="chartOptions"
:series="series"
ref="chart"
/>
</template>
<script>
import { ref } from "vue";
import VueApexCharts from "vue3-apexcharts";
import { useStore } from "vuex";
export default {
name: "ChartApex",
components: { VueApexCharts },
props: ["session"],
setup(/* props */) {
let store = useStore();
let chartStream = undefined;
let series = [
{
name: "data1",
data: ref([]),
},
{
name: "data2",
data: [],
},
];
let chartOptions = {
chart: {
// id: "realtime",
width: "100%",
height: 350,
type: "line",
animations: {
enabled: true,
easing: "linear",
dynamicAnimation: {
speed: 1000,
},
},
toolbar: {
show: true,
},
zoom: {
enabled: true,
},
},
dataLabels: {
enabled: true,
},
stroke: {
curve: "straight",
},
title: {
text: "Chart",
align: "left",
},
grid: {
row: {
colors: ["#f3f3f3", "transparent"],
opacity: 0.5,
},
},
xaxis: {
type: "numeric",
show: true,
range: 3,
},
yaxis: {
min: -32768,
show: true,
max: 32768,
},
};
return {
chartOptions,
series,
store,
chartStream,
};
},
watch: {
"session.device.isDataStream"(newVal) {
if (newVal) this.startStream();
else this.endStream();
},
},
methods: {
startStream() {
console.log("starting chart stream");
this.chartStream = setInterval(() => {
// Push data
this.series[0].data.value.push(
...this.store.state.session.samples[0].at(-1)
);
}, 1000);
},
endStream() {
console.log("end chart srtrem");
clearInterval(this.chartStream);
},
},
};
</script>
I wish to display a range of 10 seconds on the X-axis (as in the example above).
When getting a new 1 second worth data: i would like my chart to show extra data and move one second ahead (x-axis) so it always remain as 10 seconds in total.
I am fetching data from my store which keeps updating in chunks. unfortunatly it stacks all in one chart that doesn't move. I wish to display one chunk every second.
I would prefer linking my data directly to the store variable. I am not doing this because i would need to use computed method, and i think it's less efficient (is it?)
the store.state.samples[0] is an array of chunks with around 1 second worth of data in each, structured as apex-charts use: [ts, sample] - looks like this:
// samples[0]
[
// Chunk 1 of almost a second
// [0] =>
[
[ // sample
8.75,
0
],
[ // sample
17.5,
-1
],
[ // etc
26.25,
-2
],
[
35,
-3
],...
],
[ // Chunk 2 of almost a second.
[
958.6875,
-12747
],
[
962.375,
-12808
],
[
966.0625,
-12789
],...
]
]
so that basically i push a chunk worth a second to my chart (..every second)
A lot recommend on apex-charts as a go-to charts library for vue, but seems they lack of proper documentation.
-

Here is link to the source code of the sample. Check there how it was built.
To show the range of 10 seconds use the xaxis.range setting:
const TICKINTERVAL = 1000;
const XAXISRANGE = 10000;
const ARRAYLENGTH = XAXISRANGE / TICKINTERVAL + 1;
xaxis: {
type: 'datetime',
range: XAXISRANGE,
position: 'bottom',
To move the X-Axis you should slice you data array, like the resetData() function does:
function resetData(){
data = data.slice(data.length - 10, data.length);
}
I did it with my ARRAYLENGTH constant
data.push(...new Data...);
if (data.length > ARRAYLENGTH) data = data.slice(-ARRAYLENGTH);

javascript show " instead of double quots

I want to show a line chart in my page by javascript.
sample code for showing chart is same as below
new Chartist.Line('#chart-with-area', {
labels: ["d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8"],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
}, {
low: 0,
showArea: true,
plugins: [
Chartist.plugins.tooltip()
]
});
I am using laravel framework and I need to send data from php to javascript.
I created two arrays, one for labels and one for data.
The problem is that when I add array for labels , I faced with below errors
htmlspecialchars(): Argument #1 ($string) must be of type string, array given
and when I send json , javascript change double quots
new Chartist.Line('#chart-with-area', {
labels: ["2021\/7\/5","2018\/11\/17","2019\/1\/8","2018\/10\/25","2019\/4\/9","2018\/11\/18","2019\/3\/11","2019\/1\/3","2019\/1\/5","2018\/12\/17","2021\/5\/25","2018\/12\/31"],
series: [[1,1,1,1,1,1,1,3,1,1,2,6]]
}, {
low: 0,
showArea: true,
plugins: [
Chartist.plugins.tooltip()
]
});
here is my code:
new Chartist.Line('#chart-with-area', {
labels: {{json_encode($requestLineChartLabel)}},
series: [{{json_encode($requestLineChartData,JSON_NUMERIC_CHECK)}}]
}, {
low: 0,
showArea: true,
plugins: [
Chartist.plugins.tooltip()
]
});
I searched a lot, but can't find any solution.

If you're using Laravel 7 or higher, you can use the #json blade directive to properly output json:
labels: #json($requestLineChartLabel),
series: [#json($requestLineChartData,JSON_NUMERIC_CHECK)]
Just make sure that those variables are not already json, or else you'll be double encoding it.

highcharts error 17 when creating a heatmap

I'm trying to generate a heatmap using data inserted by gon.
The frame for the chart is generated correctly in the browser, but the chart is missing, just blank.
and in the console I get:
Uncaught Highcharts error #17: www.highcharts.com/errors/17
which seems to be generated by the initSeries method in highcharts after a comment mentioning:
// No such series type
I'm using RoR4, with this in the Gemfile:
gem "highcharts-rails", "~> 3.0.0"
and this in the application.js:
//= require jquery
//= require jquery_ujs
//= require tether
//= require bootstrap-sprockets
//= require highcharts
//= require highcharts/highcharts-more
//= require turbolinks
//= require_tree .
my SLIM:
td
.card
.card-img-top(data-template-chart=true data-id=template.to_param)
my includes (from the compiled HTML):
<script src="/assets/highcharts.self-d34c91baaad4188e2d81d954aa38de43ec4916882f39d2d908f86d47a6e942b0.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/highcharts/highcharts-more.self-995bc649d8f9f68a0bb6bfb3242b35a20c494d716164fa0c93a74630b291113b.js?body=1" data-turbolinks-track="true"></script>
Inspecting the "sources" in the browser I can see both files being loaded
my coffeescript:
$(window).bind 'page:change', ->
initPage()
initPage= ->
$('[data-template-chart]').each( ->
curId = $(this).data("id")
data = gon.templates[curId]
$(this).highcharts
chart:
height: 150
width: 150
title: text: ''
xAxis:
showLastLabel: false
tickLength: 16
yAxis:
title: text: null
labels: format: '{value}:00'
minPadding: 0
maxPadding: 0
startOnTick: false
endOnTick: false
tickPositions: [0, 6, 12, 18, 24]
tickWidth: 1
min: 0
max: 23
reversed: true
colorAxis:
stops: [
[0, '#3060cf']
[0.5, '#fffbbc']
[0.9, '#c4463a']
[1, '#c4463a']
]
min: -15
max: 25
startOnTick: false
endOnTick: false
# labels: format: value
series: [
{
type: 'heatmap'
data: csv: data
borderWidth: 0
nullColor: '#EFEFEF'
colsize: 24 * 365
}
]
)
I'm guessing the issue is with the highcharts-more library, which is being loaded in the browser, but it doesn't seem to be available, and I'm guessing it's a problem with the javascript generated by coffeescript.
This is the compiled version:
(function() {
var initPage, update_form;
$(function() {
return initPage();
});
$(window).bind('page:change', function() {
return initPage();
});
update_form = function() {
var chart, end_quote, extremes, start_quote;
chart = $('#template_chart').highcharts();
extremes = chart.xAxis[0].getExtremes();
start_quote = Math.ceil(extremes.min);
end_quote = Math.floor(extremes.max);
$('#template_match_start_quote_id').val(gon.ids[start_quote]);
return $('#template_match_end_quote_id').val(gon.ids[end_quote]);
};
initPage = function() {
$('select[flexible_select]').flexible_select();
return $('#template_chart').each(function() {
var categories, prices;
prices = gon.prices;
categories = gon.ids;
return $(this).highcharts({
chart: {
zoomType: "x",
events: {
redraw: function() {
return update_form();
}
}
},
title: {
text: null
},
xAxis: {
categories: categories,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: "Price",
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: {
href: "http://www.pattern4all.com",
text: "source: www.pattern4all.com"
},
series: [
{
name: "Price",
data: prices,
type: "line",
marker: {
enabled: false
},
tooltip: {
valuePrefix: "$"
},
style: {
color: Highcharts.getOptions().colors[1]
}
}
]
});
});
};
}).call(this);

Turns out that:
I needed to add
//= require highcharts/modules/heatmap
to my application.js I thought it was a redundant inclusion, but apparently it's not.
Also the GEM readme, at: https://github.com/PerfectlyNormal/highcharts-rails mentions to install: gem "highcharts-rails", "~> 3.0.0" but 3.0.0 is not the latest version, I updated the gem inclusion to: gem "highcharts-rails", "~> 4.1.9", which is currently the latest, and the problem seems fixed.
Even removing completely the version specification would work:
gem "highcharts-rails"
getting the project to use the latest version.
I'm going to make a pull request to update the readme.

Flot pie chart series name "undefined"

I am trying to display browser visits for my site using flot pie chart. Everything is working properly except the series name displays as undefined.
Data for the series is.
[
[
"Chrome",
"54"
],
[
"Firefox",
"51"
],
[
"Internet Explorer",
"9"
],
[
"Opera Mini",
"2"
],
[
"Safari",
"2"
]
]
and the JavaScript is
$('#browserVisits').css({
height: '300px',
width: '100%'
});
$.plot($('#browserVisits'), visits, {
series: {
pie: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
},
legend: {
show: false
}
});
And the result for this series is like
Why the series name displays undefined instead of browser name?
What am I doing wrong and what can be the solution?
Thanks.

Well you just have to add formatter function in pie block as follows
label: {
show: true,
formatter: function(label,point){
return(point.label + '<br>'+ point.percent.toFixed(2) + '%');
}
}
Also i have created a sample fiddle for you take a look
http://jsfiddle.net/coolbhushans/03kd2mav/

How do I skip a datapoint in Highcharts without causing an interruption in the line of the chart?

Using Highcharts ...
I have a series of values that corresponds with a series of times. Sometimes, the data value is null on a specific time and no marker is placed on the chart, which is good, but the line gets interrupted and basically starts a new chart on the next value that is not null.
I would like to skip the null values on the chart, but still keep the time values and just connect the last non-null value to the next with a solid line.
I have tried skipping the entire index if the value is null, but then the time value is skipped as well.
I have replaced the null with 0, but obviously then the data points lands on the 0-axis.
This is my data:
for (i = 0; i < tpoints.length; i++)
{
var tc = cpoints[i];
var tf = fpoints[i];
var t = tpoints[i];
labels.push(t);
c.push(tc);
f.push(tf);
}
This is my chart config:
var config = {
type: 'line',
fill : false,
data: {
datasets: [{
data: f,
backgroundColor: [
color(window.chartColors.red).alpha(0.5).rgbString(),
],
label: '',
fill : false
},{
data: c,
backgroundColor: [
color(window.chartColors.blue).alpha(0.5).rgbString(),
],
label: '',
fill : false
}],
labels: labels
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: true,
text: title,
fontSize: 22
},
legend: {
position: "bottom",
display: false
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'T'
},
ticks: {
beginAtZero: true
}
}]
}
}
};
This creates the line-chart as expected (Color dots for each data point. Each data dot is then connected with a thin grey line.), but somewhere in the middle of the chart, if it receives a null value, the grey line gets cut and only displays again between two non-null values.
Any ideas on how i can connect the data point before the null with the data point after the null?

Enable the connectNulls option:
series: [{
data: [...],
connectNulls: true
}]
Live demo: http://jsfiddle.net/BlackLabel/fheb9yp5/
API Reference: https://api.highcharts.com/highcharts/series.line.connectNulls

can you show us how your data shows up? if the null values ​​have a meaning in your treatments I suggest you change the type of graph or replace the null values ​​by zero