Using WebMatrix and razor (cshtml)
I have a chart, but the bars are default blue. I want to change their colour, based on their value ie a trigger value or target value.
How do I do this? I have a graph which uses the following code:
var db = Database.Open("data");
var itot = db.QueryValue("SELECT COALESCE(SUM(SUBTOTAL),0) from dbo.DR_TRANS where TRANSDATE = datediff(d,0,getdate()) and transtype = 1 and SUBTOTAL >0") ?? 0;
var ctot = db.QueryValue("SELECT COALESCE(SUM(SUBTOTAL),0) from dbo.DR_TRANS where TRANSDATE = datediff(d,0,getdate()) and TRANSTYPE = 1 and SUBTOTAL <0") ?? 0;
var itotnn = itot ?? 0;
var ctotnn = ctot ?? 0;
var nett = itotnn + ctotnn ?? 0;
var myChart = new Chart(width: 160, height: 500)
.AddTitle("Sales")
.AddSeries(
name: "Today",
xValue: new[] { "Actual", "Target" },
yValues: new[] { nett, 18200 })
.Write();`
Related
I need to show the list in the select box based on the another input.
On click on the SubCategory column, its showing the selected value in the dropdown. But its not showing in the table.
You can see the table in the below image. First image its not showing the data in the display, in the second image its showing the value selected
Anything missed. Any help please..
Attached the working code.
var comboEditor = function (cell, onRendered, success, cancel, editorParams) {
//Getting the other select value, based on the value this select need to show the list
let otherCellValue = cell.getData().ForumCourt;
cboData = []; //Store last values based on another cell value
var currentlyAdded = [];
var editor = document.createElement("select");
arrayOfValues2 = caselocationData.filter(function(r){return true;});
var filteredArrayOfValues = arrayOfValues2.filter(function(r){ return r[0]=== otherCellValue});
// addUniqueOptionsToDropdownList(select2_Sub, filteredArrayOfValues,1);
filteredArrayOfValues.forEach(function(r){
if(currentlyAdded.indexOf(r[0]) === -1) {
currentlyAdded.push(r[1]);
var item = {};
item.key = r;
item.name = r[1];
cboData.push(item);
}
});
for (var i = 0; i < cboData.length; i++) {
var opt = document.createElement('option');
opt.value = cboData[i].key;
opt.innerHTML = cboData[i].name;
editor.appendChild(opt);
}
editor.style.padding = "0px";
editor.style.width = "100%";
editor.style.boxSizing = "border-box";
editor.value = cell.getValue();
onRendered(function () {
editor.focus();
editor.style.css = "100%";
});
function successFunc() {
success(editor.value);
}
editor.addEventListener("change", successFunc);
editor.addEventListener("blur", successFunc);
return editor;
};
I am using amcharts4 plugin to plot a multi-lineseries graph.
But the plotted points do not locate at the right position (Blue dot at the edge of y-axe)
Here is the output chart that I get. (pls see the attached above)
Not sure what had done wrong with the following codes. Hope someone can help me out.
Thanks in advance!
var chart = am4core.create("chartdiv", am4charts.XYChart);
//Create axes
var categoryAxis = chart.xAxes.push(new
am4charts.CategoryAxis()); categoryAxis.dataFields.category = "date";
categoryAxis.title.text = "Month-Year";
categoryAxis.title.fontWeight = "bold";
/* Create value axis */
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Total Sales ($)";
valueAxis.title.fontWeight = "bold";
/* Add data */
var ds = new am4core.DataSource();
ds.url = window.location.origin+"/home/salesVolumnVersusPeriod"; //Sample of external JSON DATA = [{"date":"02-2020","FS":6288, 'IO':2342}]
ds.events.on("done", function(ev) {
chart.config = ev.data;
var u = ev.data; var data =
ev.target.data[0]; var datakey = Object.keys(data);
var text = '';
for (var i = 1; i < datakey.length; i++) {
addSeries(datakey[i], u);
text += datakey[i]+' : {'+datakey[i]+'}'+"\n";
}
$('#chartdiv').append('<div id="test">'+text+'</div>');
});
ds.load();
/* Create series */
function addSeries(b, data) {
// Create series
var series = new am4charts.LineSeries();
series.data = data;
series.dataFields.valueY = b;
series.dataFields.categoryX = "date";
series.name = b;
series.strokeWidth = 3;
series.tensionX = 0.7;
series.bullets.push(new am4charts.CircleBullet());
series = chart.series.push(series);
series.events.on("hidden", updateTooltipText);
series.events.on("shown", updateTooltipText);
}
function getToolstipItemValue(text) {
return `[bold]Date {categoryX}[/]
---- `+text;
}
/* Set up tooltip attachment to other series whenever series is hidden */
function updateTooltipText() {
var added = false;
tooltipText = $('#test').text();
chart.series.each(function(series)
{
if (series.visible && !added) {
series.tooltipText = getToolstipItemValue(tooltipText);
added = true;
}
else {
series.tooltipText = "";
}
});
}
/* Add legend */
chart.legend = new am4charts.Legend();
/* Create a cursor */
chart.cursor = new am4charts.XYCursor();
Finally knew what is wrong. It should use chart.data instead of chart.config.
Now the graph works. Hope this could help you too. Cheers!
chart.config = ev.data;
Here's what my chart displays:
Here's my Position tables:
My position table
cant really seem to figure out whats the problem.
-Ive got a button and a dropdown, when an item is selected from the dropdown and button is selected an orgchart must be displayed. The chart displays but the problems are:
-orgchart splitting into three charts
-And it keeps showing some Id's
-here's my code:
google.load("visualization", "1", { packages: ["orgchart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$("#btnGetOrganogram").on('click', function (e) {
debugger
$ddlDepOrgano = $('[id$="ddlDepOrgano"]').val();
if ($ddlDepOrgano != "") {
var jsonData = $.ajax({
type: "POST",
url: '/services/eleaveService.asmx/GetChartData',
data: "{'depid':'" + $ddlDepOrgano + "'}",
contentType: 'application/json; charset=utf-8',
dataType: "json",
success: OnSuccess_getOrgData,
error: OnErrorCall_getOrgData
});
function OnSuccess_getOrgData(repo) {
var data = new google.visualization.DataTable(jsonData);
data.addColumn('string', 'Name');
data.addColumn('string', 'Manager');
data.addColumn('string', 'ToolTip');
var response = repo.d;
for (var i = 0; i < response.length; i++) {
var row = new Array();
var Pos_Name = response[i].Pos_Name;
var Pos_Level = response[i].Pos_Level;
var Emp_Name = response[i].Emp_Name;
var Pos_ID = response[i].Pos_ID;
var Emp_ID = response[i].Emp_ID;
data.addRows([[{
v: Emp_ID,
f: Pos_Name
}, Pos_Level, Emp_Name]]);
}
var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
chart.draw(data,{ allowHtml: true });
}
function OnErrorCall_getOrgData() {
console.log("something went wrong ");
}
} else {
bootbox.alert("Invalid Department Name please try again.");
}
e.preventDefault();
});
}
according to the data format, Column 1 should be the ID of the manager, which is used to build the tree...
Column 1 - [optional] The ID of the parent node. This should be the unformatted value from column 0 of another row. Leave unspecified for a root node.
looking at the data table image posted, this should be in column --> Mngr_ID
as such, recommend the following changes when loading the data...
for (var i = 0; i < response.length; i++) {
var row = new Array();
var Pos_Name = response[i].Pos_Name;
var Emp_Name = response[i].Emp_Name;
var Emp_ID = response[i].Emp_ID;
var Mngr_ID = response[i].Mngr_ID;
data.addRow([
{
v: Emp_ID,
f: Pos_Name
},
Mngr_ID,
Emp_Name
]);
}
I'm creating a game in AS3.
I've got a toolbar with a string for money, one for happiness and one for tourists.
The happiness is coded like that :
var happyString:String = "0";
var happyNumber = Number(happyString);
bonheur.text = String(happyString);
trace(happyString);
I'd like the "happy" value depends on two variables (invisibles for the player).
A variable "confort" and a variable "distraction".
And the "happy" value would be = ("confort"+"distraction")/2
I don't really know how to do it though...
I did that :
var confortString:String = "0";
var confortNumber = Number(confortString);
var distractionString:String = "0";
var distractionNumber = Number(distractionString);
stageRef.addEventListener("PiscineBuilt", piscineVariables, false, 0, true);
private function piscineVariables(event):void{
confortNumber = Number(confortString) +3;
trace(confortNumber);
distractionNumber = Number(distractionString) +20;
trace(distractionNumber);
}
First, I don't think the "confort" and "distraction" values are added each time the function is called...
Second, How I can do in order to have the value "happy" (which is visible for the player in the toolbar) equal to ("confort"+"distraction")/2
var happyString:String = distractionNumber + confortNumber ;
var happyNumber = Number(happyString);
bonheur.text = String(happyString);
trace(happyString);
??
Thank you for your help !
EDIT
So, here I am now :
var confort:Number = 0;
var distraction:Number = 0;
var happy:Number = 0;
happy=(confort+distraction)/2;
bonheur.text=String(happy);
stageRef.addEventListener("PiscineBuilt", piscineVariables, false, 0, true);
private function piscineVariables(event):void{
confort+=10;
distraction+=30;
trace(confort);
trace(distraction);
}
GOOD:
Forgot to change the value of my bonheur.text :
bonheur.text = String( Number(bonheur.text ) +(confort+distraction)/2 );
Why do you store strings and make numbers dependant on them? You just do:
var confort:Number = 0;
var distraction:Number = 0;
var happy:Number = 0;
And whenever your numbers are updated, you should also update the text in bonheur:
happy=(confort+distraction)/2; // making an average is as simple as this, if you're not using strings!!!
bonheur.text=String(happy);
I have a database look like this
I'm trying to get the NamaHalaman by doing some sql Query
function getPageByMdl(modul) {
var sql = "SELECT * FROM Halaman WHERE ModulLayanan = '"+modul+"' ORDER BY Urutan ASC";
var results = [];
var sqlResultSet = db.execute(sql);
while (sqlResultSet.isValidRow()) {
results.push({
namahalaman : sqlResultSet.fieldByName('NamaHalaman')
});
sqlResultSet.next();
}
sqlResultSet.close();
return results;
}
However the result length always give me 0 although as you can see it has 2 value in it. Another problem also happen when i try to run
var sql = "SELECT Distinct ModulLayanan FROM Halaman Order ASC";
it only returned the first value from the database which is Whistleblowing system.
Oh here's my function on showing the result
function loadDetailModule() {
data = getPageByMdl(modulTemp);
if (data.length > 0) {
var tableData = [];
//get through each item
for (var i = 0; i < data.length; i++) {
var detailmodul = data[i];
//create table row
var row = Titanium.UI.createTableViewRow({
dataIndex : i,
_title : detailmodul.namahalaman,
hasChild : true,
className : 'detailmodul_halaman',
filter : detailmodul.namahalaman,
height : 70,
backgroundColor : '#fff',
});
//title label for row at index i
var titleLabel = Titanium.UI.createLabel({
text : detailmodul.namahalaman,
font : {
fontSize : 14,
fontWeight : ' bold'
},
left : 70,
top : 10,
height : 50,
width : 210,
color : '#232',
dataIndex : i
});
row.add(titleLabel);
//add our little icon to the left of the row
var iconImage = Titanium.UI.createImageView({
image : 'img/eggcooking.png',
width : 50,
height : 50,
left : 10,
top : 10
});
row.add(iconImage);
//add the row to data array
tableData.push(row);
}
// set the data to tableview's data
detailModuleTable.data = tableData;
detailModuleTable.show();
} else {
detailModuleTable.hide();
}
}
Thank you in advance
the problem is because the Titanium does not refresh your Database when you run your application.
What you need is:
1. uninstall your application in emulator
or
2. you can change the database name
Titanium.Database.install('SLTemp.sqlite', 'SLTemp1');
var db = Ti.Database.open('SLTemp1');
to
Titanium.Database.install('SLTemp.sqlite', 'SLTemp');
var db = Ti.Database.open('SLTemp');