Related
uplot is used to dislay timeseries data from VictoriaMetrics database.
For the backend Node-Red is used to forward and recieve the query with node-red-contrib-uibuilder.
It works basically and is very fast.
The problem is, when I try to zoom into the uplot graph, my browser (Chrome, Firefox, Edge) freezes. It seems to run out of memory.
Here are parts of my code, using svelte.
<script>
import { onMount } from "svelte";
import { query } from "../lib/uibStore";
import { transformToUplot } from "../lib/helper";
// import uPlot from "uplot";
import Browsebar from "../components/Browsebar.svelte";
import TimerangeSelect from "../components/TimerangeSelect.svelte";
let uplotdiv; //
let opts = {
title: "Temperaturen1",
id: "chart1",
class: "my-chart",
width: 1000,
height: 600,
series: [
{},
{
show: true, // initial toggled state (optional)
spanGaps: true,
label: "RT",
stroke: "red", // series style
scale: "Temperature",
value: (self, rawValue) => rawValue.toFixed(1) + "°C",
},
{
show: true,
spanGaps: true,
label: "KT",
stroke: "green",
scale: "Temperature",
value: (self, rawValue) => rawValue.toFixed(1) + "°C",
},
{
show: true,
spanGaps: true,
label: "VT",
stroke: "blue",
scale: "Temperature",
value: (self, rawValue) => rawValue.toFixed(1) + "°C",
},
],
scales: {
x: { time: true },
Temperature: {
auto: true,
// range: [-10, 20],
side: 3,
},
},
axes: [
{},
{
scale: "Temperature",
values: (self, ticks) => ticks.map((rawValue) => rawValue.toFixed(1) + "°C"),
},
],
cursor: { drag: { x: true, y: true } },
};
let plot; // = new uPlot(opts);
let uPlot;
let d = [[0], [0], [0], [0]];
let resolved = false;
$: uisend($query); //use uibilder.send, if query changes which occurs when timerange or nav index changes
//send a victoriametrics query to the backend, _q is part of query
function uisend(_q) {
// Example 'uvr_prozess_celsius{ort="1"}&start=-3d&step=60s'
uibuilder.send({ topic: "getVMetrics", payload: _q });
}
onMount(async () => {
uisend($query);
const uplotModule = await import("https://unpkg.com/uplot#1.6.22/dist/uPlot.esm.js");
uPlot = uplotModule.default;
plot = new uPlot(opts, [[0], [0], [0], [0]], uplotdiv);
});
uibuilder.onChange("msg", function (msg) {
// load Metrics via Node-Red's uibuilder, serverside
if (msg.topic === "getVMetrics") {
resolved = true;
if (msg.payload.data.result.length > 0) {
d = transformToUplot(msg.payload.data);
plot.setData(d);
}
}
});
</script>
<svelte:head>
<link rel="stylesheet" href="https://unpkg.com/uplot#1.6.22/dist/uPlot.min.css" />
</svelte:head>
<Browsebar>
<TimerangeSelect />
</Browsebar>
<hr />
<div bind:this={uplotdiv} />
{#if resolved}
<code>{$query}</code>
{:else}
<h4>lade Metriken... {$query}</h4>
{/if}
<hr />
Has anyone experienced freezing with uplot? What did you do?
Lucky me, I found the problem. It had to do with the way I transformed the victoriametrics data. On every timestamp I did Number(timestamp).toFixed(0). Without toFixed(0) it is working now. :)
//transform raw data from metrics query to the uplot format
export function transformToUplot(dt) {
let udata = []; //2d data array, conforming uPlot
let tsd = []; //timestamp array
//from first result take only the timestamps
for (let t of dt.result[0].values) {
// tsd.push(Number(t[0]).toFixed(0)); //this was bad!!!!, it lead to freezing
tsd.push(Number(t[0]));
}
udata.push(tsd);
//then the values
for (let r of dt.result) {
let sd = [];
for (let d of r.values) {
let val = Number(d[1]);
sd.push(val);
}
udata.push(sd);
}
return udata;
}
Thanks for your interest!
I have a project where I created the backend with flask. It reads the data from the csv file and transfers it to html. It reads data every second with Ajax. Then I visualize the data with plotly.js. With Ajax, every get operation comes with a delay.I am working with approximately 2000 data.
However, there is a delay in my code. How can I refactor this code? What can I do to avoid delay?
$(function requestData() {
$.ajax({
type: "GET",
url: "/deneme3",
success: function (data) {
//console.log('success',data);
//console.log('success',data[0]);
//console.log('success',data[1]);
var enlem = [];
var boylam = [];
var ch1 = [];
var ch2 = [];
var ch3 = [];
var ch4 = [];
enlem = data[0];
boylam = data[1];
ch1 = data[2];
ch2 = data[3];
ch3 = data[4];
ch4 = data[5];
//console.log('enlem',enlem);
//console.log('boylam',boylam);
var trace1 = {
x: enlem,
y: boylam,
mode: "markers",
marker: {
size: 10,
color: ch1,
colorbar: { x: -0.2, len: 1 },
colorscale: "Jet",
},
};
var data = [trace1];
var layout = {
title: "Scatter Plot with a Color Dimension",
};
Plotly.newPlot("tester", data, layout);
setInterval(function () {
var update = {
x: [[enlem]],
y: [[boylam]],
};
Plotly.extendTraces("tester", update, [0]);
}, 100);
//ch1 grafik
var trace2 = {
y: ch1,
type: "scatter",
};
var data2 = [trace2];
var layout2 = {
title: "CH1",
};
Plotly.newPlot("ch1", data2, layout2);
setInterval(function () {
var update = {
y: [[ch1]],
};
Plotly.extendTraces("ch1", update, [0]);
}, 100);
//ch2 grafik
var trace3 = {
y: ch2,
type: "scatter",
};
var data3 = [trace3];
var layout3 = {
title: "CH2",
};
Plotly.newPlot("ch2", data3, layout3);
setInterval(function () {
var update = {
y: [[ch2]],
};
Plotly.extendTraces("ch2", update, [0]);
}, 100);
//ch3 grafik
var trace4 = {
y: ch3,
type: "scatter",
};
var data4 = [trace4];
var layout4 = {
title: "CH3",
};
Plotly.newPlot("ch3", data4, layout4);
setInterval(function () {
var update = {
y: [[ch3]],
};
Plotly.extendTraces("ch3", update, [0]);
}, 100);
//ch4 grafik
var trace5 = {
y: ch4,
type: "scatter",
};
var data5 = [trace5];
var layout5 = {
title: "CH4",
};
Plotly.newPlot("ch4", data5, layout5);
setInterval(function () {
var update = {
y: [[ch4]],
};
Plotly.extendTraces("ch4", update, [0]);
}, 100);
},
});
setTimeout(requestData, 100);
});
Also, which of the Ajax and socketio would it make more sense to use?
As discussed in the comments, something like this might work: initialize empty plots, then just fill in data in the update function:
function plotData(data) {
const [enlem, boylam, ...chs] = data;
Plotly.extendTraces("tester", {
x: [[enlem]],
y: [[boylam]],
}, [0]);
for (let i = 0; i < 4; i++) {
const j = i + 1;
Plotly.extendTraces(`ch${j}`, {
y: [[chs[i]]],
}, [0]);
}
// After success, wait before loading more data
setTimeout(requestData, 1000);
}
function requestData() {
// Simulate a successful response that returns 6 numbers.
plotData([Math.random(), Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]);
// If a real endpoint was available, you could do something like
/*$.ajax({
type: "GET",
url: "/deneme3",
success: plotData,
});*/
}
function initialize() {
Plotly.newPlot("tester", [{
x: [],
y: [],
mode: "markers",
marker: {
size: 10,
colorbar: { x: -0.2, len: 1 },
colorscale: "Jet",
},
}], {
title: "Scatter Plot with a Color Dimension",
});
for (let i = 1; i <= 4; i++) {
Plotly.newPlot(`ch${i}`, [{
y: [],
type: "scatter",
}], {
title: `CH${i}`,
});
}
requestData(); // Fire off first update
}
$(initialize);
div {
width: 33%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
<div id="tester"></div>
<div id="ch1"></div>
<div id="ch2"></div>
<div id="ch3"></div>
<div id="ch4"></div>
I try to get data from the API and refresh the Pie chart on an Electron application page, but I can't refresh the value of the chart. The values on the chart never change. I tried this method with RGraph Gauge before and it worked, but with Electron doesn't refresh the value. What am I doing wrong? Thank you for your help.
Screenshot of my electron application
<script>
const ipcRenderer = require("electron").ipcRenderer;
const {session} = require('electron').remote;
document.getElementById("backBtn").addEventListener("click",()=>{
ipcRenderer.send("btnBack","101");
});
temp = new RGraph.HorseshoeMeter({
id: 'temp',
min: 0,
max: 50,
value: 15,
options: {
colors: ["#3678c1", '#BED1E3'],
textColor: "#3678c1",
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
hum = new RGraph.HorseshoeMeter({
id: 'hum',
min: 0,
max: 100,
value: 45,
options: {
colors: ["#3678c1", '#BED1E3'],
textColor: "#3678c1",
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
iaq = new RGraph.HorseshoeMeter({
id: 'iaq',
min: 0,
max: 3000,
value: 1232,
options: {
colors: ["#3678c1", '#BED1E3'],
textColor: "#3678c1",
animationOptions: {frames: 60} // Doesn't need to be a string
}
}).draw();
async function getSessionInfo(){
let myPromise = new Promise(function(myResolve, myReject) {
session.defaultSession.cookies.get({name: "human_presence"}, (error,cookies)=>{
if(error){ myReject(error)}
if(cookies.length>0){
let arr = cookies[0];
if(arr.name === "human_presence" && ( (Date.now()-arr.expirationDate) < 600000)){
let obj = JSON.parse(arr.value);
myResolve(obj.accessToken);
}
else{ myResolve("Token bulunamadı")}
}
});
});
return await myPromise;
}
function httpCall(){
getSessionInfo().then(function (val){
let method = "GET";
let url = "http://localhost:4000/classroom/101";
let xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
let obj = JSON.parse(this.responseText);
console.log(obj);
document.getElementById("dateTime-101").innerHTML = "Son Kayıt Zamanı : "+obj.created;
document.getElementById("NoS-101").innerHTML = "Öğrenci Sayısı : "+obj.NoS;
temp.value = parseInt(obj.Temp);
hum.value = parseInt(obj.Hum);
iaq.value = parseInt(obj.IAQ);
RGraph.redrawCanvas(temp.canvas);
RGraph.redrawCanvas(hum.canvas);
RGraph.redrawCanvas(iaq.canvas);
}
});
xmlHttpRequest.open(method, url);
xmlHttpRequest.setRequestHeader('Authorization', 'Bearer ' + val);
xmlHttpRequest.send();
})
}
window.onload = httpCall();
window.setInterval(function(){
httpCall();
}, 20000);
Here's my answer that was posted to the RGraph forum:
This is as a result of the HorseShoe meter not really being a 'real' RGraph chart object - but an adaptation of the Pie chart. As a result I think it's easier to just redraw the entire chart when you update it.
Here's some code:
<canvas id="cvs" width="400" height="400">[No canvas support]</canvas>
<script>
function draw (value)
{
RGraph.reset(document.getElementById('cvs'));
new RGraph.HorseshoeMeter({
id: 'cvs',
min: 0,
max: 10000,
value: value,
options: {
}
}).roundRobin();
}
delay = 2000;
function update ()
{
var value = Math.random(0, 1000);
draw(value * 10000);
// Call ourselves again
setTimeout(update, delay);
}
setTimeout(update, delay);
</script>
And here's a CodePen of the code:
https://codepen.io/rgraph/pen/gOLYOej
here's the code & output: https://stackblitz.com/edit/d3-angular-gridster2-working-axhc7u?file=src%2Fapp%2Fgrid%2Fgrid.component.html
GRID-HTML
<gridster [options]="options">
<gridster-item [item]="item" *ngFor="let item of dashboard">
</gridster-item>
</gridster>
GRID-TS
ngOnInit() {
#Input() editing: any;
this.options = {
gridType: GridType.Fit,
displayGrid: DisplayGrid.Always,
enableEmptyCellClick: false,
enableEmptyCellContextMenu: false,
enableEmptyCellDrop: false,
enableEmptyCellDrag: false,
enableOccupiedCellDrop: false,
emptyCellClickCallback: this.emptyCellClick.bind(this),
emptyCellContextMenuCallback: this.emptyCellClick.bind(this),
emptyCellDropCallback: this.emptyCellClick.bind(this),
emptyCellDragCallback: this.emptyCellClick.bind(this),
emptyCellDragMaxCols: 50,
emptyCellDragMaxRows: 50
};
this.dashboard = [
{ cols: 2, rows: 1, y: 0, x: 0 },
{ cols: 2, rows: 2, y: 0, x: 2 },
{ cols: 1, rows: 1, y: 0, x: 4 },
{ cols: 3, rows: 2, y: 1, x: 4 },
{ cols: 1, rows: 1, y: 4, x: 5 },
{ cols: 1, rows: 1, y: 2, x: 1 },
{ cols: 2, rows: 2, y: 5, x: 5 },
{ cols: 2, rows: 2, y: 3, x: 2 },
{ cols: 2, rows: 1, y: 2, x: 2 },
{ cols: 1, rows: 1, y: 3, x: 4 },
{ cols: 1, rows: 1, y: 0, x: 6 }
];
}
What I'm trying to do here is to enabled the enableEmptyCellDrag.
for example I clicked the button edit then the value of edit is true and then the value of enableEmptyCellDrag is true.
I already tried this:
ngOnChanges() {
///this.options['enableEmptyCellDrag'] = true // the enableEmptyCellDrag is undefined
///if (this.editing) {
/// this.options['enableEmptyCellDrag'] = true // the value of enableEmptyCellDrag is change to true, but when I try to drag from the empty cell it doesn't work
///}
}
If I understand correctly, you want to set this.options['enableEmptyCellDrag'] to the value of #Input() editing.
And you want to gridster2 (I must admit I don't know what this is) to recognise the change.
So you have 2 problems:
When you're in ngOnChanges, accessing your #Input() directly will give you the "old" value.
Usually, for Angular to detect changes in objects, you need to change the reference of the object.
So this is what your ngOnChanges should look like.
ngOnChanges(changes: SimpleChanges) {
if (changes.editing && changes.editing.currentValue) {
// Solve problem 1)
const newValueOfEditingInput = changes.editing.currentValue;
// Solve Problem 2) - Create a new reference for this.options, so that angular (grister2) can detect the change
this.options = {
...this.options,
enableEmptyCellDrag: newValueOfEditingInput
};
}
}
Of Course I haven't tested this but I hope it can help you
I found a more elegant solution IMHO.
The GridsterConfig object has an api.optionsChanged sub-object which is a function. If you run it that also tells Gridster the options changes without having to, essentially, re-instantiate the object (which probably just runs this function anyway). Seems safer and more elegant.
Thus, your on change can now look like this:
ngOnChanges(changes: SimpleChanges) {
if (changes.editing && changes.editing.currentValue) {
this.options.enableEmptyCellDrag = changes.editing.currentValue;
this.options.api.optionsChanged();
}
}
I also suggest creating a class like the following, which will prevent you from being forced to check if these options exist or not (the if statement is just checking to see if the GridsterConfig interface optional options are defined... so if you define them ahead of time there is no need to do that... not sure why Gridster made there existence optional... IMHO the options should always exist but can be set to null or a default).
export class DashboardOptions implements GridsterConfig{
gridType = GridType.Fit;
compactType = CompactType.None;
margin = 10;
outerMargin = false;
outerMarginTop = null;
outerMarginRight = null;
outerMarginBottom = null;
outerMarginLeft = null;
useTransformPositioning = true;
mobileBreakpoint = 720;
minCols = 1;
maxCols = 100;
minRows = 1;
maxRows = 100;
maxItemCols = 100;
minItemCols = 1;
maxItemRows = 100;
minItemRows = 1;
maxItemArea = 2500;
minItemArea = 1;
defaultItemCols = 1;
defaultItemRows = 1;
fixedColWidth = 105;
fixedRowHeight = 105;
keepFixedHeightInMobile = false;
keepFixedWidthInMobile = false;
scrollSensitivity = 10;
scrollSpeed = 20;
enableEmptyCellClick = false;
enableEmptyCellContextMenu = false;
enableEmptyCellDrop = false;
enableEmptyCellDrag = false;
enableOccupiedCellDrop = false;
emptyCellDragMaxCols = 50;
emptyCellDragMaxRows = 50;
ignoreMarginInRow = false;
public draggable = {
enabled: false,
delayStart: 200,
start: () => {},
stop: () => {}
};
public resizable = {
enabled: true,
delayStart: 200,
start: () => {},
stop: () => {}
};
swap = false;
pushItems = true;
disablePushOnDrag = false;
disablePushOnResize = false;
pushDirections = {north: true, east: true, south: true, west: true};
pushResizeItems = false;
displayGrid = DisplayGrid.Always;
disableWindowResize = false;
disableWarnings = false;
scrollToNewItems = false;
api = {
resize: () => {},
optionsChanged: () => {},
};
itemChangeCallback = (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {};
}
Then, your on change can now look like this:
ngOnChanges(changes: SimpleChanges) {
this.options.enableEmptyCellDrag = changes.editing.currentValue;
this.options.api.optionsChanged();
}
Im building a chart system that will show me all data entries. I retrieve my data using ajax and I loop trough the data and group the results by colors (red, blue and yellow) and then divide them by months.
I setup base objects (dateCounts_Red, dateCounts_Blue and dateCounts_Yellow) so that by default it starts all months at 0. A counter would then add when it finds a match tot he apropriate color and month.
When I output my dateCounts I get:
{"2015":{"2015-12":1,"2015-10":null,"2015-08":null,"2015-11":null}}
{"2015":{"2015-12":0,"2015-10":null}}
{"2015":{"2015-12":0,"2015-10":null}}
Here is the code I have so far:
var dateCounts_Red = {"2015":{"2015-01":0,"2015-02":0,"2015-03":0,"2015-04":0},"2015":{"2015-05":0},"2015":{"2015-06":0},"2015":{"2015-07":0},"2015":{"2015-08":0},"2015":{"2015-09":0},"2015":{"2015-10":0},"2015":{"2015-11":0},"2015":{"2015-12":0}};
var dateCounts_Blue = {"2015":{"2015-01":0,"2015-02":0,"2015-03":0,"2015-04":0},"2015":{"2015-05":0},"2015":{"2015-06":0},"2015":{"2015-07":0},"2015":{"2015-08":0},"2015":{"2015-09":0},"2015":{"2015-10":0},"2015":{"2015-11":0},"2015":{"2015-12":0}};
var dateCounts_Yellow = {"2015":{"2015-01":0,"2015-02":0,"2015-03":0,"2015-04":0},"2015":{"2015-05":0},"2015":{"2015-06":0},"2015":{"2015-07":0},"2015":{"2015-08":0},"2015":{"2015-09":0},"2015":{"2015-10":0},"2015":{"2015-11":0},"2015":{"2015-12":0}};
data.d.results.forEach(function(element) {
var date = element.created_date.slice(0, 7);
var yr = date.slice(0, 4);
var Color = element.colorvalue;
if(Color == "red") {
dateCounts_Red[yr][date]++;
}
if(Color == "blue"){
dateCounts_Blue[yr][date]++;
}
if(Color == "yellow"){
dateCounts_Yellow[yr][date]++;
}
});
Red_yr_2015_data = [dateCounts_Red['2015']['2015-01'], dateCounts_Red['2015']['2015-02'], dateCounts_Red['2015']['2015-03'], dateCounts_Red['2015']['2015-04'], dateCounts_Red['2015']['2015-05'], dateCounts_Red['2015']['2015-06'], dateCounts_Red['2015']['2015-07'], dateCounts_Red['2015']['2015-08'], dateCounts_Red['2015']['2015-09'], dateCounts_Red['2015']['2015-10'], dateCounts_Red['2015']['2015-11'], dateCounts_Red['2015']['2015-12']];
Blue_yr_2015_data = [dateCounts_Blue['2015']['2015-01'], dateCounts_Blue['2015']['2015-02'], dateCounts_Blue['2015']['2015-03'], dateCounts_Blue['2015']['2015-04'], dateCounts_Blue['2015']['2015-05'], dateCounts_Blue['2015']['2015-06'], dateCounts_Blue['2015']['2015-07'], dateCounts_Blue['2015']['2015-08'], dateCounts_Blue['2015']['2015-09'], dateCounts_Blue['2015']['2015-10'], dateCounts_Blue['2015']['2015-11'], dateCounts_Blue['2015']['2015-12']];
Yellow_yr_2015_data = [dateCounts_Yellow['2015']['2015-01'], dateCounts_Yellow['2015']['2015-02'], dateCounts_Yellow['2015']['2015-03'], dateCounts_Yellow['2015']['2015-04'], dateCounts_Yellow['2015']['2015-05'], dateCounts_Yellow['2015']['2015-06'], dateCounts_Yellow['2015']['2015-07'], dateCounts_Yellow['2015']['2015-08'], dateCounts_Yellow['2015']['2015-09'], dateCounts_Yellow['2015']['2015-10'], dateCounts_Yellow['2015']['2015-11'], dateCounts_Yellow['2015']['2015-12']];
Im currently getting the following error from my Highcharts js:
Uncaught TypeError: Cannot set property 'index' of undefined
THis is preventing the chart system to work correctly the data returned is not being returned with it's expected data.
Here a full example to the issue https://jsfiddle.net/awo5aaqb/21/
Would anyone know what im missing?
Your date count objects have major structural flaw.
When you prettify them they look like:
var dateCounts_Blue = {
"2015": {
"2015-01": 0,
"2015-02": 0,
"2015-03": 0,
"2015-04": 0
},
"2015": {
"2015-05": 0
},
"2015": {
"2015-06": 0
},
"2015": {
"2015-07": 0
},
......
Object keys must be unique so these are clearly being repeated and the compiler will over write duplicates.
Fix the pattern that breaks away from the intended pattern grouping at the beginning
var dateCounts_Red = {
"2015":
{
"2015-01":0,
"2015-02":0,
"2015-03":0,
"2015-04":0,
"2015-05":0,
"2015-06":0,
"2015-07":0,
"2015-08":0,
"2015-09":0,
"2015-10":0,
"2015-11":0,
"2015-12":0
},
};
var dateCounts_Blue = {
"2015":{
"2015-01":0,
"2015-02":0,
"2015-03":0,
"2015-04":0,
"2015-05":0,
"2015-06":0,
"2015-07":0,
"2015-08":0,
"2015-09":0,
"2015-10":0,
"2015-11":0,
"2015-12":0
}
};
var dateCounts_Yellow = {
"2015":{
"2015-01":0,
"2015-02":0,
"2015-03":0,
"2015-04":0,
"2015-05":0,
"2015-06":0,
"2015-07":0,
"2015-08":0,
"2015-09":0,
"2015-10":0,
"2015-11":0,
"2015-12":0}
};
Your data structure is flawed and such comparing values when doing the foreach loop becomes inconsistent because it compares it to multiple values, the above JSON is the fix for your problem.
Not quite codereview.stackexchange.com, but I heavily modified your javascript to make it work a bit better
$.ajax({
url: basePath,
dataType: 'json',
cache: false,
success: function(data) {
var counts = {};
data.d.results.forEach(function(element) {
// If you know it's all the same year, you could totally ignore this
var yr = element.created_date.slice(0, 4);
var month = parseInt(element.created_date.slice(5,7));
var color = element.colorvalue;
if (counts[color] === undefined) {
counts[color] = {};
}
if (counts[color][yr] === undefined) {
counts[color][yr] = {};
}
current_value = counts[color][yr][month];
if (current_value === undefined) {
// Doesnt exist yet, so add it
counts[color][yr][month] = 1;
} else {
// Exists, so increment by 1
counts[color][yr][month] = current_value + 1;
}
});
console.log(JSON.stringify(counts));
console.log(transform_series(counts['red']['2015']));
console.log(transform_series(counts['blue']['2015']));
console.log(transform_series(counts['yellow']['2015']));
var Options = {
chart: {
renderTo: 'myfirstchart',
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 25,
beta: 0,
depth: 70
}
},
title: {
text: "Test Highcharts"
},
subtitle: {
text: 'Test charts'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"]
},
yAxis: {
title: {
text: "Number of entries"
}
},
tooltip: {
headerFormat: '<b>{point.key}</b><br>',
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
depth: 40
}
},
series: [{
name: 'Red',
color: 'red',
data: transform_series(counts['red']['2015']),
stack: '2015'
}, {
name: 'Blue',
color: 'blue',
data: transform_series(counts['blue']['2015']),
stack: '2015'
}, {
name: 'Yellow',
color: 'yellow',
data: transform_series(counts['yellow']['2015']),
stack: '2015'
}]
};
return new Highcharts.Chart(Options);
}
});
// this transforms the hash {10: 5, 11:1, 12:1} to get you all 12 months
// and returns an array of values [ 0, 0, 0, 0, 0 ... 5, 1, 1] that
// can be used in high charts
function transform_series(series) {
return Array.apply(null, Array(13)).map(function (_, i) {return (series[i] === undefined) ? 0 : series[i];}).slice(1,13);
}