I have a map processed with VueJS and I have problems with events connectorClick.
In the example below when clicking on the connector line the alert does not work.
Vue.use(VueFusionCharts, FusionCharts);
let grphMap = new Vue ({
el: '#app-vue',
data: {
type: "maps/romania",
width: "800",
height: "600",
dataFormat: "json",
dataSource: {
'chart': {
"theme": "fusion",
"nullEntityColor": "#E5E5E9",
"entityFillHoverColor": "#99ccff",
"showLabels": '1',
"showEntityHoverEffect": "1",
"showtooltip": "1",
"connectorColor": "#0CB2B0",
"connectorHoverColor": "#000000",
"connectorthickness": "3",
"markerfontsize": "18",
"markerfontcolor": "#0a0a0a",
"numbersuffix": "%",
"entityFillColor": "#ff0000",
"markerBgColor": "#FF0000",
"markerRadius": "12",
},
"colorrange": {
"gradient": "0",
},
"data": [
{
id: '10',
color: "#74CCEB",
}
],
"markers": {
"shapes": [
{
"id": "myCustomShape",
"type": "circle",
"fillcolor": "#f8bd19",
"showborder": "0"
}
],
"items": [
{
shapeid: "myCustomShape",
id: "10",
x: "295.5",
y: "283.5",
},
{
shapeid: "myCustomShape",
id: "11",
x: "323.9",
y: "226.6",
}
],
"connectors": [
{
"from": "10",
"to": "11",
"showtooltip": "1",
"color": "#F4191F",
"tooltext": "<b>Shipping Details:</b>{br}Daily shipment: $label Units{br}Average shipping cost: $1.2"
}
]
}
},
events: {
"connectorClick": function() {
alert("Test alert!");
}
}
}
});
<script type="text/javascript" src="https://unpkg.com/vue#2.3.3"></script>
<script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/dist/vue-fusioncharts.min.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.romania.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<div id="app-vue">
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataFormat="dataFormat"
:dataSource="dataSource"
></fusioncharts>
</div>
https://jsfiddle.net/Hexman/5e61pu3r/25
I found a functional example but it is not in VueJs
http://jsfiddle.net/fusioncharts/t226vxnp/
Do not give me the saddle where my mistake is?
Seems like you forgot to bind the events object in your fusioncharts template which you've defined in the data of your component. Please refer to the following code for your template:
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataFormat="dataFormat"
:dataSource="dataSource"
:events="events" // Bind your events object
></fusioncharts>
Related
I am using highchart to create network-graph. i need to change tooltip value. but its not working.
please check my code
var json = [{
"key": "1",
"value": "19122",
"code": "A"
}, {
"key": "19122",
"value": "623753",
"code": "B"
}, {
"key": "19122",
"value": "582024",
"code": "C"
}],
data = [];
json.forEach(function(point) {
data.push([point.key, point.value])
});
Highcharts.chart('container', {
tooltip: {
formatter: function() {
return data.code;
}
},
series: [{
type: 'networkgraph',
layoutAlgorithm: {
enableSimulation: true
},
dataLabels: {
enabled: true,
linkFormat: ''
},
data
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>
when i mouse over the network grape node, i need to show code value. how i do it.
Try this:
var json = [{
"key": "1",
"value": "19122",
"code": "A"
}, {
"key": "19122",
"value": "623753",
"code": "B"
}, {
"key": "19122",
"value": "582024",
"code": "C"
}],
data = [];
json.forEach(function(point) {
data.push([point.key, point.value])
});
Highcharts.chart('container', {
tooltip: {
formatter: function() {
const codes = json.reduce((acc, cur)=>{
if(cur.key===this.key||cur.value===this.key) acc.push(cur.code);
return acc;}, []);
return codes.join(',');
}
},
series: [{
type: 'networkgraph',
layoutAlgorithm: {
enableSimulation: true
},
dataLabels: {
enabled: true,
linkFormat: ''
},
data
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<div id="container"></div>
For a project of mine I have to use jsgrid (http://js-grid.com).
To test if how to use jsgrid I wanted to do the "getting started" example (http://js-grid.com/getting-started.
My problem, in my opinion I did everything like the example said but it didn't work in the end.
What am I missing?
Here's my code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script>
var clients = [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
];
var countries = [
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
];
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
</script>
</head>
<body>
<div id="jsGrid"></div>
</body>
</html>
Your script code runs before the DOM is ready. I wrapped your script in between:
$(document).ready(function() {
and:
});
and it ran fine with the table shown. For some explanation, see here.
jsGrid is a fantastic tool. Unfortunately, it has near zero diagnostics. Something can be wrong, like a simple typo, but there is no indication at all of what is wrong.
I want use jsgrid.min.js to create table in vue component.I should call this in jsgrid.min.jsfunction
jsGrid(..)
how can i do this?(call a function that placed outer the vue component in component )
component.vue
<template>
<div id="jsGrid">
</div>
</template>
<script>
export default {
data: () => ({
name: "mja"
}),
mounted () {
$("#jsGrid").jsGrid({
width: "100%",
height: "500px"
});
}
}
</script>
<style scoped>
</style>
error
[Vue warn]: Error in mounted hook: "TypeError: $(...).jsGrid is not a function"
I actually embedded src file
<script type="text/javascript" src="{{ asset('plugins/jsgrid/dist/jsgrid.min.js')}}"></script>
You Need To Include Jquery as jsGrid using Jquery , Here is Working Demo :)
var app = new Vue({
el: '#app',
mounted:function(){
jQuery("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: this.clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Age", type: "number", width: 50 },
{ name: "Address", type: "text", width: 200 },
{ name: "Country", type: "select", items: this.countries, valueField: "Id", textField: "Name" },
{ name: "Married", type: "checkbox", title: "Is Married", sorting: false },
{ type: "control" }
]
});
},
data: {
message: 'Hello Vue App!',
clients : [
{ "Name": "Otto Clay", "Age": 25, "Country": 1, "Address": "Ap #897-1459 Quam Avenue", "Married": false },
{ "Name": "Connor Johnston", "Age": 45, "Country": 2, "Address": "Ap #370-4647 Dis Av.", "Married": true },
{ "Name": "Lacey Hess", "Age": 29, "Country": 3, "Address": "Ap #365-8835 Integer St.", "Married": false },
{ "Name": "Timothy Henson", "Age": 56, "Country": 1, "Address": "911-5143 Luctus Ave", "Married": true },
{ "Name": "Ramona Benton", "Age": 32, "Country": 3, "Address": "Ap #614-689 Vehicula Street", "Married": false }
],
countries :[
{ Name: "", Id: 0 },
{ Name: "United States", Id: 1 },
{ Name: "Canada", Id: 2 },
{ Name: "United Kingdom", Id: 3 }
],
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
{{ message }}
<div id="jsGrid"></div>
</div>
i have javascript function i need to show data in page(body).i need to show value in chart as well as in the header text. how to show PHvalue in the body part in separate div. shared my code in fiddle
https://jsfiddle.net/sahxyx0n/
#section scripts{
<script>
FusionCharts.ready(function () {
LoadChart();
});
function LoadChart() {
$.ajax({
url: '#Url.Action("get", "pond")',//remote api address
type: 'GET',
crossDomain: true,
success: function (data) {
if (data.success) {
var PHValue = data.sensorsdata.PH;
var phfusioncharts = new FusionCharts({
type: 'angulargauge',
renderAt: 'ph-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "PH Value ",
"lowerLimit": "0",
"upperLimit": "14",
"showValue": "1",
"valueBelowPivot": "1",
"theme": "fint"
},
"colorRange": {
"color": [{
"minValue": "0",
"maxValue": "5",
"code": "#e44a00"
}, {
"minValue": "5",
"maxValue": "10",
"code": "#f8bd19"
}, {
"minValue": "10",
"maxValue": "14",
"code": "#6baa01"
}]
},
"dials": {
"dial": [{
"value": PHValue
}]
}
}
});
}
}
});
}
</script>
}
In your function
.......
if (data.success) {
var PHValue = data.sensorsdata.PH;
$('#phValue').text(PHValue);
.....
.....
in your html page add this, where you want to display PHValue,
<div id="phValue"></div>
Is this all you want?
function doInit(){
//alert("Inside doInit() method");
let time = new Date();
let timePlaceHolder = document.getElementById("timePlaceHolder");
timePlaceHolder.innerHTML = "Current Time is: "+time;
}
window.addEventListener("load",doInit,false);
<!DOCTYPE html>
<html>
<head>
<title>Display JS Time</title>
<script type="text/javascript" src="only_one_time.js"></script>
</head>
<body>
<div id="timePlaceHolder"></div>
</body>
</html>
Is it possible in igGrid Infragistics control insert
carriage return / line feed
inside the text of a cell?
For example given the next datasource:
var ds = [
{ "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
{ "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10 },
{ "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10 }
];
you can see between the words Adjustable and Race the chars "\r\n", but it doesn't work... I tried:
"\r", "\r\n", "\line", "<br />", "
"
in every test I see on screen the chars and not the new line... maybe there is a setting I don't know...
If you need a complete test example:
<!doctype html>
<html>
<head>
<!-- Infragistics Combined CSS -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="Scripts/jqueryUI/css/humanity/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
<link href="./Scripts/InfragisticsNetAdvantage2012.1/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
<link href="./Scripts/InfragisticsNetAdvantage2012.1/css/structure/infragistics.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./Scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./Scripts/jquery.hotkeys-0.8.js"></script>
<script type="text/javascript" src="./Scripts/jqueryUI/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="./Scripts/jquery.ba-outside-events.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.loader.js"></script>
<script src="./Scripts/InfragisticsNetAdvantage2012.1/Scripts/jquery.tmpl.js" type="text/javascript"></script>
<script src="./Scripts/InfragisticsNetAdvantage2012.1/Common/jQuery/Common/js/infragistics.js" type="text/javascript"></script>
<script type="text/javascript">
var ds = [
{ "Id": 1, "Name": "Adjustable \\r\\n Race", "ProductNumber": "AR-5381", "soldi" : 10.10 },
{ "Id": 2, "Name": "Bearing Ball", "ProductNumber": "BA-8327", "soldi" : 20.10 },
{ "Id": 3, "Name": "BB Ball Bearing", "ProductNumber": "BE-2349", "soldi" : 30.10 },
{ "Id": 4, "Name": "Headset Ball Bearings", "ProductNumber": "BE-2908", "soldi" : 40.10 },
{ "Id": 316, "Name": "Blade", "ProductNumber": "BL-2036", "soldi" : 50.10 },
{ "Id": 317, "Name": "LL Crankarm", "ProductNumber": "CA-5965", "soldi" : 60.10 },
{ "Id": 318, "Name": "ML Crankarm", "ProductNumber": "CA-6738", "soldi" : 70.10 },
{ "Id": 319, "Name": "HL Crankarm", "ProductNumber": "CA-7457", "soldi" : 80.10 },
{ "Id": 320, "Name": "Chainring Bolts", "ProductNumber": "CB-2903", "soldi" : 10.10 }
];
$(function () {
$("#gridUpdating").igGrid({
primaryKey: "Id",
renderCheckboxes: true,
columns: [
{ headerText: "Make Flag", key: "MakeFlag", dataType: "bool", readOnly: false, width: "200"},
{ headerText: "Product ID", key: "Id", dataType: "number", width: "200" },
{ headerText: "Product Name", key: "Name", dataType: "string", width: "200" },
{ headerText: "Product Number", key: "ProductNumber", dataType: "string" , width: "200" },
{ headerText: "soldi", key: "soldi", dataType: "number" , width: "200", format: "##.##,##" }
],
dataSourceType: "json",
dataSource: ds,
headerRendered: function(evt, ui) {
console.log($($('#gridUpdating').igGrid("headersTable")).html());
},
rowsRendered: function(evt, ui) {
$.each(ui.owner.element.find("tr td:nth-child(5)"), function() {
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
if(rowId){
$(this).html((parseFloat($(this).html(),10).toFixed(2)).toString().replace(".",","));
}
});
$.each(ui.owner.element.find("tr td:nth-child(1)"), function() {
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
if(rowId){
$(this).html("<input type='checkbox' name='chk' id='chk_" + rowId + "' />");
}
});
$(ui.owner.element.find("tr td:nth-child(1)")).bind('click', function(){
var row = $(this).closest('tr')
rowId = $(row).attr("data-id");
})
},
features: [
{
name: "Updating",
enableAddRow: true,
editMode: "none",
enableDeleteRow: false,
rowDeleting: function (e, args)
{
alert(1);
},
rowDeleted: function (e, args){
alert(2);
},
columnSettings: [
{ columnKey: "MakeFlag", editorOptions: { type: "bool", readOnly: false, disabled: false} },
{ columnKey: "Id", editorOptions: { type: "numeric", readOnly: true, disabled: true} },
{ columnKey: "Name", editorOptions: { type: "bool", readOnly: true, disabled: true} },
{ columnKey: "ProductNumber", editorOptions: { type: "bool", readOnly: true, disabled: true} }
]
}]
});
});
function bind(){
$("#gridUpdating").igGrid("option", "dataSource", ds);
$("#gridUpdating").igGrid("dataBind");
}
</script>
</head>
<body>
<table id="gridUpdating"></table>
<input type="button" value="BIND" onclick="bind();" />
</body>
</html>
I found after a while that my problem was in the proxy service which I use to consume my server code, it html-encoded every special character, for example for "< b r / >" I was receiving "& l t ; b r / & g t ;", so I had only to replace it with "< b r / >" before binding...