Develop Reference

Widget chart in aspnetzero jquery

I am trying to implement an apex pie chart in aspnetzero dashboard, when creating the widget everything works fine, but when I try to create the same widget I get the pie chart in the previous widget I created (Meaning I have two pie chart in one widget and then one empty widget, This is my implemented code below
(function () {
app.widgets.Widgets_Host_ErrorLogRate = function () {
var _hostDashboardService = abp.services.app.hostDashboard;
var _widgetBase = app.widgetBase.create();
const success = '#1BC5BD';
const danger = '#F64E60';
var _widget;
var _$errorLogRateContainer;
this.init = function (widgetManager) {
_widget = widgetManager.getWidget();
_$errorLogRateContainer = _widget.find('.kt_chart_error_log_rate');
_widgetBase.runDelayed(getErrorLogRateData);
};
var errorLogRate = function (data) {
const apexChart = "#kt_chart_error_log_rate";
var options = {
series: [data[0], data[1]],
chart: {
width: 350,
type: 'pie',
},
labels: [app.localize('Success'), app.localize('Fault')],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}],
colors: [success, danger]
};
var chart = new ApexCharts(document.querySelector(apexChart), options);
chart.render();
};
var getErrorLogRateData = function () {
abp.ui.setBusy(_widget);
_hostDashboardService.getErrorLogRate().done(function (result) {
errorLogRate(result.errorLogRates);
})
.always(function () {
abp.ui.clearBusy(_widget);
});;
};
};
})();
[This is a screenshot of the output where it puts bot charts in the same widget/card][1]
[1]: https://i.stack.imgur.com/aHzu3.png

Trying to iterate an array through mutliple highcharts

