I'm trying to replace the highcharts that I loaded using ajax. Apparently what I am doing is that I would get new values from the user, send the new values thru Ajax, then return an entirely new graph(different graph type with different data) so what I'm doing is this:
$.ajax({
type: "POST",
url: $("#searchForm").attr( 'action' ),
data: $("#searchForm").serialize(),
success: function(response) {
$('#container').highcharts({ response });
}
});
But what happens is that it just loads a blank graph.
this is my highcharts code:
chart: { type: 'bubble', zoomType: 'xy'}, title: { text: 'Day at a Glance' }, tooltip: {}, xAxis:
{categories:[ 'Delta Air Lines' ]}, yAxis: { title: { text: '# of Crew' } }, series: [{name: '# of
Passengers', URLs:[ '#'], data: [['1',1,0]], point: { events: {click: function() { var someURL =
this.series.userOptions.URLs[this.x]; if (someURL) window.open('http://'+someURL); }}} }]
Is there something wrong with the way I call my ajax or there is something wrong with my highcharts code?
In the response you need to get json, like
{
chart:{
//any options
},
series: [{
data:[1,2,3] //any points
}]
}
So you cannot use something like highcharts({ response }) but highcharts(response)
Related
Am creating a pie chart using data from http request butthe data is never rendered in a pie chart
I have tried
in the html
<div class="col-md-4" *ngIf="overallready">
<chart [options]="overallinsp" class="chart"></chart>
</div>
in typescript code i have
this._reportService.getOverview(utctime:number) //performs http request
.subscribe(
let dtaval = JSON.parse(JSON.stringify(res.totalinspectiondata));
console.log(dtval)
this.overallinsp = {
credits: {
enabled: false
},
chart: {
...
type: 'pie'
},
title: {
text: ...
},
series: [{
name: 'Brands',
colorByPoint: true,
data:dtval
}]
}
this.overallready = true;
)
The above console.log() produces
[{"name":"Bulker delivered","y":0},{"name":"Normal delivered truck","y":4}]
setting the value manually in the series works that is
series: [{
name: 'Brands',
colorByPoint: true,
data:[{"name":"Bulker delivered","y":0},{"name":"Normal delivered truck","y":4}]
}]
What could be wrong since manually setting the data output works but referencing it fails to work?
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();
I am loading Highcharts like this.
var options = {
credits: {
enabled: false
},
chart: {
renderTo: 'chart_box',
type: 'areaspline'
},
title: {
text: ''
},
xAxis: {
crosshairs: true,
labels: {
step: 5,
rotation: -45
}
},
series: []
};
Then I have a function which is called when graph needs to be loaded. Upon calling the function, data is fetched through AJAX and assigned to series and date lie this:
$.ajax({
url: 'url/charts',
type: 'post',
data: data
}).done(function(data) {
var dateCount = data.dates.length;
var stepCount = 1;
if (dateCount > 10) {
stepCount = 5;
}
options.xAxis.categories = data.dates;
$.each(data.series, function(name, elem) {
options.series.push({
name: name.replace('_', ' ').toUpperCase().trim(),
data: elem
})
});
chart = new Highcharts.Chart(options);
});
The issue here is that even though I have given step as 5 , it is showing dates with 15 dates interval. I mean in xAxis labels. It seems like it will be multiplied by three always. If I give 2, it will show 6 days interval in labels. Everything working fine in a chart which is not using AJAX to load data.
When using JSON with a pyramid chart in Highcharts, I don't get any errors in the console log but no data is displayed.
I have charts.php which outcome is this:
{"success":1,"data":[{"name":"John Spoon","data":300}, {"name":"Dave Jones","data":200},{"name":"Other","data":500}]}
This is what I've tried, which returns no data.
<div id="chart" style=
"height:600px;width:100%;"></div>
<script>
$(function () {
$("#chart").html("Loading Activity Log Graph...");
var options = {
chart: {
type: 'pyramid',
renderTo: 'chart',
marginRight: 100
},
title: {
text: 'Activity',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
}
}
},
legend: {
enabled: false
},
name: 'Activity Count',
series: [{}]
};
$.ajax({
url: "charts.php",
type:'post',
dataType: "json",
success: function(data){
options.series = data.data;
var chart = new Highcharts.Chart(options);
}
});
});
</script>
This is my desired outcome, showing without the use of JSON:
http://jsfiddle.net/0dyy44hz/
What do I need to change for it to show data?
Looking at the pyramid example, the data must be in the form of a single series with each data point as an array of [name, value]. You have two options, change your PHP to output the correct format or modify the PHP output in javascript. Since you didn't post your PHP code, I'll do the later:
var data = {"success":1,"data":[{"name":"John Spoon","data":300}, {"name":"Dave Jones","data":200},{"name":"Other","data":500}]};
options.series = [{
data: $.map(data.data, function(i){ // loop outputted data
return [[i.name, i.data]]; // coerce into an array of [name,value]
})
}];
Here's a working example.
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