update kendo ui series - javascript

I'm trying to update a series of chart. I have found some methods in chartOption but when I change (for example the width) the chart doesn't update.
Is it possible to update the series and if it is how I can do it?

After changing the chart options, you need to call redraw().
For example:
var chart = $("#chart").data("kendoChart");
chart.options.series[0].width = 4;
chart.redraw();
DEMO
In the demo, click the button to change the first series' width.

Related

How to change setPointFillStyle for LightningChart after adding PointSeries?

I am adding the series to the chart like this
const series = this.chartInstance
.addPointSeries({ pointShape: shapes[shapeIndex], dataPattern: lsjs.DataPatterns.horizontalProgressive })
.setPointFillStyle((solidFill) => solidFill.setColor(lsjs.ColorHEX(palette.simpleSet[seriesColorIndex])))
.setName(groupTag.slice(0, groupTag.indexOf('(')));
I have grid that displays the series name and symbol.
On selecting the row from grid I want to hide the series with particular symbol(example circle) from chart.
Can you please suggest a solution to achieve this on row selection(show series) and deselection(hide series) ?
In our Simple Scatter Interactive Example we show how this can be achieved. You can view and edit the code by clicking on the Edit this Example-button.

dc.js barchart Click unable to fadeout other bars

I am new to DC.js and crossfilter. I have a barChart and a rowChart. Selection and filtering is working as expected. After I click the barChart , I see the filter ok but other bars are not faded out.
I want all other Bars to fadeout (except one selected), similar to the row chart.
Here is the Fiddle: https://jsfiddle.net/usingh2buffaloedu/yyps72k5/27/
my data looks like below:
var data = [{"Period":"Q1 2017","Group":"Group1",, more
jsfiddle has all the script and data.
I am using Crossfilter for all grouping.
Any ideas? Thanks all.

Hide x-axis labels but show tooltips in chart.js

I found many answers how to hide every nth label and yet still be able to show it in the tooltip. But there's a catch. If the label is very long, then the chart would be drawn somehow squished to the top of the canvas. It's logical. But is there any way to hide the labels, still show them in the tooltips and yet ignore them while calculating the y-values? So that the line can be drawn from top to bottom of the canvas?
Thank you for any advice!!
You can extend the line chart to do this. Adapted from Hide labels on x-axis ChartJS (which was for bar charts) with some unneeded code removed.
What we do is pretty simple, we first set the labels array to blanks, allow the initialization to happen and finally loop through the points for the (first) dataset and set the labels to the original labels.
Chart.types.Line.extend({
name: "LineAlt",
initialize: function(data){
var originalLabels = data.labels;
data.labels = data.labels.map(function() { return '' });
Chart.types.Line.prototype.initialize.apply(this, arguments);
this.datasets[0].points.forEach(function(bar, i) {
bar.label = originalLabels[i];
});
}
});
It's enough that you set the labels for the first dataset even if you have multiple datasets - when building a multiTooltip, the label is picked from the first dataset.
Fiddle - http://jsfiddle.net/xjchy2dn/

Removing X-Labels of barChart in DC.js

I have a bar chart that created in dc.js and hosted in jsfiddle. i want to remove x labels of this chart . after searching i find this SF question. but even i set
.xAxis().ticks(0)
it doesn't work and i can see the label.so how can i remove the xAxis labels.
Use the .tickValues() function instead, passing an empty array:
.xAxis().tickValues([]);
Complete demo here.

Update via mouseover in google charts

I'm using Google charts to interactively draw some data.
I want to draw two charts. The first chart plots f(x) vs. x. The second chart plots g(x,y) vs. y (for a fixed value x). On mouseover for the first chart, the x value will be used to redraw g(x,y) vs. y.
For example, on mouseover of x=1 on the first chart, the second chart would refresh, drawing g(1,y) vs. y.
The only way I've been able to accomplish this was to manually bind the mouseover event in javascript, and trigger a full redraw of the second chart (by erasing its data and copying in data with the moused over x value). However, there is a built-in mechanism to redraw the chart using values from controls (e.g. a slider, example here).
Does anyone know if there is a way to bind two charts so that the mouseover event can be used to redraw one chart with new parameters?
Have a look at the Programmatic Control Changes example. You can change the lower and upper bounds of the slider by code:
document.getElementById('rangeButton').onclick = function() {
slider.setState({'lowValue': 2, 'highValue': 5});
slider.draw();
};
If you choose a lowValue and highValue of both 5 for example only rows containing this value for the specified column will be shown. Call this inside your onmouseover event of the first chart:
google.visualization.events.addListener(chart1, 'onmouseover', function (e) {
// get the value for x in the current row from the data table
var xValue = data.getValue (e.row, 0);
// set the new bounds of the slider
slider.setState({'lowValue': xValue, 'highValue': xValue});
// update the slider (and chart2)
slider.draw();
}
);
As you will not want the slider being visible, just hide it:
// the slider has been created with 'containerId': 'control'
document.getElementById ("control").style.display = "none";

Categories