We Keep Coding

clustered bar graphs not showing properly with respect to category in amcharts3 java script

I have a day-wise top 10 users data up to one week in JSON string. I want to display the top 10 users (repeated/different users) per day so it will be like 10 bar graphs per day and a total of 70 bar graphs.
and I can provide data with unique names and able to create graph content dynamically with amcharts 3 but the first and last data are not showing and the remaining day's data is not positioned properly on the corresponding y-axis.
Please help me with where I am doing wrong.
<script src="../js/amcharts.js" type="text/javascript"></script>
<script src="../js/serial.js" type="text/javascript"></script>
<script src="../js/statistics.js" type="text/javascript"></script>
<style>
#chartdiv {
width : 100%;
height : 300px;
font-size : 11px;
}
</style>
<div id="chartdiv"></div>
statistics.js
function generateGraphs(chartData){
var graphData=[];
var rowData = chartData.split("},");
for(var i=0;i<rowData.length;i++){
if(rowData[i]){
var rowData1 =rowData[i].split(",");
for(var j=0;j<rowData1.length;j++){
if(rowData1[j]){
var rowData2 = rowData1[j].split(":");
var totalKey = rowData2[0];
totalKey = totalKey.replaceAll('"', '');
totalKey = totalKey.replaceAll('[', '');
totalKey = totalKey.replaceAll('{', '');
if(totalKey.toLowerCase()=="day"){
continue;
}
var originalKey =totalKey.split("~");
graphData.push({
"balloonText": "<b>Tenant Name: "+originalKey[0]+"</b><br><b>Day: [[category]]</b><br> <b>Max Used Active Calls: [[value]]</b></span>",
"category":"[[category]]",
"fillAlphas": 1,
"lineAlpha": 1,
"title":totalKey,
"type": "column",
"valueField":totalKey,
"columnWidth": 5
});
}
}
}
}
return graphData;
}
AmCharts.ready(function() {
var weekData = "[
{"RSN14~0":900,"RSN13~0":800,"RSN12~0":300,"RSN17~0":320,"RSN16~0":350,"RSN5~0":300,"RSN3~0":800,"RSN11~0":700,"Day":"Friday","RSN10~0":350,"RSN7~0":500},
{"RSN14~1":400,"RSN11~1":400,"RSN1~1":990,"RSN18~1":650,"RSN16~1":500,"RSN5~1":700,"RSN3~1":800,"RSN19~1":670,"RSN9~1":500,"Day":"Saturday","RSN7~1":600},
{"RSN9~2":90,"RSN10~2":85,"RSN16~2":71,"RSN15~2":60,"RSN14~2":50,"RSN19~2":49,"RSN8~2":80,"Day":"Sunday","RSN7~2":70,"RSN6~2":66,"RSN5~2":55},
{"RSN10~3":850,"RSN16~3":710,"RSN15~3":600,"RSN14~3":500,"RSN13~3":400,"RSN19~3":490,"RSN17~3":470,"Day":"Monday","RSN6~3":660,"RSN5~3":550,"RSN4~3":450},
{"RSN2~4":100,"Day":"Tuesday","RSN4~4":100,"RSN3~4":100},
{"RSN9~5":900,"RSN8~5":800,"RSN7~5":700,"RSN6~5":600,"RSN14~5":550,"RSN13~5":450,"RSN15~5":650,"RSN5~5":500,"Day":"Wednesday","RSN4~5":400,"RSN19~5":440},
{"RSN5~6":6,"RSN4~6":17,"Day":"Thursday","RSN3~6":16,"RSN2~6":15,"RSN1~6":20}
]";
chart2=new AmCharts.AmSerialChart();
chart2.theme="light";
chart2.dataProvider=eval(weekData);
chart2.valueAxes=[{
"type": "serial",
"axisAlpha": 0.1,
"gridAlpha": 0.1,
"minimum" : 0
}];
chart2.graphs=generateGraphs(weekData);
chart2.categoryField="Day";
chart2.columnSpacing=0;
chart2.categoryAxis.gridPosition="start";
chart2.categoryAxis.axisAlpha=0.1;
chart2.categoryAxis.gridAlpha=0.1;
chart2.categoryAxis.boldLabels = true;
chart2.write('chartdiv');
});
Note: i will get 10 unique names on each day but they can repeat in other days if they are in top 10 of that day for that i added extra character(~ followed by row number) to maintain uniqueness for graphs.
Please help me how to fix this issue in amcharts3 or 4 or 5 or in primefaces also
Thanks

