We Keep Coding

How do to plot this below values that all categorical values on y axis come in same value as of Xaxis

error image click here
dummy arrays example :
plant_arr = ["abc","dbc","asd"]
opr_no_arr = ["company1","company2","company3"]
draft_arr = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
Pending For Creation = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
Created = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
name: "Pending For Creation",
data: draft_arr,
color:"#000000"
},{
name: "Created",
data: created_arr,
color:'#FF0000'
},{
name: "Execution In Progress",
data: execution_arr,
color:'#FFAE42'
},
{
name: "Completed",
data: completed_arr,
color:'#28a745'
}],
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
},
},
xaxis: {
type: 'category',
//tickAmount: 10,
categories: plant_arr,
}, this is working
yaxis:
{
//type: 'category',
// tickAmount:1,
// categories : opr_no_arr,
labels: {
maxWidth: "auto",
formatter: (val : string, index) => opr_no_arr[index], //error cant show particaular labels
},
title: {
text: "OPR",
style: {
colors: "#000000"
}
}
},
legend: {
position: "top",
horizontalAlign: "right"
}
};
this.first_chartRef = new ApexCharts(document.getElementById('first'), chartOptions);
this.first_chartRef.render();
}
this the image of the output red line are output required

yaxis:
{
type: 'category',
tickAmount:6,
categories : opr_no_arr,
labels: {
maxWidth: "auto",
},
} keep it like this and check ?

Highcharts how to add treemap upon click event on line chart?

Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})

Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click

Highcharts- Javascript- How to show cumulative count of all the series of legend by default, and linked series inside a legend

I am using highcharts to render a column chart and my legends as well. I want to be get the total count of all the legends together (default legend and linkedTo legend).
Ex:
in the fiddle below: I have 2 legends: now when I click on one of them, I want to see the cumulative count of all the series pertaining to that legend clicked.
http://jsfiddle.net/5eb0utxq/
is that possible, currently its getting some count, but im not sure if that is the total count of all the series related to that legend.
code:
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
series: {
showInLegend: true,
}
},
legend: {
labelFormatter: function() {
var totalLegend = this.yData.reduce(function(pv, cv) { return pv + cv; }, 0);
return this.name +" : "+ totalLegend;
}
},
series: [{
data: [4740, 1378, 8],
name: "Confirmed",
id: "Confirmed",
type: "column",
y: "86",
stack: "ACTIVE"
}, {
data: [2932, 141],
name: "Potential", id: "Potential",
stack: "ACTIVE",type: "column",
y: "86"
}, {
data:[1752, 11],
linkedTo: "Confirmed",
name: "Confirmed",showInLegend: false,
type: "column",
y: "86",
stack: "REOPENED"
}, {
data: [1089, 2],
linkedTo: "Potential",showInLegend: false,
name: "Potential",
type: "column",
y: "86",
stack: "REOPENED"
}, {
data: [2332, 1960, 42],
linkedTo: "Potential",
name: "Potential",showInLegend: false,
type: "column",
y: "86",
stack: "NEW"
}, {
data: [480, 4684, 2258],
linkedTo: "Confirmed",
name: "Confirmed",showInLegend: false,
type: "column",
y: "86",
stack: "NEW",
}]
});
});

You need to count yData from all linked series, this is the main series, so you can use the below code:
legend: {
...,
labelFormatter: function() {
var totalLegend = 0;
[...this.linkedSeries, this].forEach(function(lSeries) {
lSeries.yData.forEach(el => {
totalLegend += el
});
});
return this.name + ' (' + totalLegend + ')';
}
}
Live demo: http://jsfiddle.net/BlackLabel/kfger78b/
API Reference: https://api.highcharts.com/highcharts/legend.labelFormatter

Struggling to get this JSON data into highcharts

