Is there a way to refresh the charts with remote data if you don't use datasource but instead dynamically create a series set with the return data from the API? What I would like to do is have call the API again and rebuilt the chart.
When using Aurelia, there is a 3rd party bridge between kendo and aurelia called the aurelia-kendo-bridge. When using that they have a recreate() function that can be run to reload the charts. I just had to target all my charts and it worked. Thanks very much #Jeroen Vinke for all the help.
using this you can call the api from controller and if you want live update try to refresh the chart at particular time.
$("#chartere").kendoChart({
dataSource: {
transport: {
read: {
url: '#Html.Raw(#Url.Action("method", "controller"))',
dataType: "json"
}
},
group: {
field: "title",
Color: "Color"
}
},
seriesDefaults: {
type: "bar",
stack: {
type: "100%"
}
},
series: [{
field: "value",
colorField: 'Color',
groupColor: function (item) {
var series = item.series;
series.color = series.data[item.index].Color;
}
}],
categoryAxis: {
field: "Category",
majorGridLines: {
visible: false
}
},
valueAxis: {
line: {
visible: true
},
minorGridLines: {
visible: true
}
},
});
and use this for refresh the chart
chart.dataSource.read();
chart.refresh();
please check this url
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#refresh
Every kendo widget have a setOptions function that allow you to change the widget's option the same way you initialized them. You'll be able to replace the series using that function.
$("#chart").kendoChart({
series: [{
data: [1, 2, 3]
}]
});
var chart = $("#chart").data("kendoChart");
chart.setOptions({
series: [{
data: [4, 5, 6]
}]
});
chart.refresh();
Related
Picture as a reference
I want to build this type of chart and my data set link is below. I'm unable to find any example regarding this.
https://docs.google.com/spreadsheets/d/1geCzzfBeyY8yDHAdEFWUSUf8ex3QWfqDtPg7ArOdTw0/edit?usp=sharing
From the referred image I can see that it is a stock chart, which demo base you can find here: https://www.highcharts.com/demo/stock
How to align the series to the particular yAxis you can find here: https://api.highcharts.com/highcharts/series.line.yAxis
Sample demo: https://jsfiddle.net/BlackLabel/95ptgrec/
// Create the chart
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'axis1'
}
}, {
title: {
text: 'axis2'
}
}, {
title: {
text: 'axis3'
},
opposite: false
}],
series: [{
data: generateData()
}, {
data: generateData(),
yAxis: 1
}, {
data: generateData(),
yAxis: 2
}]
});
If you want to implement charts in Angular or React environment I encourage to use the official wrappers:
https://github.com/highcharts/highcharts-angular
https://github.com/highcharts/highcharts-react
I'm using highchart large tree map demo. I'm getting level data on click of each section. But also need to get the data on back button. So I'm using events drill up function to get data on click of back button. below is my code.
this.setState({
data: {
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 0,
}],
data: points,
events: {
click:(e)=>{
console.log(e)
},
drillup:(e)=>{
console.log(e)
}
}
}],
// subtitle: {
// text: 'Click points to drill down. Source: WHO.'
// },
title: {
text: ''
}
}
})
But don't know drill up is not working even click is working and also I added
import drilldown from "highcharts/modules/drilldown";
drilldown(Highcharts);
But still not getting any data. Please help.
Notice that treemap series don't use the drilldown module, but has own drilldown implementation, which logic you can find here: https://code.highcharts.com/modules/treemap.src.js
What you will need to do is render a custom button while clicking the point and attach an update functionality on this button. Something like here:
Demo: https://jsfiddle.net/BlackLabel/gas07t34/
events: {
click() {
let chart = this.chart;
chart.button = chart.renderer.button('back', 500, 0, function() {
chart.series[0].update({
data: data1
})
chart.button.destroy();
}).add()
this.update({
data: data2
})
}
}
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
API: https://api.highcharts.com/class-reference/Highcharts.Series#update
I am trying to using highchart library into Xcode for showing chart In mobile application. Objective C to calling highchart library. For data load I have Included local .CSV file Into Xcode. Now If I am using below code to read the data from CSV file, I cant print the data and chart data also not loading.
My Code Below
$(function () {
$.get('data.csv', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : ''
},
rangeSelector : {
enabled : false
},
scrollbar : {
enabled : false
},
navigator : {
enabled : false
},
plotOptions: {
line: {animation: true},
series: {
marker: {
enabled: true,
fillColor: '#FFFFFF',
lineWidth: 2,
symbol: 'url()'
},
enableMouseTracking: true
}
},
series : [{
name : 'AAS Stock Price',
csv:data,
/*data : [
[1233705600000,13.36],
[1233792000000,13.78],
[1233878400000,14.25],
[1234137600000,14.64],
[1234224000000,13.98],
[1234310400000,13.83],
[1234396800000,14.18],
[1234483200000,14.17],
[1234828800000,13.50],
[1234915200000,13.48],
[1235001600000,12.95],
[1235088000000,13.00],
[1235347200000,12.42],
[1235433600000,12.89],
[1235520000000,13.02],
[1235606400000,12.74],
[1235692800000,12.76]],*/
tooltip: {
valueDecimals: 2
}
}]
});
});
});
data: {
csv: data // data is your param you set in get csv call
},
,
refer Documentation here
For loading data directly from CSV file you should add Highcharts data module and then set the data like:
$.get('data.csv', function(csv) {
$('#container').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
More info about data module can be found in Highchars Docs - here.
I have the following scenario in haml:
#ownershipChart{"chart-data" => [["pie1", 100], ["pie2", 150], ["pie3", 200]]}
#ownershipChart{"chart-data" => [["pie4", 45], ["pie5", 50], ["pie6", 20]]}
and in javascript:
$(function(){
$('#ownershipChart').highcharts({
chart: {
type: 'pie'
},
title:{
text: 'Ownership'
},
plotOptions:{
pie:{
allowPointSelect: true
}
},
series: [{
type: 'pie',
name: 'Ownership',
data: $('#ownershipChart').attr('chart-data')
}]
});
});
As you can figure, I'm trying to create one highcharts function that applies across these two charts at the same time. First, I know this is incorrect because $('#ownershipChart').attr('chart-data') isn't returning anything. Second, is this the right way to think about it? I'm currently dynamically generating the haml div id="ownershipChart" so dynamically generating a highcharts js object every time also feels wrong.
What's the best way to generate multiple highcharts when the div ids they are attached to is unknown and varies user by user?
You could instead use a class, and loop through each instance creating the chart as you go. Something like this:
$(function () {
$('.ownershipChart').each(function() {
$(this).highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Ownership'
},
plotOptions: {
pie: {
allowPointSelect: true
}
},
series: [{
type: 'pie',
name: 'Ownership',
data: $(this).attr('chart-data')
}]
});
});
});
Note that the data property is filled by a reference to this, which means the data will be read from the current element in the iteration.
I was wondering if there was a way of delaying the loading of a Highcharts' chart on page load. At the moment my chart is loading as soon as the page opens which is causing my code to crash as the script has not had enough time to fetch the data for the chart.
Does anyone know how to get around this?
There's a couple ways of doing this. One is to initialise the chart when you receive the data (example using jQuery post, data looks like [5,6,8,11]):
$(function(){
$.post('test_highchart.asp', {actn:'load-data'}, function(dat){
$('#chart').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Delayed Loading'
},
xAxis: {
title: {
text: 'Values'
}
},
series:[{
name: 'value',
data: dat
}]
});
}, 'json');
});
Or you can initialise the chart on load then pump the data into the chart when you get it (again data looks like [5,6,8,11]):
$(function(){
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'bar'
},
title: {
text: 'Delayed Loading'
},
xAxis: {
title: {
text: 'Values'
}
},
series:[{
name: 'values',
id: 'series1',
data: []
}]
});
// load data:
$.post('test_highchart.asp', {actn:'load-data'}, function(dat){
$.each(dat, function (val) {
// add points to chart:
window.chart.get('series1').addPoint(val);
});
}, 'json');
});
check http://www.highcharts.com/docs/working-with-data/live-data for details.
cheers