I have a Page where I have some Project Stats based on different Project Task Statuses. On this page I use AJAX to update my Stat values as they change.
I am now trying to integrate a Highcharts bar chart/graph and I need to update it;s chart when my data changes.
There is a JSFiddle here showing the chart I am experimenting with now http://jsfiddle.net/jasondavis/9dr345og/1/
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('datatable')
},
chart: {
type: 'column'
},
title: {
text: 'Project Stats'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Total'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
},
subtitle: {
enabled: true,
text: 'Project Stats'
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits: {
enabled: false
}
});
// Button Click to Simulate my Data updating. This increments the Completed Tasks bar by 1 on each click.
$(".update").click(function() {
var completedVal = $('#completed').text();
++completedVal
$('#completed').text(completedVal)
});
});
So this example is getting the data from a Table but I do not have to use this method, I could also set it with JavaScript if needed.
I just need to figure out how I can update all these values on the fly as my real live page updates my task stat values using AJAX so I would like this chart to update live as well.
Any help on how to make it update? When my AJAX code is ran, I could call some JavaScript at that point if there is a function that rebuilds the chart?
I would drop the use of the table, especially since it looks like you are building it just for highcharts to consume it. Instead return your data via AJAX as a Highcharts series object. and then use the Series.setData method to update your plot. This would be the right way to do it.
If you really want to use the table, you could query out the data and still use setData (this is what Highcharts is doing for you under the hood). Updated fiddle.
$(".update").click(function() {
var completedVal = $('#completed').text();
++completedVal;
$('#completed').text(completedVal);
// get y values
var yValues = $.map($('#datatable tr td'),function(i){return parseFloat($(i).text());});
// set data
Highcharts.charts[0].series[0].setData(yValues);
});
Related
I have a problem with custom onClick function on doughnut chart.
The only thing I need is to override default legend onClick function calling the original one + my custom code.
Following their official documentation and this suggestion on github page I wrote this js
var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;
var newLegendClickHandler = function (e, legendItem) {
console.log(legendItem);
defaultLegendClickHandler.call(this, e, legendItem);
};
Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.
Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.
legend: {
position: 'top',
onClick: newLegendClickHandler
},
Please also check Custom On Click Actions from Chart.js
documentation
The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.
var options = {
cutoutPercentage: 20,
responsive: true,
legend: {
position: 'top',
onClick: newLegendClickHandler,
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
};
Okay so i have the following highChart tag:
<highchart id="chart1" config="chartConfig" ></highchart>
Now in my system i have several tabs. it happens to be that the high chart is not under the first tab.
Now when i press the tab that contains the chart, the chart looks abit odd:
(You can't tell from this picture but it is only using like 30% of the total width)
But change the browser size and then changing it back to normal the chart places it self correctly inside the element (this also happens if i just open the console while i am inside the tab):
I am guessing that it has something to do with the width of the element once it has been created (maybe because it is within another tab) but i am unsure how to fix this.
I attempted to put a style on the element containg the highchart so that it would look something like this: <highchart id="chart1" config="chartConfig style="width: 100%"></highchart>
However this resulted in the chart running out of the frame.
My chart config
$scope.chartConfig = {
};
$scope.$watchGroup(['login_data'], function(newValues, oldValues) {
// newValues[0] --> $scope.line
// newValues[1] --> $scope.bar
if(newValues !== oldValues) {
$scope.chartConfig = {
options: {
chart: {
type: 'areaspline'
}
},
series: [{
data: $scope.login_data,
type: 'line',
name: 'Aktivitet'
}],
xAxis: {
categories: $scope.login_ticks
},
title: {
text: ''
},
loading: false
}
}
});
Can you try one of the following in your controller? (or perhaps both!)
$timeout(function() {
$scope.chartConfig.redraw();
});
$timeout(function() {
$scope.chartConfig.setSize();
});
Calling the reflow method solved my similar issue on showing chart in a modal. Hope this will help others :D
Add this to your controller after $scope.chartConfig:
$scope.reflow = function () {
$scope.$broadcast('highchartsng.reflow');
};
I have enabled my pie chart to have multiple sections selected. (Not yet got it working as I want it though). Open SO questions here
But once I get this done, I would like to return the list of selected sections everytime a change in made in any selection.
Can someone please suggest. !!
My COde:
series: [{
name: 'Departments',
// allowPointSelect : true,
slicedOffset: 0,
states: {
select: {
color: 'red'
}
},
point: {
events: {
click: function(event){
//this.slice(null);
this.select(null, true);
filterCharts(cloneDonutData.Departments, dChart.series[0].name,this.name);
//console.log(this.series[0].chart.getSelectedPoints());
}
}
} ,
data: ....
]
USe: http://api.highcharts.com/highcharts#Chart.getSelectedPoints
getSelectedPoints () Since 1.2.0
Returns an array of all currently selected points in the chart. Points can be selected either programmatically by the point.select() method or by clicking.
I have EXT JS 4.2 Grid and store.
Now one page load grid get data from store and display on UI.
I have date drop down filter on page. on date selection of date filter one request should go to server fetch data from db and reload store with updated data, and grid should update with updated store value.
My issue is how can i unbind exiting store from grid load, set store params with date, then fetch new data in store and bind to grid. and show updated data on grid?
thanks in advance
this is code where grid is created , one button is created on click of which new params needs to pass to server
{
xtype: 'container',
layout: 'hbox',
style: 'margin-left: 152px;',
width: 960,
height: 'auto',
cls: 'portlet full',
items: Ext.getCmp('grid')
}, { //Create Button to fetch Grid Checked Data//
xtype: 'container',
layout: 'hbox',
style: 'margin-left: 163px;padding-top: 20px;padding-bottom: 59px;',
items: [
Ext.create('Ext.Button', {
name: 'Click me',
width:'40px',
handler: function() {
update =============================================
Ext.create('store', {storeId: 'storetest2'}).load({
params: {
// To send Extra Params
'lastname':'test2'
},
callback: function(records, operation, success) {
// To Perform some call back operations
}
});
scndStore = Ext.data.StoreManager.lookup('storetest2'),
Ext.getCmp('grid').reconfigure(scndStore);
update =============================================
})
],
After getting data into the new store,you can use
grid.reconfigure(store, [columns])
to change which store is bound to the grid..Please have a look docs.
A simple working fiddle
Update:Try this
var store2 = Ext.create('Ext.data.Store', {
model : 'store2Model', //Don't miss to mention model
storeId: 'storetest2',
proxy : {
type : 'ajax',
url :'someUrl'
reader : {
type : 'json',
root : 'items' // depends
}
}
});
store2.load({
params: {
// To send Extra Params
'lastname':'test2'
},
callback: function(records, operation, success) {
grid = Ext.getCmp('grid'); //First check whether you are getting this comp properly
grid.reconfigure(store2);
}
});
It is fixed with this.getStore().load({ params: {test:'test1'},.. I was using filter and I was not clearing it before second load .this.getStore().clearFilter(true);
I'm using Highcharts to display a chart and I'm using Highslide to display additional information in a pop-up when the user clicks on a point in the chart. However, I want to add additional information to the title/heading-text in the pop-up.
I've gotten Highslide to work in displaying basic information using the following code:
$(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
}
credits: {
enabled: false
}
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: []
}
});
I've read through the API for Highslide and saw that you could use the 'heading' variable with the 'Expander.prototype.onAfterGetHeading' function, which I've displayed below, but I'm not sure how to implement it with Highcharts.
hs.Expander.prototype.onAfterGetHeading = function () {
this.heading.html = 'this.a.title';
}
HERE's a site that displays a pop-up with a multi-line title in a Highslide pop-up, as an example. However, keep in mind that I'm trying to implement this in Highcharts, possibly with dynamic text in the title.
Thanks.
Here’s a solution you can use with Highcharts: http://jsfiddle.net/roadrash/gd3xz/
Please note that this is the correct code to insert the anchor's title text in the heading, as an additional heading text:
hs.Expander.prototype.onAfterGetHeading = function (sender) {
if (sender.heading) {
sender.heading.innerHTML += this.a.title;
}
};
I’m not familiar with Highcharts, but I don’t think you can use this.a.title since a refers to the anchor tag. You can of course insert something else than this.a.title with the above code, as I've done in my demo.