How to highlight a line when mouse over it in observable plot using JavaScript?

My chart looks like so::
and here is my code:
linePlot = Plot.plot({
marginLeft: 60, // space to the left of the chart
y: {
type: "log", // set the type
},
marks: [
Plot.line(data, {x: "timestamp", y: "views", z:"artist", title: d=>`${d.artist}`,})
]
})
I want to highlight or change color of each line when the mouse is over it.

The easiest thing to do would be to attach a pointerenter event to the lines. Since you're using Observable, to use D3 to handle that process. Here's what it looks like on Observable:
https://observablehq.com/d/2e1daf099a7aaaea
To be clear, you are using two libraries: D3 and Plot, both of which are automatically available on Observable. You can use them both in vanilla Javascript pretty easily, though:
// Manufacture some data
let pt_lists = d3.range(10).map(() => {
let cur = 0;
return d3.range(1000).map(function(x) {
let step = 2 * d3.randomInt(0, 2)() - 1;
cur = cur + step;
return [x, cur];
});
});
// Plot the data
let plot = Plot.plot({
marks: pt_lists.map((pts) => Plot.line(pts, {
strokeWidth: 2
}))
});
// Here's where the action is.
// We use d3 to select all the paths in the plot
d3.select(plot)
.selectAll("path")
// React when the pointer hovers over the path.
.on("pointerenter", function() {
d3.select(plot).selectAll("path").attr("opacity", 0.2);
d3.select(this).attr("opacity", 1);
});
// Reset the appearance when the pointer leaves the SVG
d3.select(plot).on("pointerleave", function() {
d3.select(plot).selectAll("path").attr("opacity", 1);
});
// Attach the plot to the container DIV
d3.select('#chart').append(() => plot)
<script src="https://cdn.jsdelivr.net/npm/d3#7"></script>
<script src="https://cdn.jsdelivr.net/npm/#observablehq/plot#0.6"></script>
<div id="chart" style="width: 600px; height: 400px"></div>

It might also be possible to do the interaction in css:
d3.select(chart)
.append("svg:style")
.text(`
path:hover {stroke-width: 2px;}
`)

How to get a shifting Plotly plot with JavaScript?

I am trying to create a flowing Plotly plot. However, I am not sure which Plotly parameters to use in order to achieve the result in the example image at the very bottom.
My Plotly is here: RandomSignalFlow
The HTML:
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
The JS:
function rand() {
return Math.random();
}
Plotly.plot('graph', [{
y: [1,2,3].map(rand),
mode: 'lines',
line: {color: '#80CAF6'}
}]);
var cnt = 0;
var interval = setInterval(function() {
Plotly.extendTraces('graph', {
y: [[rand()]]
}, [0])
if(cnt === 100) clearInterval(interval);
}, 300);
So this would create the data flow, but the plot will be constantly compressing horizontally as the data flows in. I am after a tracking behaviour (as in the image bellow).
I tried using .shift() to crop the data's X and Y components but that did not work for some reason.
The project associated with the image is here.

How can I generate custom colors using AnyChart?

How can I generate custom colors using AnyChart?
This is what I have so far. I've commented the line, which refers to the palette - 'Trying to affect palette here'.
anychart.onDocumentReady(function () {
//Trying to affect palette here
//led.palette = anychart.palettes.earth;
// create a stage
stage = anychart.graphics.create("diagramContainer");
// create data
var data = [170, 210, 130, 310];
// set the gauge type
led = anychart.gauges.led();
// set data for the gauge
led.data(data);
// add the default pointer
led.addPointer(2);
// set the size and position
led.bounds("50%", 0, "25%", "100%");
// sets background settings.
led.background({fill: "#FFFFFF 0.0"});
// sets left bound.
led.left("28%");
// sets height.
led.height("35%");
// set the container id
led.container(stage);
// initiate the gauge drawing
led.draw();
});

Palette is not a property, it is a method, as pretty much everything in AnyChart, here is how it is done: http://jsfiddle.net/0vhvnjqp/
// apply palette
led.palette(anychart.palettes.earth);

