I'm trying to declare through a JSON declaration the options for a markup-declared dijit.form.Select widget. Based on what i've read through in the API documentation, it appears that you could pass a new store using setStore() and then it should update, but that has not produced any useful results besides an empty Select widget with a full store. I am wondering if there's some declaration missing from my object, if i'm using the wrong methods, or if there are any other ways to declare these options.
The test markup I've been using is printed below:
<!DOCTYPE HTML>
<html dir="ltr">
<head>
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script>
dojo.require("dijit.form.Select");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
</head>
<body class=" claro ">
<div class="option" id="option" dojoType="dijit.form.Select"></div>
<script type="text/javascript">
dojo.addOnLoad(function() {
if (document.pub) {
document.pub();
}
var selectOptions = {
name:'selection',
identifier: 'label',
options: [{
label: 'this',
value: '01'
},
{
label: 'that',
value: '02'
},
{
label: 'the other',
value: '03'
},
{
label: 'banana',
value: '04',
},
]};
var aStore = dojo.data.ItemFileReadStore({data: selectOptions});
dijit.byId("option").setStore(aStore, 01);
dijit.byId("option").startup();
});
</script>
</body>
</html>
As #missingno mentioned, using a store for this is probably overkill. You can just use
dijit.form.select.addOption(/*array of options*/).
From your example it would be:
var listOfOptions = [{
label: 'this',
value: '01'
},
{
label: 'that',
value: '02'
},
{
label: 'the other',
value: '03'
},
{
label: 'banana',
value: '04',
},
];
dijit.byId("option").addOption(listOfOptions);
I think you are miss-initializing your store. The options look like the ones used to initialize the plain select instead. Try doing something like:
http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html
var store_options = {
identifier: 'label',
label: 'label',
items: [
{label: 'this', value:'01'},
//...
]
}
var store = dojo.data.ItemFileWriteStore({data: store_options})
OTOH, are you sure you need to use a store for this? Unless you want to use a particular store feature (like notification) you can just pass the data directly when you create a select programatically: http://dojotoolkit.org/reference-guide/dijit/form/Select.html
Related
i'm trying to use a chart on my webpage using Lightweight-charts-library but the chart won't show.
This is my HTMl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type = "module" src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<title>Socket Streams</title>
</head>
<body>
<h1>Trades</h1>
<div id ="chart"></div>
<div id ="trades"></div>
<script>
var binanceSockets = new WebSocket("wss://stream.binance.com:9443/ws/dogebtc#trade")
var tradeDiv = document.getElementById('trades');
binanceSockets.onmessage = function (event){
console.log(event.data);
var object = JSON.parse(event.data);
tradeDiv.append(object.p);
}
</script>
<script src="chart.js" type="module"></script>
</body>
</html>
My goal is to show a chart on the "chart" div, so I basically copy-pasted this code from the Lightweight-charts library making it to point to chart.
import { createChart } from 'lightweight-charts';
const chart = createChart(document.getElementById("chart"), { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
{ time: '2019-04-11', value: 80.01 },
{ time: '2019-04-12', value: 96.63 },
{ time: '2019-04-13', value: 76.64 },
{ time: '2019-04-14', value: 81.89 },
{ time: '2019-04-15', value: 74.43 },
{ time: '2019-04-16', value: 80.01 },
{ time: '2019-04-17', value: 96.63 },
{ time: '2019-04-18', value: 76.64 },
{ time: '2019-04-19', value: 81.89 },
{ time: '2019-04-20', value: 74.43 },
]);
if i remove type = module from <script src="chart.js"></script>i get Uncaught SyntaxError: Cannot use import statement outside a module.
The javascript's file name is charts.js
Im assuming you're not using webpack or any bundler.
For the module to be considered you'd need to import the library differently and as follow import 'https://unpkg.com/lightweight-charts#latest/dist/lightweight-charts.standalone.production.js'; in your chart.js script and then use it as advised in the doc.
make sure put https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js in your header, it has to be in the header, otherwise won't work.
I'm an beginner in js code and i want to use Highcharts to construct a treemap with color from a csv.
My csv looks like that :
Name,Value,colorValue
The first column is the name.
The second one is the percentage of activity.
The third one is a color attribute to say if the percentage (of the 2nd column) has been increase or decrease (Color red to green).
Do someone has an example ?
Because it doesn't work, nothing happen (no error too), i think it come from the csv load.
Here my actual code :
HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<pre id="data" style="display:none">Name,Value,colorValue
A,1,1
B,10,25
C,20,0
D,30,16
E,40,78
F,50,85
G,60,20
H,70,35
I,80,9
</pre>
<div id="container"></div>
<script src="Highcharts/code/highcharts.js"></script>
<script src="Highcharts/code/modules/heatmap.js"></script>
<script src="Highcharts/code/modules/treemap.js"></script>
<script src="Highcharts/code/modules/data.js"></script>
<script src="index.js"></script>
</body>
</html>
my Js :
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
}
}],
title: {
text: 'Highcharts Treemap'
}
});
The CSV data properties should not be inside a series object but chart object, like that:
Highcharts.chart('container', {
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[5]
},
data: {
csv: document.getElementById('data').innerHTML,
seriesMapping: [{
colorValue: 2
}]
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
keys: ['name', 'value', 'colorValue']
}],
title: {
text: 'Highcharts Treemap'
}
});
Demo:
https://jsfiddle.net/BlackLabel/L4uo8h13/1/
API reference:
https://api.highcharts.com/highcharts/data.csv
i am a new when it comes to jquery and javascript but I'm trying learn slowly.What my question is, if i have a json file that looks like
var data= [{"tasknumber":304030,
"date":"2012-05-05",
"operator":"john doe"},
{"tasknumber":23130,
"date":"2012-07-07",
"operator":"john doeeeeeeee"},
{"tasknumber":233330,
"date":"2012-08-08",
"operator":"john doe"}]
and i applied .countBy to it from the underscore library to get a array that looks like this
{"john doe":2,"john doeeeeeeee":1}
so for the next part im using a sample jquery graph outline which i found online
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "My First Chart in CanvasJS"
},
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
{ label: "apple", y: 10 },
{ label: "orange", y: 15 },
{ label: "banana", y: 25 },
{ label: "mango", y: 30 },
{ label: "grape", y: 28 }
]
}
]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
I tried a couple ways to call my new array within this part of the code
data: [
{
// Change type to "doughnut", "line", "splineArea", etc.
type: "column",
dataPoints: [
//insert here
]
}
]
but i only get blank screens and undefine when i try and open it.does anyone have any guidance for me on how to call my array within the datapoints?
my data is in a different file called task.json and i gotta call it using
var input=require('./task.json');
const _ = require(`underscore`);
var names=_.countBy(input,'operator');
Lets say, your JSON object is stored in some variable(eg: myObject).
var myObject = {"john doe":2,"john doeeeeeeee":1};
Declare a variable to store dataPoints from your JSON and push dataPoints into your array.
var dps = [];
for(var element in myObject) {
dps.push({label: element, y: myObject[element]});
}
Once you have done this, assign this variable (dps) to dataPoints of CanvasJS chart.
data: [
type: "column",
dataPoints: dps
]
You can see a working example in this fiddle.
I'm using VIS to build a graph, but there is a problem. If I create simple hierarchical graph: with 3 vertices and 3 edges one edge is not visible (It is hiding behind two others and vertex).
Using smoothCurves with diagonalCross type is part of solution - graph looks fine, but after moving vertices. Directly after page is loaded edge is not visible. Is it possible to fix it?
Heres my code:
<!doctype html>
<html>
<head>
<title>Network | Basic usage</title>
<script type="text/javascript" src="vis.js"></script>
<link rel="stylesheet" type="text/css" href="vis.css">
</head>
<body>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = [
{id: 1, label: 'Node 1', level:0},
{id: 2, label: 'Node 2', level:1},
{id: 4, label: 'Node 4', level:2}
];
// create an array with edges
var edges = [
{from: 1, to: 2},
{from: 1, to: 4},
{from: 2, to: 4}
];
// create a network
var container = document.getElementById('mynetwork');
var data= {
nodes: nodes,
edges: edges,
};
var options = {
width: '900px',
height: '900px',
edges:
{
style: 'arrow'
},
dragNetwork: true,
navigation: true,
keyboard: true,
<!-- dragNodes: false, -->
hierarchicalLayout: {enabled:true}
};
var network = new vis.Network(container, data, options);
var type = "diagonalCross";
network.setOptions({smoothCurves:{type:type}});
</script>
</body>
</html>
It is important to use hierarchical view for me.
I think the HTML styled comment inside javascript prevents browser to understand your code. Simply remove the comment and refresh your browser. Like this:
var options = {
width: '900px',
height: '900px',
edges: {
style: 'arrow'
},
dragNetwork: true,
navigation: true,
keyboard: true,
// <!-- dragNodes: false, -->
hierarchicalLayout: {enabled:true}
};
I'm using slickgrid library, I have a grid that I would like it to have the ability of selecting a row on click and then chenge it's background color to red.
I'm using the code below, the grid click event is working I can print in the console the id of each row clicked but I don't know how to change the selected row background.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="js/SlickGrid/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="js/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="css/exemple.css" type="text/css"/>
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:480px;height:187px;"></div>
</td>
</tr>
</table>
<script src="js/SlickGrid/lib/jquery-1.7.min.js"></script>
<script src="js/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="js/SlickGrid/slick.core.js"></script>
<script src="js/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="js/SlickGrid/slick.grid.js"></script>
<script>
var grid;
var columns = [
{id: "title", name: "Title", field: "title",selectable: true},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 5; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());
grid.onClick.subscribe(function (e) {
var cell = grid.getCellFromEvent(e);
console.log(cell.row);//Here is the row id, I want to change this row background color
grid.setSelectedRows(cell.row);
e.stopPropagation();
});
})
</script>
</body>
</html>
This is a link to a page if you want to test Sample Page
It looks like you're missing a css file. When I load your sample page and look at the console, this file is missing:
http://payclix.biz/MobiusTrac/slick-default-theme.css
This piece of css would color the row for you:
.slick-row.active .slick-cell {
background-color: #FFB;
}
or with jQuery:
$(".slick-row").click( function(){
$(this).css("background-color", "#FBB");
});
Active row has class "active" and you can add properties to the CSS for this class.