Hello I would like to ask how to properly instantiate and process a dynamically added series in Highcharts.
I am bringing about an instance of series like this:
var newSeries = new Highcharts.Series();
var newData = [];
date = Date.parse(newDate() +' UTC');
name = 'datapoint name';
newData.push([date, name]);
newSeries.name = 'Somename';
//newData variable processing
newSeries.data = newData;
newSeries.color = "#EEEEEE";
newSeries.showInLegend = false;
newSeries.index = -1;
chart.addSeries(newSeries);
With this code, I was able to add a new series in a Highchart object runtime. however, I would like to do some additional processing with my series object before adding it up to the actual chart.
I've tried:
newSeries.marker.enabled = "false";
newSeries.marker.states.hover = "false";
newSeries.index = -1; //to be able to send the series at the backmost part of the chart
but failed to achieve desired results.
If possible, can someone point me to the right direction on how to properly instantiate a series object with a marker object inside it?
Any help would be very much appreciated.
EDIT: THE RIGHT ANSWER CARE OF GREG
If you add each point as an object then you have control over the markers as follows:
function addSeries(chart) {
var newSeries = new Highcharts.Series();
newSeries.name = 'Tokyo';
newSeries.data = [{y: 1}, {y:20}, {y:23}, {y:11}];
newSeries.zIndex = -1;
for (var i = 0; i < newSeries.data.length; i++) {
var datum = newSeries.data[i];
datum.marker = {
enabled: false,
states: {
hover: {
enabled: false,
lineColor: '#ff0000'
}
}
};
}
chart.addSeries(newSeries);
}
Here's a working example: http://jsfiddle.net/LrvB9/
Related
new to javascript. I am trying to make a new series in Highcharts using one already graphed series multiplied by another already graphed series. How do I add the new series with its own y-axis? I am using some base code that I have not done myself.
ChartOptions.Series[index].data holds an array of arrays: so for example :[1563480488000, 12.144] would be timestamp and datavalue for every data point in the series.
So I would want something like this:
[1563480488000, 12.144] * [1563480488000, 1.0] = [1563480488000, 12.144]
that's 12.144*1.0, and the timestamp is kept.
dynamicChart is a new Highcharts.StockChart(chartOptions) its just away from the snippet I am working with.
I've tried the following code.
var voltSeries = chartOptions.series[0].data;
var ampSeries = chartOptions.series[1].data;
var wattSeries = [];
for(var i = 0; i <= voltSeries.length; i++){
var valu = chartOptions.series[1].data[i,1]*chartOptions.series[0].data[i,1];
wattSeries[i,1] = valu;
wattSeries[i,0] = valu;
}
eval('window.console && console.log(voltSeries)');
eval('window.console && console.log(wattSeries)');
dynamicChart.addSeries({
name: 'Watts',
data: wattSeries
});
dynamicChart.redraw();
the output of wattSeries is an Array of (2) [NaN, NaN] but It should be the timestamp and the multiplied value.
and It seems like I cannot graph it no matter what I do.
The problem is incorrectly getting values from the array. For nested arrays you should use several parentheses: array[x][x]
var dynamicChart = Highcharts.chart('container', chartOptions);
var voltSeries = chartOptions.series[0].data,
ampSeries = chartOptions.series[1].data,
wattSeries = [],
valu;
for (var i = 0; i < voltSeries.length; i++) {
valu = voltSeries[i][1] * ampSeries[i][1];
wattSeries.push([ampSeries[i][0], valu]);
}
dynamicChart.addSeries({
name: 'Watts',
data: wattSeries,
yAxis: 1
});
Live demo: http://jsfiddle.net/BlackLabel/vpzLou6r/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries
I'm using Dagre to layout my graph and need to send additional properties through to set class/style later in cytoscape.
var graph = new dagre.graphlib.Graph({...});
graph.setEdge(source, target, {
val1: 'foo'
}, e.value);
How to access the additional property val1 later when iterating through edges using graph.edges()?
If I understand it right you should probably be able to get it like that:
var edges = graph.edges();
var i;
for (i = 0; i < edges.length; i++) {
// do stuff
var data = edges[i].data().val1;
// or
var data = edges[i].data('val1');
// or get all attributes
var data = edges[i].data();
//do other stuff
}
I currently have an app that creates an array of markers. But it is not useful, because I would like to see a group of markers and a custom property summed based on the distance between markers (depending on the zoom level).
I've said that maybe with MarkerClusterPlus I could accomplish something like this:
This even shows a custom icon, I don't need that, I only need the number over the cluster.
But I don't know where to start. Could someone place an example or a link?
You must define a custom property on the Marker object, so you can override the Calculator function in markercluster.js
MarkerClusterer.CALCULATOR = function (markers, numStyles) {
var index = 0;
var title = "";
var count = markers.length.toString();
var valueToSum=0;
for(var m=0;m<markers.length;m++){
//This is the custom property called MyValue
valueToSum+=Number(markers[m].MyValue);
}
var dv = val;
while (dv !== 0) {
dv = parseInt(dv / 10, 10); //you could define your own rules
index++;
}
index = Math.min(index, numStyles);
return {
text: valueToSum,
index: index,
title: title
};
};
Say I have a list of a serie name outside the plot, when I hover at one of them I want to set one of the series highlighted(hovered).
This is AFTER the the plot is rendered.
How can I achieve this(I am also using jQuery)
Thank for #Paweł Fus's help.
Finally, I use below way to solve this problem. Since I do not have id in my series array, I use $each() to compare the name
var chart = $plotResult.highcharts();//get the chart object
var highlightSerieCallback = function(e){//mouse in callback
var seriesName = $(this).find(':first-child').text();
console.log('serieName hightLight',seriesName);
$.each(chart.series, function(i, s) {
if(s.name == seriesName){
s.onMouseOver();
return false;//break the each
}
});
};
var disHighlightSerieCallback = function(e){//mouse leave callback
var seriesName = $(this).find(':first-child').text();
console.log('serieName DisHightLight',seriesName);
$.each(chart.series, function(i, s) {
if(s.name == seriesName){
s.onMouseOut();
return false;//break the each
}
});
};
$sumAndAvgResultWrap.find('tr:not(:first-child)').hover(highlightSerieCallback,disHighlightSerieCallback);//bind the callback
I am having some problems with my JavaScript and amCharts graph.
What I am trying to achieve is to reload an amChart line graph with new data from a DIV element. In my final page this DIV element will be dynamically updated and hidden so will not been seen by the end user. The graph needs to be redrawn without reloading the page.
I have an JSFiddle page with an example of my attempts to reload the data.
http://jsfiddle.net/gnuoynomis/Se2UE/1/
I have tried to:
Make objects of the points and add them into a string creating a string of objects but this does not seem to load into the graph.
function LoadNewDataFromDIV_V1()
{
//This function attempts to use a string of objects to pass to the dataprovider setting
var ChartData = document.getElementById("NewData").innerHTML;
var CD = ChartData.split("},{"); //Split the string on the different day elements
var NewChartData = "";
for(i=0; i<CD.length; i++)
{
var D = CD[i];
D = D.replace("{",""); //Remove any additional { that may exist to help with the formating later
D = D.replace("}",""); //Remove any additional } that may exist to help with the formating later
D = "{" + D + "}"; //Add a { and } to reformat the line correctly from the splitting
if(NewChartData != "")
NewChartData += ",";
NewChartData += JSON.parse(D); //Add the parsed object to the data string
}
chart.dataProvider = NewChartData; //Update graph data
chart.validateData(); //Revalidate chart data
}
I have also tried adding the objects into an array and tried passing this but still no luck.
function LoadNewDataFromDIV_V2()
{
//This function attempts to use an array to store the data and pass this to the dataprovider setting
var ChartData = document.getElementById("NewData").innerHTML;
var CD = ChartData.split("},{"); //Split the string on the different day elements
var NewChartDataArray = [];
for(i=0; i<CD.length; i++)
{
var D = CD[i];
D = D.replace("{",""); //Remove any additional { that may exist to help with the formating later
D = D.replace("}",""); //Remove any additional } that may exist to help with the formating later
D = "{" + D + "}"; //Add a { and } to reformat the line correctly from the splitting
NewChartDataArray.push(D); //Push the data to the array
}
chart.dataProvider = NewChartDataArray; //Update graph data
chart.validateData(); //Revalidate chart data
}
My reset of the graph works perfectly if I add the entire string straight in manually and this is what I am trying to replicate with the other methods.
If anyone is able to point out what I am doing wrong then I would be most grateful. I am also open to any suggestions if you think that I could be doing this in a better way.
working fiddle
http://jsfiddle.net/Se2UE/2/
the core of my change is here
var NewChartDataArray = [];
for(i=0; i<CD.length; i++)
{
var D = CD[i];
D = D.replace("{","");
D = D.replace("}","");
D = "{" + D + "}";
NewChartDataArray.push(JSON.parse(D));
}
declare NewChartDataArray as array and not string then add an object to array.
You had an array of strings, your library expects an array of objects
refer this