I have the following snippet of code which takes data from a JSON URL and inputs it into MariaDB.
Now I want to take that data back out the database (as the database records the JSON over time), and then put this into a graph, but I am having difficulty in getting the data out the JSON URL into highcharts... My data looks like this:
[{"time":"1509488314","hashrate":"34096322642","minersTotal":"99"},
{"time":"1509490093","hashrate":"34096645609","minersTotal":"101"},
{"time":"1509490201","hashrate":"34096374421","minersTotal":"101"},
{"time":"1509490321","hashrate":"34138925733","minersTotal":"101"},
{"time":"1509490441","hashrate":"34062086317","minersTotal":"101"},
{"time":"1509490561","hashrate":"34116887228","minersTotal":"101"},
{"time":"1509490681","hashrate":"34053449517","minersTotal":"103"},
{"time":"1509490801","hashrate":"34060600882","minersTotal":"103"},
{"time":"1509490921","hashrate":"34065888457","minersTotal":"103"},
{"time":"1509491041","hashrate":"34093378965","minersTotal":"105"}]
I wish to basically plot the time across the X axis, and hashrate as a line and minersTotal as a bar.
I have done the PHP / MariaDB bit, but doing this part is proving to be a struggle for me.
My php code:
$mysqli = new mysqli($servername, $username, $password, $dbname);
$myArray = array();
if ($result = $mysqli->query("SELECT * FROM hashrates LIMIT 100")) {
while($row = $result->fetch_object()) {
$myArray[] = $row;
}
echo json_encode($myArray);
}
$result->close();
$mysqli->close();