So I have a large amount of data that I need to display all stored in separate CSV files. So I created two charts just fine in highcharts, one line, one area, but instead of copying and pasting the function over and over again I was hoping I could just iterate through it like so:
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
var libraryLength = library.length;
var area =['#attendanceRoom','#attendanceGroup'];
var i = 0;
function areaChart(){
$(function () {
$.get(library[i], function(csv) {
$(area[i]).highcharts({
chart: {
type: 'area'
},
data: {
csv: csv
},
title: {
text: 'Attendance by Room'
},
yAxis: {
title: {
text: null
},
minorTickInterval: 'auto'
},
legend:{
align: 'left',
verticalAlign: 'top',
floating: true
},
});
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart();
}
I was looking at this Manage multiple highchart charts in a single webpage using jQuery.extend() or Highcharts.setOptions but that sets options for each individual chart and then you just make them over and over again. I thought a better solution might be to just have the one function and then just re-run it for each individual chart especially since I'm pulling the data from .CSV files.
So is this possible? Or should I go with jQuery.extend()?
Thanks for any help in advance!

Just two things I would improve:
$(function () { }); - I would encapsulate whole JS, not only part with AJAX and Highcharts:
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
...
for (i = 0; i < libraryLength; i++){
areaChart();
}
});
make library[i] and area[i] as arguments for areaChart():
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
...
function areaChart(lib, area){
$.get(lib, function(csv) {
$(area).highcharts({
chart: {
type: 'area'
},
data: {
csv: csv
}
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart(library[i], area[i]);
}
});
Of course, you can add more params to areaChart for example type, and pass on what kind of the chart should be rendered:
$(function () {
var library = ['data/data.csv', 'data/attendanceGroup.csv'];
var types = ['line', 'area'];
...
function areaChart(lib, area, type){
$.get(lib, function(csv) {
$(area).highcharts({
chart: {
type: type
},
data: {
csv: csv
}
});
});
}
for (i = 0; i < libraryLength; i++){
areaChart(library[i], area[i], types[i]);
}
});
Don't overdo with the params, no one likes to read 10params and control order etc. Instead you may consider passing one object param (renamed from areaChart to myChart):
myChart({
lib: library[i],
area: area[i],
type: types[i]
});
And in myChart() method:
function myChart(options) {
$.get(options.lib, function(csv) {
$(options.area).highcharts({
chart: {
type: options.type
},
data: {
csv: csv
}
});
});
}

Dynamically update Google Chart using AngularJS and Java

My goal is to dynamically update the array table for google charts.
I am unable update the content of the Google Chart with the data I'm passing from my Java class. I use tempGraph2 to initialize the graph when the page load but when the user clicks on a file name, the java class passes a formatted string as follows but it is not updating the content of the chart:
[["Domain names","Domain Count"],["Positive-Female",6],["Positive- GenderNeutral",0],["Positive-Male",17],["Neutral-Female",6],["Neutral-GenderNeutral",0],["Neutral-Male",8],["Negative-Female",3],["Negative-GenderNeutral",0],["Negative-Male",19]]
The value is linked using ng-model as follows:
<div ng:model="tempGraph2"
qn:barcolumns="[
{type:'string', name: 'Categories'},
{type:'number', name: 'Counts'}]"
qn:bar="{
legend : {position: 'none'},
chart: { subtitle: 'popularity by percentage' },
chartArea: {height: 400},
backgroundColor: '#F7F7F7'}"></div>
<div ng:model="tempGraph2"
qn:tabcolumns="[
{type:'string', name: 'Categories'},
{type:'number', name: 'Counts'}]"
qn:options="{
backgroundColor: '#F7F7F7'}"></div>
<p> {{tempGraph}}</p>
<p>{{tempGraph2}}</p>
Even using the ng-model, the graph is not being updated but the {{tempGraph2}} output is. Below is the content of the javascript.
Question: Do I need to create something to redraw the graph after I pull in new data or is there another set of logic I need to be using.
app.js:
$scope.tempGraph2 = [['Domain names','Domain Count'],
["placeholder",6],];
$scope.selectJobRow = function(rowIndex) {
$scope.selectedJobRow = rowIndex;
if ($scope.selectedJobRow > -1) {
$scope.showProgress();
$scope.input.job = $scope.input.jobList[rowIndex];
var prepFile = {fileName: $scope.input.job.outputFile, data: "test"}
$http.post("file/graph", prepFile)
.success(function(data, status) {
$scope.input.graphData = data;
$scope.tempGraph2 = $scope.input.graphData.data;
$scope.hideProgress();
$scope.tempGraph = [
['Domain names','Domain Count'],
["Positive-Female",123],
["Positive-GenderNeutral",22],
["Positive-Male",4],
["Neutral-Female",6],
["Neutral-GenderNeutral",76],
["Neutral-Male",8],
["Negative-Female",3],
["Negative-GenderNeutral",98],
["Negative-Male",19]
];
})
.error(function(data, status) {
$scope.hideProgress();
alert("Failed!!!!");
});
}
}
angular.module('charts.table', [
])
.directive('qnOptions', [
function() {
return {
require: '?ngModel',
link: function(scope, element, attr, controller) {
var settings = {
is3D: true
};
var getOptions = function() {
return angular.extend({ }, settings, scope.$eval(attr.qnOptions));
};
// creates instance of datatable and adds columns from settings
var getDataTable = function() {
var columns = scope.$eval(attr.qnTabcolumns);
var data = new google.visualization.DataTable();
angular.forEach(columns, function(column) {
data.addColumn(column.type, column.name);
});
return data;
};
var init = function() {
var options = getOptions();
if (controller) {
var drawChart = function() {
//var data = getDataTable();
// set model
// data.addRows(controller.$viewValue);
var data = new google.visualization.arrayToDataTable(controller.$viewValue);
/*var data = new google.visualization.arrayToDataTable([
['Move', 'Percentage'],
["Positive-Female",6],
["Positive-GenderNeutral",0],
["Positive-Male",17],
["Neutral-Female",6],
["Neutral-GenderNeutral",0],
["Neutral-Male",8],
["Negative-Female",3],
["Negative-GenderNeutral",0]
]); */
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.Table(element[0]);
chart.draw(data);
};
controller.$render = function() {
drawChart();
};
}
if (controller) {
// Force a render to override
controller.$render();
}
};
// Watch for changes to the directives options
scope.$watch(getOptions, init, true);
scope.$watch(getDataTable, init, true);
}
};
}
]);
I can get the table to update from when I toggle between static data but not with dynamic data.

Google Chart Api: doesn't load data