Here is complete code with custom color in anychart
<!doctype html>
<html>
<head>
<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" />
<style>
html, body, #container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
anychart.onDocumentReady(function() {
// create column chart
chart = anychart.column3d();
chart.background({fill: "#000000 3.5"});
//chart.Color("blue");
// turn on chart animation
chart.animation(true);
// set chart title text settings
chart.title('Top 10 Cosmetic Products by Revenue');
// create area series with passed data
chart.column([
['Rouge', '80'],
['Foundation', '9'],
['Mascara', '10'],
['Lip gloss', '11'],
['Pomade', '12'],
['Nail polish', '14'],
['Eyebrow pencil', '17'],
['Eyeliner', '21'],
['Eyeshadows', '24']
]).fill('red');
chart.tooltip()
.position('top')
.anchor('bottom')
.offsetX(0)
.offsetY(5)
.format('{%Value}%');
// set scale minimum
chart.yScale().minimum(0);
// set yAxis labels formatter
chart.yAxis().labels().format('{%Value}{groupsSeparator: }');
chart.tooltip().positionMode('point');
chart.interactivity().hoverMode('byX');
chart.xAxis().title('Products by Revenue');
chart.yAxis().title('Revenue in Dollars');
// set container id for the chart
chart.container('container');
var yLabels1 = chart.yAxis().labels();
yLabels1.format(function(){
return this.value + "%";
});
// initiate chart drawing
chart.draw();
});
</script>
</body>
</html
>

I think you can directly modify color items in an existing palette:
let palette = anychart.palettes.distinctColors();
palette.items(
['#00FF00', '#FFFF00', '#FFA500', '#FF0000','#F0F0F0', '#101010']
);
// create a tag cloud chart
var chart = anychart.tagCloud(data);
chart.background({fill: "#2F2F2F 3.5"});
chart.palette(palette);
//...
chart.draw()

Dygraph dynamic update legend values disappear

I am using a dygraph to monitor a CSV file and use the dynamic update function. When I hover over the graph to show the values of the curves in the legend, they disappear as soon as the graph is updated, which is a bit annoying.
<html>
<head>
<script type="text/javascript" src="/static/dygraph-combined.js"></script></head>
<body>
<div id="psu"></div>
<script type="text/javascript">
g = new Dygraph(document.getElementById("psu"), "/data/psu",
{
legend: 'always',
hideOverlayOnMouseOut: false,
ylabel: 'current (A)',
height: 480,
width: 640,
sigFigs: 2,
title: 'power interface monitor',
xValueFormatter: Dygraph.dateString_,
xAxisLabelFormatter: Dygraph.dateString_,
xTicker: Dygraph.dateTicker
} );
window.intervalId = setInterval(function(){g.updateOptions( { 'file': "/data/psu" } ); }, 1000);
</script>
</html>
So the graph is all displaying correctly and the data is updated, only the legend values disappear after the graph is refreshed with g.updateOptions(). I was thinking maybe I can re-trigger some kind of "mouseover" event after g.updateOptions() so the values come back, but there might be a cleaner way of doing it.
Thanks.

I found a solution to my problem, but I am not sure how well it is implemented. I share it here so others might find it:
$(document).ready(function() {
var data = [];
var t = new Date();
for (var i = 10; i >= 0; i--) {
var x = new Date(t.getTime() - i * 1000);
data.push([x, Math.random()]);
}
var last_mousemove_evt = null;
var on_graph = false;
var g = new Dygraph(document.getElementById("div_g"), data, {
legend: 'always',
drawPoints: true,
showRoller: true,
valueRange: [0.0, 1.2],
labels: ['Time', 'Random'],
highlightCallback: function(e, x, pts, row) {
last_mousemove_evt = e;
on_graph = true
},
unhighlightCallback: function(e) {
on_graph = false;
}
});
// It sucks that these things aren't objects, and we need to store state in window.
window.intervalId = setInterval(function() {
var x = new Date(); // current time
var y = Math.random();
data.push([x, y]);
g.updateOptions({
'file': data
});
if (on_graph) {
g.mouseMove_(last_mousemove_evt);
}
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="div_g" style="width:600px; height:300px;"></div>
So I end up using the highlightCallback and unhighlightCallback options so I can figure out the mouse position and after a dynamic update call then the dygraph.mouseMove_() function to redraw the legend values. Seems to work.
Please let me know if there is a nicer solution around. Might be good to include this functionality in the dygraph.updateOptions() by default, as it seems weird that the legend values disappear after an update.