According this demo (Highcharts Demos › Dual axes, line and column). The data must be an array of values e.g: ["Item1", "Item2", "Item3"].
With your data, you can use Array#map().
var times = data.map(function(x) {
return new Date(x.time * 1000);
});
var hashrates = data.map(function(x) {
return x.hashrate * 1;
});
var minersTotals = data.map(function(x) {
return x.minersTotal * 1;
});
You can do something like this:
(function() {
var data = [{
"time": "1509488314",
"hashrate": "34096322642",
"minersTotal": "99"
},
{
"time": "1509490093",
"hashrate": "34096645609",
"minersTotal": "101"
},
{
"time": "1509490201",
"hashrate": "34096374421",
"minersTotal": "101"
},
{
"time": "1509490321",
"hashrate": "34138925733",
"minersTotal": "101"
},
{
"time": "1509490441",
"hashrate": "34062086317",
"minersTotal": "101"
},
{
"time": "1509490561",
"hashrate": "34116887228",
"minersTotal": "101"
},
{
"time": "1509490681",
"hashrate": "34053449517",
"minersTotal": "103"
},
{
"time": "1509490801",
"hashrate": "34060600882",
"minersTotal": "103"
},
{
"time": "1509490921",
"hashrate": "34065888457",
"minersTotal": "103"
},
{
"time": "1509491041",
"hashrate": "34093378965",
"minersTotal": "105"
}
];
var times = data.map(function(x) {
return new Date(x.time * 1000);
});
var hashrates = data.map(function(x) {
return x.hashrate * 1;
});
var minersTotals = data.map(function(x) {
return x.minersTotal * 1;
});
Highcharts.chart("container", {
chart: {
zoomType: "xy"
},
title: {
text: "Data"
},
subtitle: {
text: "Subtitle"
},
xAxis: [{
categories: times,
crosshair: true
}],
yAxis: [{ // Primary yAxis.
labels: {
format: "{value}",
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: "Hashrate",
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis.
title: {
text: "MinersTotal",
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: "{value}",
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: "vertical",
align: "left",
x: 120,
verticalAlign: "top",
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || "#FFFFFF"
},
series: [{
name: "MinersTotal",
type: "column",
yAxis: 1,
data: minersTotals,
tooltip: {
valueSuffix: ""
}
}, {
name: "Hashrate",
type: "line",
data: hashrates,
tooltip: {
valueSuffix: ""
}
}]
});
})();
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: 0 auto; min-width: 310px;"></div>
Let me know if this works for you.

I ended up going with this
$(function () {
var hashrates = new Array();
var minersTotal = new Array();
function refreshdata() {
$.getJSON("data.json", function(data) {
var hashrates = new Array();
var minersTotal = new Array();
for (i = 0; i < data.length; i++) {
var object = data[i];
var time = object.time * 1000;
hashrates.push([time, parseFloat(object.hashrate) / 1000000000]);
minersTotal.push([time, parseFloat(object.minersTotal)]);
}
$('#container').highcharts().series[0].setData(minersTotal, true);
$('#container').highcharts().series[1].setData(hashrates, true);
$('#container').highcharts().redraw();
});
}
$('#container').highcharts({
chart: {
backgroundColor: "rgba(0,0,0,0)",
color: "#FF0000",
alignTicks: false,
events: {
load: function () {
setInterval(function () {refreshdata();}, 60000);
}
}
},
title: {
text: "Pool performance"
},
subtitle: {
text: "3 days (15 min intervals)"
},
tooltip: {
shared: true,
valueDecimals: 2
},
legend: {
layout: "horizontal"
},
xAxis: {
title: {
text: "Time (UTC)"
},
type: "datetime",
showFirstLabel: true
},
yAxis: [{
title: {
text: "Hashrate (GH/s)"
},
labels: {
style: {
color: "#434348"
},
formatter: function() {
return this.axis.defaultLabelFormatter.call(this).toString().substr(0,4);
}
},
gridLineColor: "#434348",
tickInterval: 10,
min: 0
},{
title: {
text: "Miners",
style: {
color: "#95CEFF"
},
},
labels: {
style: {
color: "#95CEFF"
}
},
opposite: true,
tickInterval: 40,
gridLineColor: "#95CEFF"
}],
series: [{
name: "Miners",
type: "spline",
data: minersTotal,
yAxis: 1
},{
name: "Hashrate",
data: hashrates,
type: "spline"
}]
});
refreshdata();
});
It can be seen in action here: https://metaverse.farm/

Kendo dragdrop not working?

I am using Kendo dragdrop for my charts. Its woking fine for some of the charts where I use a different approach for showing the charts.
<div id="ExertiveHeartRate" class="chartContainer"></div>
<div id="BloodPressure" class="chartContainer"></div>
$.ajax({
type: "GET",
url: createURL("AverageHeartRate", period1, period2, "<% = Session["id"] %>"),
dataType: "json",
contentType: "application/json; chartset=utf-8",
async:"false",
success: function (chartData) {
$(container).kendoChart({
dataSource: {
data: chartData
},
seriesColors: ["orangered"],
chartArea: {
background: ""
},
title: {
text: title,
},
legend: {
visible: false
},
seriesDefaults: {
type: "column",
gap: .5,
overlay: {
gradient: "none"
}
},
series: [{
field: "heartrate"
}],
categoryAxis: {
type: "date",
field: "createddate"
},
valueAxis: {
title: {
text: "Exertive HeartRate",
font: "14px Arial,Helvetica,sans-serif"
}
}
});
}
});
If i create chart as above. drag-drop will not work. If I use the code as below, its working fine
var dSource = getJsonData("BloodPressure", period1, period2, "<% = Session["id"] %>");
$(container).kendoChart({
dataSource: dSource,
seriesColors: ["#002EB8"],
title: {
text: title,
font: "14px Arial,Helvetica,sans-serif bold",
color: "#002EB8"
},
chartArea: {
background: ""
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
type:"column",
gap: .5,
overlay: {
gradient: "none"
}
},
series: [
{
name: "diastolic",
field: "diastolic",
categoryField: "createddate",
aggregate: "avg",
tooltip: {
visible: true
}],
categoryAxis: {
type: "date"
},
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
}
});
The code for doing the dragdrop is below:
$(".chartContainer").kendoDraggable({
hint: function (e) {
debugger;
$("#" + e[0].id).addClass("dragStyle");
return e.clone();
},
dragstart: function (e) {
debugger;
e.currentTarget.hide();
},
dragend: function (e) {
if (!e.currentTarget.data("kendoDraggable").dropped) {
$("#" + e.currentTarget[0].id).addClass("dropStyle");
}
e.currentTarget.show();
}
});
$(".chartContainer").kendoDropTarget({
drop: function (e) {
$("#" + e.draggable.element[0].id).addClass("dropStyle");
$("#" + e.draggable.element[0].id).insertBefore("#" + e.dropTarget[0].id);
}
});
$.ajax() function has something which blocks the dragdrop

The $(container) is a bad jquery selector. It should most likely be more like $('#container').
Also you may want to wait to register the drag and drop functionality of kendo until after the chart has been made. So at the end of your success function in the ajax function.
You can also take another approach. You don't need your data to make the chart in the first place. Just declare your chart as normal. You can then pass in your data into the chart after it has loaded.
$.ajax({
url:...,
dataType:'json',
success: function(d){
$('#container').data('kendoChart').dataSource.data(d);
}
});
You may want to display a loading image while you wait.