I have a simple paper-input that I'm trying to get the value from but for some reason I'm not having any luck. Here's a simplified version of the HTML where I set up the button and the onclick event:
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover >Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
and here's my JS function:
function getAnnotation(){
var toolText = document.getElementById('annotationSource').value;
console.log(toolText);
}
Here's a plunker with most of it running (except I can't get the value of the paper-input to show in the console: http://plnkr.co/edit/1PAi13ISgP7mNXDMNStF?p=preview
I'm sure could make this a polymer template, but I need to pass the value to a bunch of other functions in the main HTML and I keep having problems with moving data in and out of a template so I'd like to avoid that if I can.
Adding some more flow to make it clearer*
To bring up the annotation box you need to click on any of the points on the graph in the plunker - doing so brings up the paper-input box, which I want to use to create an annotation... eventually adding the annotation text to a tooltip that will appear by doing a mouse over on the dot that I generate
With a template using 'auto-binding' it's easier to access the annotationSource element
var chart = c3.generate({
bindto: '#graph',
padding: {
top: 30
},
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 1, 3, 4, 5, 7, 10],
['x2', 3, 5, 7, 10, 12],
['data1', 2, 3, 6, 7.5, 8, 9.5],
['data2', 2, 4, 4.5, 10, 11]
],
onclick: function(d, i) {
console.log("onclick", d, i);
console.log(i.getAttribute('cx'));
var setCX = Number(i.getAttribute('cx'));
document.getElementById("someTemplate").$.addAnnotation.toggle()
var svg = d3.select("svg");
var circle = svg.append("circle")
.attr("cy", 10)
.attr("cx", (setCX + 40))
.attr("r", 5);
}
}
});
function getAnnotation() {
var annotationSource = document.getElementById("someTemplate").$.annotationSource;
var toolText = annotationSource.value;
console.log(toolText);
}
<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">
<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>
<template id="someTemplate" is="auto-binding">
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover>Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
</template>
<div id="graph">
</div>
ok without using a template I've used the window.event to obtain the paper button element that is being clicked, then from there grabbed the annotation-box element then used querySelector to get the annotationSource element. There maybe a better way but it works
var chart = c3.generate({
bindto: '#graph',
padding: {
top: 30
},
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 1, 3, 4, 5, 7, 10],
['x2', 3, 5, 7, 10, 12],
['data1', 2, 3, 6, 7.5, 8, 9.5],
['data2', 2, 4, 4.5, 10, 11]
],
onclick: function(d, i) {
console.log("onclick", d, i);
console.log(i.getAttribute('cx'));
var setCX = Number(i.getAttribute('cx'));
document.querySelector('#addAnnotation').toggle()
var svg = d3.select("svg");
var circle = svg.append("circle")
.attr("cy", 10)
.attr("cx", (setCX + 40))
.attr("r", 5);
}
}
});
function getAnnotation() {
var paperBtnElement = window.event.toElement || window.event.relatedTarget || window.event.target;
var toolText = paperBtnElement.parentElement.querySelector("#annotationSource").value;
console.log(toolText);
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 12px;
padding: 8px;
font: 10px sans-serif;
background: #ddd;
border: solid 1px #aaa;
border-radius: 8px;
pointer-events: none;
}
<script src="https://www.polymer-project.org/webcomponents.min.js?20141211"></script>
<link href="https://www.polymer-project.org/components/paper-dialog/paper-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-dialog/paper-action-dialog.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-input/paper-input.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-button/paper-button.html" rel="import">
<link href="https://www.polymer-project.org/components/paper-fab/paper-fab.html" rel="import">
<link rel="import" href="https://www.polymer-project.org/components/paper-input/paper-autogrow-textarea.html">
<link href="http://c3js.org/css/c3-b03125fa.css" media="screen" rel="stylesheet" type="text/css" />
<script src="http://c3js.org/js/d3.min-3bff8220.js" type="text/javascript"></script>
<script src="http://c3js.org/js/c3.min-78d63552.js" type="text/javascript"></script>
<paper-action-dialog id="addAnnotation" transition="paper-dialog-transition-center">
<core-header-panel flex id="annotation-box">
<core-toolbar class="graph-sets-header">
<span flex>TEST</span>
</core-toolbar>
<br>
<paper-input-decorator label="Add your annotation">
<paper-autogrow-textarea>
<textarea id="annotationSource"></textarea>
</paper-autogrow-textarea>
</paper-input-decorator>
<paper-button dismissive hover>Cancel</paper-button>
<paper-button affirmative hover onclick="getAnnotation()">Submit</paper-button>
</core-header-panel>
</paper-action-dialog>
<div id="graph">
</div>
Related
Post edited with more infos. I have a .asp page that gives me 3 variables. I have no problem working with them. I tried to add a donut chart to show the result using AMCHART charts code. I added the code into my .asp page. The problem is how to add those variables inside the JS code. When I type the variable values directly in the code, the charts are displayed correclty. But I need to add the variable because each customer has its own values...
Code:
<!DOCTYPE html>
<html>
<head>
<title>pie-chart test | amCharts</title>
<meta name="description" content="chart created using amCharts live editor" />
<!-- amCharts custom font -->
<link href='https://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css'>
<!-- amCharts javascript sources -->
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/chalk.js"></script>
<!-- amCharts javascript code -->
<script type="text/javascript">
VAR TOTAL_IPCA;
<!-- HERE IS THE PROBLEM !!! -->
DATA1 = [
{
"TITULOS": "INFLAÇÃO",
"VALORES": <% = Result_1%>
},
{
"TITULOS": "PRÉ-FIXADO",
"VALORES": <% = Result_2%>
},
{
"TITULOS": "SELIC",
"VALORES": <% = Result_3%>
}
]
AmCharts.makeChart("chartdiv",
{
"type": "pie",
"balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"depth3D": 10,
"gradientType": "linear",
"innerRadius": 20,
"baseColor": "#FF8000",
"outlineThickness": 2,
"startEffect": "easeOutSine",
"titleField": "TITULOS",
"valueField": "VALORES",
"fontFamily": "ARIAL",
"fontSize": 15,
"handDrawScatter": 1,
"handDrawThickness": 2,
"theme": "chalk",
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": DATA1
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width: 100%; height: 300; background-color: #282828;" ></div>
</body>
</html>
Here I am integrating gmap in my laravel project and want to show locations with some info on gmap but map is not working as expected. there is an issue in showing the map and map is also not displayed. here I am attaching image how exactly it looks.
also I will show code and relate js
js
$(document).ready(function() {
'use strict';
/**
* Checkbox & radio inputs
*/
$('input[type=checkbox], input[type=radio]').ezMark();
/**
* Map Leaflet Contact
*/
if ($('#map-contact').length) {
var map = L.map('map-contact', {
zoom: 12,
maxZoom: 20,
center: [40.761077, -73.88]
});
map.scrollWheelZoom.disable();
var access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + access_token, {
scrollWheelZoom: false,
id: 'mapbox.streets',
attribution: 'Terms & Feedback'
}).addTo(map);
var icon = L.divIcon({
html: '<i class="fa fa-suitcase"></i>',
iconSize: [36, 36],
iconAnchor: [36, 36],
popupAnchor: [-20, -42]
});
var marker = L.marker([40.761077, -73.88], {
icon: icon
}).addTo(map);
}
/**
* Map Leaflet
*/
if ($('#map-leaflet').length) {
var map = L.map('map-leaflet', {
zoom: 12,
maxZoom: 20,
center: [40.761077, -73.88]
});
var access_token = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';
var marker_cluster = L.markerClusterGroup();
map.scrollWheelZoom.disable();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + access_token, {
scrollWheelZoom: false,
id: 'mapbox.streets',
attribution: 'Terms & Feedback'
}).addTo(map);
$.ajax('assets/data/markers.json', {
success: function(markers) {
$.each(markers, function(index, value) {
var icon = L.divIcon({
html: value.icon,
iconSize: [36, 36],
iconAnchor: [36, 36],
popupAnchor: [-20, -42]
});
var marker = L.marker(value.center, {
icon: icon
}).addTo(map);
marker.bindPopup(
'<div class="listing-window-image-wrapper">' +
'<a href="properties-detail-standard.html">' +
'<div class="listing-window-image" style="background-image: url(' + value.image + ');"></div>' +
'<div class="listing-window-content">' +
'<div class="info">' +
'<h2>' + value.title + '</h2>' +
'<h3>' + value.price + '</h3>' +
'</div>' +
'</div>' +
'</a>' +
'</div>'
);
marker_cluster.addLayer(marker);
});
map.addLayer(marker_cluster);
}
});
}
/**
* Google Map
*/
if ($('#map-google').length) {
$.ajax('assets/data/markers.json', {
"dataType" : "json",
success: function(values) {
var markers = [];
var infos = [];
$.each(values, function(index, value) {
var content = '<div id="' + value.id + '" class="map-popup-content-wrapper"><div class="map-popup-content"><div class="listing-window-image-wrapper">' +
'<a href="properties-detail-standard.html">' +
'<div class="listing-window-image" style="background-image: url(' + value.image + ');"></div>' +
'<div class="listing-window-content">' +
'<div class="info">' +
'<h2>' + value.title + '</h2>' +
'<h3>' + value.price + '</h3>' +
'</div>' +
'</div>' +
'</a>' +
'</div></div><i class="fa fa-close close"></i></div>' +
'<div class="map-marker">' + value.icon + '</div>';
markers.push({
latLng: value.center,
data: value.id,
options: {
content: content,
offset: {
x: -18,
y: -42
}
}
});
});
$('#map-google').gmap3({
map: {
options:{
styles: [{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]},{"featureType":"road.highway","elementType":"all","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","elementType":"all","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]}],
center:[40.761077, -73.88],
scrollwheel: false,
zoom: 12
}
},
marker: {
cluster: {
radius: 100,
}
},
overlay: {
values: markers,
events: {
click: function(marker, event, context) {
$('.map-popup-content-wrapper').css('display', 'none');
if ($(event[0].target).hasClass('close')) {
$('#' + context.data).css('display', 'none');
} else {
$('#' + context.data).css('display', 'block');
}
}
}
}
});
}
});
}
/**
* Properties Carousel
*/
$('.listing-carousel').owlCarousel({
items: 4,
margin: 30,
nav: true,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
responsive: {
0: {
items: 1
},
540: {
items: 2
},
766: {
items: 2
},
990: {
items: 3
},
1200: {
items: 4
}
}
});
/**
* Cover carousel
*/
$('.cover-carousel').owlCarousel({
items: 1,
nav: true,
navText: ['<img src="assets/img/lnr-chevron-left.svg" alt="">', '<img src="assets/img/lnr-chevron-right.svg" alt="">']
});
/**
* Image gallery
*/
$('.gallery').owlCarousel({
autoplay: 3000,
items: 1,
nav: true,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>']
});
/**
* Customizer
*/
$('.customizer-title').on('click', function() {
$('.customizer').toggleClass('open');
});
$('.customizer a').click('click', function(e) {
e.preventDefault();
var cssFile = $(this).attr('href');
$('#css-primary').attr('href', cssFile);
});
/**
* Charts
*/
if ($('.ct-chart-1').length) {
var data = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
]
};
var options = {
seriesBarDistance: 15
};
var responsiveOptions = [
['screen and (min-width: 641px) and (max-width: 1024px)', {
seriesBarDistance: 10,
axisX: {
labelInterpolationFnc: function (value) {
return value;
}
}
}],
['screen and (max-width: 640px)', {
seriesBarDistance: 5,
axisX: {
labelInterpolationFnc: function (value) {
return value[0];
}
}
}]
];
new Chartist.Bar('.ct-chart-1', data, options, responsiveOptions);
}
/**
* Charts
*/
if ($('.ct-chart-2').length) {
new Chartist.Line('.ct-chart-2', {
labels: [1, 2, 3, 4, 5, 6, 7, 8],
series: [
[1, 2, 3, 1, -2, 0, 1, 0],
[-2, -1, -2, -1, -2.5, -1, -2, -1],
[0, 0, 0, 1, 2, 2.5, 2, 1],
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
]
}, {
high: 3,
low: -3,
showArea: true,
showLine: false,
showPoint: false,
fullWidth: true,
axisX: {
showLabel: false,
showGrid: false
}
});
}
/**
* Charts
*/
if ($('.ct-chart-3').length) {
new Chartist.Bar('.ct-chart-3', {
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: [
[5, 4, 3, 7, 5, 10, 3],
[3, 2, 9, 5, 4, 6, 4]
]
}, {
seriesBarDistance: 10,
reverseData: true,
horizontalBars: true,
axisY: {
offset: 70
}
});
}
/**
* Charts
*/
if ($('.ct-chart-4').length) {
var times = function(n) {
return Array.apply(null, new Array(n));
};
var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
data.labels.push(index + 1);
data.series.forEach(function(series) {
series.push(Math.random() * 100)
});
return data;
}, {
labels: [],
series: times(4).map(function() { return new Array() })
});
var options = {
showLine: false,
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 13 === 0 ? 'W' + value : null;
}
}
};
var responsiveOptions = [
['screen and (min-width: 640px)', {
axisX: {
labelInterpolationFnc: function(value, index) {
return index % 4 === 0 ? 'W' + value : null;
}
}
}]
];
new Chartist.Line('.ct-chart-4', data, options, responsiveOptions);
}
});
and this is a view file properties.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link href="https:://fonts.googleapis.com/css?family=Raleway::300,400,500,600,300,700&subset=latin,latin-ext" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/fonts/font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/libraries/owl-carousel/owl.carousel.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/libraries/chartist/chartist.min.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.markercluster.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/leaflet.markercluster.default.css')}}" rel="stylesheet" type="text/css">
<link href="{{ URL::asset('assets/css/villareal-blue.css')}}" rel="stylesheet" type="text/css" id="css-primary">
<link href="{{ URL::asset('assets/css/overwrite-home.css')}}" rel="stylesheet" type="text/css" id="css-primary">
<link rel="shortcut icon" type="image/x-icon" href="{{ URL::asset('assets/favicon.png') }}">
<title>Houzeo - Properties Map</title>
</head>
<body class="">
<div class="page-wrapper">
<div class="header-wrapper">
<div class="header header-small">
<div class="header-inner">
<div class="container-fluid">
<div class="header-top">
<div class="header-top-inner">
<span class="header-logo-text"><a class="header-logo" href="index.html"> <img src="{{ URL::asset('assets/hou-imgs/houzeologo.png')}}" alt="HOUZEO LOGO"> </a></span>
<!-- /.header-logo -->
<a class="header-action" href="properties-submit.html">
<i class="fa fa-upload"></i> <span>Upload Property</span>
</a><!-- /.header-action -->
</button> -->
</div><!-- /.header-top-inner -->
</div><!-- /.header-top -->
</div><!-- /.container-fluid -->
</div><!-- /.header-inner -->
</div><!-- /.header -->
</div><!-- /.header-wrapper-->
<div class="main-wrapper">
<div class="main">
<div class="main-inner">
<div class="content">
<div class="container-fluid fullwidth-wrapper map-and-property-holder">
<div class="row">
<div class="col-lg-4 col-md-6 mapProperty-holder">
#foreach($list as $item)
<div class="row">
<div class="col-sm-12">
<div class="listingbox">
<div class="listing-box-image" style="background-image:url('assets/img/tmp/tmp-5.jpg')">
<span class="listing-box-image-links listing-box-over">
<i class="fa fa-eye"></i> <span>View Property Dashboard</span>
<i class="fa fa-list"></i> <span>View Listing</span>
</span>
</div><!-- /.listing-box-image -->
<div class="listing-box-title">
<h2>Bright Island Route</h2>
<h3>$ 40.000</h3>
</div><!-- /.listing-box-title -->
<div class="listing-box-content">
<dl>
<dt>Type</dt><dd>House</dd>
<dt>Location</dt><dd>New York</dd>
<dt>Area</dt><dd>180 sqft</dd>
</dl>
</div><!-- /.listing-box-cotntent -->
</div><!-- /.listing-box -->
</div><!-- /.col-* -->
</div>
#endforeach
</div><!-- /.col-* -->
<div class="col-lg-8 col-md-6 map-holder">
<div id="map-leaflet" class="full"></div>
<!--Please insert your map here.-->
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.content -->
</div><!-- /.main-inner -->
</div><!-- /.main -->
</div><!-- /.main-wrapper -->
</div><!-- /.page-wrapper -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASlnVdH_6j-XibxbQoeV82oZQImV1a_Vs"
type="text/javascript"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/jquery.ezmark.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/tether.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/gmap3.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/leaflet.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/leaflet.markercluster.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/libraries/owl-carousel/owl.carousel.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/libraries/chartist/chartist.min.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/scrollPosStyler.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('assets/js/villareal.js')}}"></script>
</body>
</html>
I'm trying to get a decent understanding of rickshaw so I've been trying to add functionality to one of the simpler examples, but the range slider just isn't working. I've been looking at the code for this example to try to get it to work, but even though my code looks the same it just isn't working. Part of my problem is that I'm not sure what all the minified files contain, so I'm not sure when I need to include individual .js files for which functionality. As I'm sure you've noticed the documentation doesn't cover this,
so if any of you have any insight for me it would be greatly appreciated.
A note about the below code, I'm using jinja2 templates, thus the url_for functions
vvv This is the rendered code for the pertinent section of html vvv
<div id="preview" class="ui-slider ui-slider-horizontal ui-widget ui-widget content ui-corner-all">
<div class="ui-slider-range ui-widget-header" style="left: 0%; width: 100%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a>
</div>
-------------------------------------------------
<!doctype>
<head>
<link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/graph.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/detail.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/legend.css')}}">
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='src/css/lines.css')}}">
<script src="{{ url_for('static', filename='vendor/d3.min.js')}}"></script>
<script src="{{ url_for('static', filename='vendor/d3.layout.min.js')}}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<script src="{{ url_for('static', filename='rickshaw.js')}}"></script>
<script src="{{ url_for('static', filename='extensions.js')}}"></script>
<script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.js')}}"></script>
<script src="{{ url_for('static', filename='src/js/Rickshaw.Graph.RangeSlider.Preview.js')}}"></script>
</head>
<body>
<div id="chart_container">
<div id="chart"></div>
<div id="legend_container">
<div id="smoother" title="Smoothing"></div>
<div id="legend"></div>
</div>
<div id="slider"></div>
</div>
<script>
// set up our data series with 50 random data points
var seriesData = [ [], [], [] ];
var random = new Rickshaw.Fixtures.RandomData(150);
for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}
// instantiate our graph!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 960,
height: 500,
renderer: 'line',
stroke:true,
preserve:true,
series: [
{
color: "#c05020",
data: seriesData[0],
name: 'New York'
}, {
color: "#30c020",
data: seriesData[1],
name: 'London'
}, {
color: "#6060c0",
data: seriesData[2],
name: 'Tokyo'
}
]
} );
graph.render();
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: document.getElementById('slider'),
});
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph
} );
var legend = new Rickshaw.Graph.Legend( {
graph: graph,
element: document.getElementById('legend')
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: graph,
legend: legend
} );
var order = new Rickshaw.Graph.Behavior.Series.Order( {
graph: graph,
legend: legend
} );
var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
graph: graph,
legend: legend
} );
</script>
Using the demo here: http://code.shutterstock.com/rickshaw/ and the standalone example: http://code.shutterstock.com/rickshaw/examples/extensions.html it only needs the id of the div to initialize.
I would advise removing the following from your head:
<link type="text/css" rel="stylesheet" source="http://jqueryui.com/slider/">
And using:
<link type="text/css" rel="stylesheet" source="http://code.jquery.com/ui/1.8.0/themes/smoothness/jquery-ui.csss">
I don't think this will cause an issue but it also does not improve anything.
I also see they use:
<script>
jQuery.noConflict();
</script>
They execute this before the jQuery UI is included. I see no issue with:
var slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: document.getElementById('slider'),
});
If it were me, I would suggests:
// set up our data series with 50 random data points
var seriesData = [
[],
[],
[]
];
var random = new Rickshaw.Fixtures.RandomData(150);
var graph, slider, hoverDetail, legend, shelving, order, highlight;
for (var i = 0; i < 150; i++) {
random.addData(seriesData);
}
// instantiate our graph!
graph = new Rickshaw.Graph({
element: document.getElementById("chart"),
width: 960,
height: 500,
renderer: 'line',
stroke: true,
preserve: true,
series: [{
color: "#c05020",
data: seriesData[0],
name: 'New York'
}, {
color: "#30c020",
data: seriesData[1],
name: 'London'
}, {
color: "#6060c0",
data: seriesData[2],
name: 'Tokyo'
}]
});
graph.render();
slider = new Rickshaw.Graph.RangeSlider({
graph: graph,
element: $("#slider")[0]
});
hoverDetail = new Rickshaw.Graph.HoverDetail({
graph: graph
});
legend = new Rickshaw.Graph.Legend({
graph: graph,
element: $("#legend")[0]
});
shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
order = new Rickshaw.Graph.Behavior.Series.Order({
graph: graph,
legend: legend
});
highlight = new Rickshaw.Graph.Behavior.Series.Highlight({
graph: graph,
legend: legend
});
Example: https://jsfiddle.net/Twisty/qoofL8kb/4/
After fiddling with it I realized the problem was the way I was trying to link to the jQuery-ui css file. Instead I downloaded the files I needed and added them to the project, linking them that way.
I am currently in a berlin start up hustleing to get our website up and running and I get by with HTML AND CSS but a big noob when it comes down to Jquery. Anyway I came across Chart.js and would love to visualize our company success by means of a polar area chart. Yet I want to remove the legend and the grey grid/lines in the background.
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
I dont know how to get the options going to get rid off the background grids/numbers. Does anyone know the command to remove the grids in the background?
Would appreciate your help and probs name my 2nd born after you :)
Love from Berlin,
A
You can simple toggle the display of legend and also the scale, on Graph.js you can pass a options element.
options: {
legend: {
display: false
},
scale: {
display: false
}
}
Check the updated snippet below:
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
},
options: {
legend: {
display: false
},
scale: {
display: false
}
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
Maybe you just forgot the "
const CHART = document.getElementById("lineChart");
console.log(CHART);
let lineChart = new Chart(CHART,{
type:'polarArea',
data:{
labels: ["Car", "Plane", "Train", "Cycle", "Walk", "Ship", "Spaceship"],
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
"#FFCE56",
"#E7E9ED",
"#36A2EB"
],
label: 'My dataset' // for legend
}],
labels: [
"Car",
"Ship",
"Plane",
"Spaceship",
"Cycle"
]
}
});
body,html {
margin: 0;
}
.chart{
width: 600px;
height: 600px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="testo.css"/>
<title></title>
</head>
<body>
<h1>Test</h1>
<div class="chart">
<canvas id="lineChart" width="600" height="600"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>
<script type="text/javascript" src=script.js></script>
</body>
</html>
I'm using Kendo UI's bar chart for some data-visualizations.
I'm trying to set a max value for the y axis, does anyone know how I could implement this?
Currently, the values appear to be generated based on the value in my graph, but my data needs to have a max and min value of 15.
Here is what is being generated.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/bar-charts/column">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<style>
#dd {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
</style>
<div id="example">
<div class="demo-section k-content">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "What should I call this graph"
},
legend: {
position: "top"
},
seriesDefaults: {
type: "column"
},
series: [{
name: "XX",
data: [13.907]
}, {
name: "XX",
data: [-4.743]
}, {
name: "XX",
data: [-7.210]
},{
name: "XX",
data: [9.988]
}],
valueAxis: {
labels: {
format: "#.#"
},
line: {
visible: false
},
axisCrossingValue: 0
},
categoryAxis: {
categories: [2013],
line: {
visible: false
},
labels: {
padding: {top: 165}
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
Just add the "max: 15, min:-15" to your valueAxis. here is your example with the limits
http://trykendoui.telerik.com/EgOs
And to answer my own question...
I added modified the following code:
valueAxis: {
min: -15, // added this line
max: 15, // added this line
labels: {
format: "#.#"
},
line: {
visible: false
},
axisCrossingValue: 0
},
valueAxis: {
max: MaxValue,
}
//MaxValue is variable which contain your maximum value