I'm using Google Charts API and i'm getting a issue which i cant understand. All code works well if i use the final alert("Im IN!"), but if i remove it my nArray is not filled. and i dont understand why.
This are global vars:
var Chart;
var data;
var nArray;
This is where i fill my nArray so i can load into my chart.
function setArray(PlayerName,LeadPoints,OppPoints,PropPoints){
var newPlayer = [PlayerName,LeadPoints,PropPoints,OppPoints,'Total'];
nArray.push(newPlayer);
}
This is where i go to CRM to bring data to and fill my array calling the setArray function.
function setPointsByEntity() {
SDK.REST.retrieveMultipleRecords(
"gamify_ponto",
"$select=gamify_Entidade,gamify_PlayerId,gamify_Pontos,gamify_gamify_utilizador_gamify_ponto/gamify_name&$orderby=gamify_PlayerId asc&$expand=gamify_gamify_utilizador_gamify_ponto",
function (results) {
if(results.length>0){
for(var i=0;i<results.length;i++){
(...) // do something
setArray(lastPlayer.Name,leadPoints,oppPoints,propPoints);
}
}
else {
alert("No Contact records are available to set as the primary contact for the account.");
}
},
errorHandler,
function () {
//OnComplete handler
}
);
This is where i load Visualization API, run google visualization, and define my drawVisualization function.
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Create and populate the data table.
data = google.visualization.arrayToDataTable(nArray);
setLabelTotal(data);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, 3, {
type: 'number',
calc: function (dt, row) {
// set offset to determine how far you want to move the labels
var offset = MaxArray(nArray) *0.03; // 3% do valor total.
return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + offset;
}
},
4]);
var options = {title:"Pontos por Jogador",
width:500, height:300,
hAxis: {
textStyle: {'color': 'white'}},
isStacked: true,
legend: {
position: 'top'
},
series: {
3: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
viewWindowMode:'explicit',
viewWindow: {
max:MaxArray(nArray) + MaxArray(nArray)*0.3,
min:0
}
},
animation:{
duration: 1000,
easing: 'linear'}
};
// Create and draw the visualization.
chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(view, options);
}
Finally when dom is ready i assign my nArray by invoking setPointsByEntity(). The problem here is if i comment the "alert("Im IN!");" Chart wont appear. It seems that the nArray is not define.
// whenever the dom is ready
$(document).ready(function()
{
setPointsByEntity(); // This function fill my nArray
alert("Im IN!");
});
This question it may have to do with another one that i've posted before, please follow this Question

Move the setPointsByEntity from the document ready handler to a callback from the google loader, and then call the drawVisualization function at the end of the success handler of the AJAX call:
google.setOnLoadCallback(setPointsByEntity);
function setPointsByEntity() {
SDK.REST.retrieveMultipleRecords(
"gamify_ponto",
"$select=gamify_Entidade,gamify_PlayerId,gamify_Pontos,gamify_gamify_utilizador_gamify_ponto/gamify_name&$orderby=gamify_PlayerId asc&$expand=gamify_gamify_utilizador_gamify_ponto",
function (results) {
if(results.length>0){
for(var i=0;i<results.length;i++){
(...) // do something
setArray(lastPlayer.Name,leadPoints,oppPoints,propPoints);
}
}
else {
alert("No Contact records are available to set as the primary contact for the account.");
}
drawVisualization();
},
errorHandler,
function () {
//OnComplete handler
}
);
}

how do you call function to pull data automaticall to chart in highcharts

I need to set up a interval on my data rerriveal and update my chart automatically. I tried the following but did not work. I am not getting any chart back. what am I doing wroing in the event: load function? Is this how it is done, any ideas greatly appreciated.
function server_cpu() {
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series;
setInterval(function() {
$.getJSON('db.php', function(data) {
series=data;
});
}, 1000);
}
},
zoomType: 'x'
},
exporting: {
enabled: true
});
}

events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
$.getJSON('db.php', function(data) {
series.setData(data);
});
}, 1000);
}
},
1st, series is an array, so you'll want series[0]. 2nd, you need to use setData to change the series data after the chart is drawn (http://api.highcharts.com/highcharts#Series.setData())
It's not clear from your code if you're already doing it, but you will need to set the original series : [{data:[...]}]