When I use the following code nothing shows up on my screen. Not sure if I'm missing something or using the wrong version of JQUERY. I'm using the latest version of JChartFX and I am trying to conficure the 3d Chart
<!DOCTYPE HTML>
<html lang="en-US"> <!--<![endif]-->
<head>
<title>Graph Example </title>
<style type="text/css">
#targetchart
{
width: 500px;
height: 375px;
padding: 4px;
border: 1px solid #dddddd;
background: #eeeeee
}
#targetchart h3 {
text-align: center;
margin: 0;
}
</style>
<link href="jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/confirm.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="js/jchartfx.system.js"></script>
<script type="text/javascript" src="js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="js/jchartfx.coreVector3d.js"></script>
<script type="text/javascript">
var chart1;$(document).ready(function ($) {
var items = [
{ "Sales": 2200, "Month": "Jan" },
{ "Sales": 1500, "Month": "Feb" },
{ "Sales": 2100, "Month": "Mar" },
{ "Sales": 2600, "Month": "Apr" },
{ "Sales": 3200, "Month": "May" },
{ "Sales": 3600, "Month": "Jun" },
];
$("div", "ChartDiv1").chart({
gallery: cfx.Gallery.Bar,
view3D: {
enabled: true,
rotated: true,
angleX: 30,
angleY: -20,
boxThickness: 10,
depth: 160,
shadow: cfx.Shadow.fixed
},
dataValues:items,
titles: [{
text: "Configuring 3D Charts"
}]
});
});
</script>
</head>
<body>
<div id="ChartDiv1" style="width:500px;height:375px;display:inline-block"></div>
</body>
</html>
I've also tried this one and it won't work. It seems that jchartfx doesn't work on later versions of jQuery ver. 1.9.1.
These are used instead (in the samples):
<script type="text/javascript" src="http://www.jchartfx.com/libs/jQuery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/jQuery/jquery-ui-1.8.18.custom.min.js"></script>
Source: http://community.jchartfx.com/forums/p/113/281.aspx
Related
Hello, I have a little task in vue js and have a little problem, I need If statement which makes ul border color green if price < 140. I need help, thank you.I tried some ways but didn't work.
See the code below:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
ul{
border:2px solid black;
width:450px;
}
#app{
display: flex;
justify-content: center;
}
#card{
margin-left:5px;
}
</style>
<body>
<div id = "app" >
<div id ="card" v-for="post in posts" >
<ul>
<img :src="post.img" :value="post.id">
<li>{{post.title}}</li>
<li>{{post.price}}</li>
<li>{{post.date}}</li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
var card = new Vue({
el: '#app',
data: {
posts: [
{ id: 1, title: 'Cat', price: 145, date: "1 year ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' },
{ id: 2, title: 'Cat2', price: 80, date: "2 years ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' },
{ id: 3, title: 'Cat3', price: 180, date: "3 years ago", img: 'https://www.pngonly.com/wp-content/uploads/2017/06/Cat-Clipart-PNG-Image.png' }
],
baseStyles: {
borderColor:'green',
},
}
})
Solved
You can achieve it with the ternary operator
<ul :style="{ 'border-color': post.price < 140 ? 'green' : '' }">
<img :src="post.img" :value="post.id">
<li>{{post.title}}</li>
<li>{{post.price}}</li>
<li>{{post.date}}</li>
</ul>
I need to copy the svg map come from other website.
Here is the website for example where i'm going to copy the svg map:
https://www.alexa.com/siteinfo/google.com
Here is the xpath location from the website:
//*[#id="visitsMap"]
What I need?
I'd like to copy the result/post of that xpath into my page.
Something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("svg").clone().appendTo("body");
});
$svgTemplate = new SimpleXMLElement($svg_data);
$svgTemplate->registerXPathNamespace('svg', 'https://www.alexa.com/siteinfo/google.com');
$style = $svgTemplate->xpath('//*[#id="visitsMap"]');
printf("Original style:\n%s\n\n", (string)$style[0]);
});
</script>
</head>
<body>
<svg></svg>
</body>
Thanks
uSING AMCHARTS..
<style>
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<!-- Chart code -->
<script>
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"projection": "mercator",
"dataProvider": {
"map": "worldLow",
"areas": [
{ "id": "US" } //BY CHANGING THIS<--
]
},
"areasSettings": {
"autoZoom": true,
"selectedColor": "#CC0000"
},
} );
</script>
<!-- HTML -->
<div id="chartdiv"></div>
To View a Demo: http://webbatlas.com/google.com
I am trying to make ammap for district level. First, one has to select state and then district. Upto state, it is fine. But, how to achieve the district level map?
I have svg for the district in india. I tried but couldn't make it.
SVG here
JSFIDDLE:
var map = AmCharts.makeChart( "chartdiv", {
"type": "map",
"theme": "light",
"projection": "miller",
"dataProvider": {
"map": "indiaLow",
"getAreasFromMap": true
},
"areasSettings": {
"autoZoom": true,
"selectedColor": "#CC0000"
},
"smallMap": {},
"export": {
"enabled": false,
"position": "bottom-right"
}
} );
#chartdiv {
width: 100%;
height: 500px;
}
<script src="https://www.amcharts.com/lib/3/ammap.js"></script>
<script src="https://www.amcharts.com/lib/3/maps/js/indiaLow.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<div id="chartdiv"></div>
This is my default html file for web app project. I get error:
JavaScript runtime error: '$' is undefined
I presume that there is a problem with jquery. This is my first time dealing with html and java script, all advice appritiated.
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery-jvectormap-2.0.3.min.js" type="text/javascript"></script>
<script src="jquery-jvectormap-world-mill.js" type="text/javascript"></script>
</head>
<body>
<div id="world-map" style="width: 600px; height: 400px"></div>
<script>
$(function () {
$('#world-map-markers').vectorMap({
map: 'world_mill',
scaleColors: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial',
hoverOpacity: 0.7,
hoverColor: false,
markerStyle: {
initial: {
fill: '#F8E23B',
stroke: '#383f47'
}
},
backgroundColor: '#383f47',
markers: [
{ latLng: [41.90, 12.45], name: 'Vatican City' },
{ latLng: [43.73, 7.41], name: 'Monaco' },
{ latLng: [-0.52, 166.93], name: 'Nauru' }
]
});
});
</script>
</body>
</html>
Thanks in advance.
I have a working EON chart that is not displaying on initial page load resulting in a blank page. If I switch to another browser tab, and then straight back to the graph tab, the graph then shows.
Here is the HTML / JavaScript and the CSS.
Your help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<link rel="stylesheet" type="text/css" href="poolstyle.css">
<head>
</head>
<body>
<script type="text/javascript">
var pubnub = PUBNUB.init ({publish_key: 'xxx',
subscribe_key: 'xxx',
error: function (error) {console.log('Error:', error)}});
var GraphChannel = "xxx";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
</body>
</html>
Here is the CSS:
.outer {
margin: 0 auto;
width:1500px;
}
.inner{
display: table;
float: left;
width: 30%;
}
Couple things going on here:
move your library references to inside the <head> tags
but the real issue: your EON code is referencing #charttemp but it is not rendered yet because the that <div> is below the EON script and that is why it requires a tab lose focus/gain focus to render first time. So just move your <div>'s above your EON script.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
<!-- <link rel="stylesheet" type="text/css" href="poolstyle.css"> -->
</head>
<body>
<div class="outer">
<div id="charttemp" class="inner"> </div>
<div id="charthumidity" class="inner"> </div>
<div id="chartlight" class="inner"> </div>
</div>
<script type="text/javascript">
var pubnub = PUBNUB.init ({
publish_key: 'pubkey', subscribe_key: 'subkey',
error: function (error) {console.log('Error: ', error)}});
var GraphChannel = "a";
var h = true;
charttemp = eon.chart({
pubnub: pubnub,
channel: GraphChannel,
limit: 1440,
history: h,
flow: true,
generate: {
bindto: "#charttemp",
data: { colors : {}, type: "spline"},
transition: {duration: 250},
axis: { x: {label: "Time", show: false}},
grid: { x: {show: false}, y: {show: true}},
},
transform: function (m)
{
return {eon: { 'Temperature' : m.tN}}
}
});
</script>
</br>
</body>
</html>