Develop Reference

Drawing apexchart timeline chart with dynamic series of data

hi guys i am trying apexchart.js librry to draw a timeline chart.
i want a multiple series depending on tasks i have in sprint in bubble.io in which i want to give name and data parameter dynamically.
following is my code
<div id='chart' style='height: 70vh;'></div>
<script>
var task=[Parent group's Sprint's tasks:each item's Name:formatted as JSON-safe];
var names=[Parent group's Sprint's tasks:each item's developer:unique elements's Fname:formatted as JSON-safe];
var _startDates=[Parent group's Sprint's tasks:each item's Start-date:extract UNIX];
var _endDates=[Parent group's Sprint's tasks:each item's End-date:extract UNIX];
var startDates=[];
var endDates=[];
for(var i=0;i<task.length;i++){
startDates.push(new Date(_startDates[i]));
endDates.push(new Date(_endDates[i]));
}
console.log(names);
function getResult(){
var result=[];
var _data=[];
for (var j=0;j<task.lenght;j++){
_data.push({x:task[i],y:[startDates[i].getTime(), endDates[i].getTime()], fillColor: "#008FFB"})
}
for(var i=0;i<names.length;i++){
result.push({name:names[i],data: _data[i]});
}
return result;
}
var options = {
series:[
getResult()
],
chart: {
height: 450,
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true
}
}, xaxis: {
type: 'datetime'
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>
but it is giving me an error saying
It is a possibility that you may have not included 'data' property in series.
i would appreciate if anyone can suggest me where i am making mistake
thanks

Make events run multiple times, Highcharts

I have a Highchart in which under the options object I have events object as ashown below.
var options = {
chart: {
renderTo: 'container',
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
var series = this.series[0],
chart = this;
...// Some Code
}
}
So what I want is that I need events data to update dynamically and load the Highcharts only once.
How can I make the Following section dynamic so that the values in it change dynamically. Keeping in mind that Highcharts container have to be defined and load only once.
events: {
load: function() {
var series = this.series[0],
chart = this;
...// Some Code
}
}

One of the official Highcharts demos shows how to achieve it. Take a look at it:
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update/
Highcharts also offers other options to update the chart with new data, API:
https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
https://api.highcharts.com/class-reference/Highcharts.Series#update
https://api.highcharts.com/class-reference/Highcharts.Series#setData

The setOptions() does not work on a chart in a ChartWrapper after I run the ChartEditor

I have a chart in a wrapper:
var wrapper9 = null;
var chartcolors09 = parent.defaultcolors;
var chartEditor9 =null;
function Chart9() {
var data = new google.visualization.DataTable(<?=$jsonTableB9?>);
wrapper9 = new google.visualization.ChartWrapper({
chartType:'BarChart',
dataTable: data,
options: {
'colors': chartcolors09,
'chartArea': {
'left': 40,
'top': 50,
'right': 100,
'bottom': 50
},
'legend' :'Right',
'title':'Chart Title'
}
});
}
I can run a function to update colors of that chart using this function:
function setcolor9(){
wrapper9.setOptions({
'colors': chartcolors09
});
wrapper9.draw(document.getElementById('chart_div9'));
}
and this works just fine. I can also use other functions on that chartin that wrapper to update some other options. BUT when I use the ChartEditor on this chart
function loadEditor9() {
chartEditor9 = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEditor9, 'ok', redrawChart9);
chartEditor9.openDialog(wrapper9, {});
}
function redrawChart9(){
chartEditor9.getChartWrapper().draw(document.getElementById('chart_div9'));
}
the setcolor9() function stops working. It kinda looks like the ChartEditor created a 2nd chart and put it on top of the first one and the setcolor9() function keeps referring to the first one.
...oh and not sure if this is connected but the chart created by the loadEditor9() and redrawChart9() functions seems to ignore the height and width options set by other functions in the wrapper9 var and goes "outside" of the div container.

So the answer is of course very simple.
I just needed to change the redrawChart9() function to the below and now I can do whatever I want with that chart.
function redrawChart9(){
wrapper9 = chartEditor9.getChartWrapper();
wrapper9.draw();
}

How to draw 2 functions on a one canvas using Google Charts?

I have the the code below.
And I want to draw 2 lineCharts on the same canvas like here http://prntscr.com/b8oabw
But instead I get this http://prntscr.com/b8o7pg
How to connect all blue parts and all red to make continious lines?
function drawChart() {
// Create the data table.
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'День');
dataTable.addColumn('number', 'Количество ручных назначений');
dataTable.addColumn('number', 'Количество отложенных задач');
#if (Model.ManualAssingDictionary.Count > 0)
{
foreach (var m in Model.ManualAssingDictionary)
{
#:dataTable.addRow(["#m.Key",#m.Value, undefined]);
}
}
else
{
#:$("#NoManualAssignmentForPeriod").css("display", "block");
}
#if (Model.PostponedDictionary.Count > 0)
{
foreach (var m in Model.PostponedDictionary)
{
#:dataTable.addRow(["#m.Key", undefined,#m.Value]);
}
}
else
{
#:$("#NoStoppedTasksForPeriod").css("display", "block");
}
dataTable.sort([{ column: 0 }]);
// Set chart options
var options =
{
'title': 'График количества ручных назначений',
'width': 800,
'height': 600
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(dataTable, options);
}
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);

As the person above said
try using null instead of undefined -- add this to your options --> interpolateNulls: true
Many thanks to him, it's working.

Change position of tooltip in Google Chart

I have a google chart that I'm using where I have set the type of tooltip to be html in my options, like this:
tooltip: { isHtml: true }
Customizing the tooltip to look how I want has been the easy part, but getting the tooltip in the right position has surprisingly difficult. After a lot of searching, I found this answer on tooltip positioning, but cannot seem to get it working.
My javascript (aside from options) for creating the chart and dealing with tooltip positioning is as follows:
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'ready', function () {
var container = document.querySelector('#chart_div > div:last-child');
function setPosition () {
var tooltip = container.querySelector('div.google-visualization-tooltip');
tooltip.style.top = 0;
tooltip.style.left = '-47px';
}
if (typeof MutationObserver === 'function') {
var observer = new MutationObserver(function (m) {
for (var i = 0; i < m.length; i++) {
console.log("mutation: " + m[i].type);
if (m[i].addedNodes.length) {
setPosition();
break; // once we find the added node, we shouldn't need to look any further
}
}
});
observer.observe(container, {
childList: true
});
} else if (document.addEventListener) {
container.addEventListener('DOMNodeInserted', setPosition);
} else {
container.attachEvent('onDOMNodeInserted', setPosition);
}
});
chart.draw(dataTable, options);
I'm using Google Chrome for testing right now, and if I put a debugger in the typeof MutationObserver snippet, I am getting in there and setting the observer, but it seems as though it never gets observed, as I am not even getting the console messages.
Any help would be very appreciated. My html element with the ID chart_div exists (and the chart is rendered there), so I am not sure what I am missing.