I am getting the above errors while trying to add a c3js/d3js graph. I am using d3 v5 for this project.
I also have bootstrap 3 linked to the html.
<head>
<title>Default</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
</head>
Strangely enough, if I remove the bootstrap.min.css line, the graph works, but obviously bootstrap doesn't work. Hence the conflict.
What can I do to make them work together? I know there are projects where they both work together, I just can't figure out how.
The following snippet demonstrates the issue:
var jsonObj = [{"ChildId":0,"Year":2019,"Quarter":1,"QuarterShort":"2019 Q1","Revenue":16.57,"Cost":8.69,"PnlPct":52.46,"Em":7.88,"EmPct":47.54,"Cost":7.2,"CostPct":43.45,"Technical":0.05,"TechnicalPct":0.31,"MiscCost":1.44,"MiscCostPct":8.69,"ParentId":0,"RandomId":0,"StartDate":"2019-06-24T00:00:00","WeekId":137,"IsPrev":1},{"ChildId":0,"Year":2019,"Quarter":2,"QuarterShort":"2019 Q2","Revenue":16.8,"Cost":9.39,"PnlPct":55.88,"Em":7.41,"EmPct":44.12,"Cost":7.84,"CostPct":46.67,"Technical":0.12,"TechnicalPct":0.71,"MiscCost":1.43,"MiscCostPct":8.49,"ParentId":0,"RandomId":0,"StartDate":"2019-07-01T00:00:00","WeekId":138,"IsPrev":0}]
$.each(jsonObj, function (key, fp) {
var curr = fp.StartDate.substr(0, 10);
fp.StartDate = curr;
jsonObj[key] = fp;
});
var finChart = c3.generate({
bindto: '#finpctgraphs',
padding: {
left: 50,
right: 50
},
data: {
json: jsonObj,
keys: {
x: 'StartDate',
value: ['PnlPct', 'CostPct', 'TechnicalPct', 'MiscCostPct']
},
labels: true
},
axis: {
x: {
//type: 'category'
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: false,
tick: {
format: '%d/%m',
culling: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
<div style='border-bottom: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;background-color:#ffffff;color:#000000;display:block;text-align:left;width: 1000px;font-family: Arial, Verdana, sans-serif; font-size: 12px;border-radius:5px;' class='' id='finpctgraphs'></div>
Working jsFiddle without bootstrap.css
Not working jsFiddle with boostrap.css
The Bootstrap CSS seems to conflict with the way C3.js calculates the dimensions of the container into which the chart is rendered. This can be solved by overriding the implicit height as determined by C3 with the configuration parameter size.height.
size: {
height: 320
}
Have a look at the updated working demo:
var jsonObj = [{"ChildId":0,"Year":2019,"Quarter":1,"QuarterShort":"2019 Q1","Revenue":16.57,"Cost":8.69,"PnlPct":52.46,"Em":7.88,"EmPct":47.54,"Cost":7.2,"CostPct":43.45,"Technical":0.05,"TechnicalPct":0.31,"MiscCost":1.44,"MiscCostPct":8.69,"ParentId":0,"RandomId":0,"StartDate":"2019-06-24T00:00:00","WeekId":137,"IsPrev":1},{"ChildId":0,"Year":2019,"Quarter":2,"QuarterShort":"2019 Q2","Revenue":16.8,"Cost":9.39,"PnlPct":55.88,"Em":7.41,"EmPct":44.12,"Cost":7.84,"CostPct":46.67,"Technical":0.12,"TechnicalPct":0.71,"MiscCost":1.43,"MiscCostPct":8.49,"ParentId":0,"RandomId":0,"StartDate":"2019-07-01T00:00:00","WeekId":138,"IsPrev":0}]
$.each(jsonObj, function (key, fp) {
var curr = fp.StartDate.substr(0, 10);
fp.StartDate = curr;
jsonObj[key] = fp;
});
var finChart = c3.generate({
bindto: '#finpctgraphs',
size: {
height: 480
},
padding: {
left: 50,
right: 50
},
data: {
json: jsonObj,
keys: {
x: 'StartDate',
value: ['PnlPct', 'CostPct', 'TechnicalPct', 'MiscCostPct']
},
labels: true
},
axis: {
x: {
//type: 'category'
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: false,
tick: {
format: '%d/%m',
culling: false
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.10.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" href="file:///../Test/Site.css" rel="stylesheet">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.5/c3.min.css" rel="stylesheet">
<div style='border-bottom: 1px solid #000000;border-top: 1px solid #000000;border-right: 1px solid #000000;border-left: 1px solid #000000;margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;background-color:#ffffff;color:#000000;display:block;text-align:left;width: 1000px;font-family: Arial, Verdana, sans-serif; font-size: 12px;border-radius:5px;' class='' id='finpctgraphs'></div>
Related
So I think my site is responsive so far. Inside my div tag with the id "navResult" I render partial views. The site is responsive to how much data is inside the element. But for some reason when I load a partial view with a chartJS chart the site doesn't respond to the parameters of the chart. Instead, a scroll bar is added like so, "https://ibb.co/ceRenw". I don't believe this has anything to do with MVC, but more with plain HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title MM-3</title>
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/unobtrusive")
#model IEnumerable<RoboticUI.Models.ResultantRead>
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.aspnetmvc.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="#Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="~/Scripts/AutocompleteScript.js"></script>
<script src="~/Scripts/chartJsTrial.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/MainRobotFrontier.css?version=1" />
</head>
<body style="font-family:Verdana;">
<div class="container">
<header>
<div class="headerContent">
<p>Robot Gallery</p>
</div>
</header>
<div class="menu-content" style="overflow:auto">
<div class="menu">
<p>#Ajax.ActionLink("Robot", "Robot", "Chart", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
<p>#Ajax.ActionLink("Data", "Data", "Home", new AjaxOptions() { UpdateTargetId = "navResult" })</p>
<p>#Ajax.ActionLink("Client", "Client", "Home", new AjaxOptions() { UpdateTargetId = "navResult"})</p>
</div>
<div id="navResult" class="main">
<h2>Lorum Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<footer>Copyright © MMM</footer>
</div>
#RenderBody()
</body>
</html>
external style sheet.
header, footer {
background-color: #68bbff;
height: 5%;
text-align: center;
}
div.headerContent p{
display:inline-block;
}
div.headerContent p.CompanySearchBar{
float:right;
}
div.container {
width: 100%;
height: 100%;
padding-left: 0px;
padding-right: 0px;
}
.menu {
float: left;
width: 5%;
text-align: center;
}
.menu-content {
padding-bottom: .2em;
}
.menu a {
border: 2px solid #4CAF50;
border-radius: 15px 100px;
text-align: center;
font-size: 12px;
display:block;
padding:20px;
}
.menu a:hover{
background-color:#4CAF50;
}
.main {
float: left;
width: 95%;
padding: 0 20px;
}
#media only screen and (max-width:620px) {
/* For mobile phones: */
.menu, .main, .right {
width: 100%;
}
}
Code to call the chart
console.log('test');
function getFun() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
animationEnabled: true,
title: {
text: "Simple Column Chart in ASP.NET MVC"
},
subtitles: [
{ text: "Try Resizing the Browser" }
],
data: [
{
type: "column", //change type to bar, line, area, pie, etc
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
//Uncomment below line to add data coming from the controller.
}
]
});
chart.render();
}
and the chart is called inside this partial view.
#{
}
<link rel="stylesheet" type="text/css" href="~/Content/Data.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">getFun();</script>
<div id="chartContainer">
</div>
I believe I fixed my problem by adding style="overflow: -webkit-paged-x;" to each div that holds a chart. But, is was that the right thing to do? Is there another approach. I don't want to have to add style="overflow: -webkit-paged-x;" every single time I create a chart.
How can I set the label of a paper-badge with JavaScript?
I have tried this but is does not work:
Polymer.dom(document.getElementById("id_of_tag")).label = "5";
A more complete code snippet is here:
<script type="text/javascript">
var socket = new WebSocket(((window.location.protocol === "https:") ? "wss://" : "ws://") + window.location.host + "/ws");
stompClient = Stomp.over(socket); stompClient.debug = null;
stompClient.connect({}, function(frame) {
stompClient.subscribe("/user/queue",
function(m, h) {
response = JSON.parse(m.body);
badge = Polymer.dom(document.getElementById("notificationsLabel"));
badge.label = "5";
} ,{ "id" : "${currentUserId}" }
);
}, function(e) {
console.log("openWebSocket error", e);
});
</script>
<!-- a lot more stuff -->
<paper-badge id="notificationsLabel" for="notifications" label="0"></paper-badge>
If you are trying to set it inside a Polymer element prefer
this.$.id.label
or if it's inside a dom-repeat or dom-if
this.$$('#id').label
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-badge/paper-badge.html">
<dom-module id="accessing-element">
<template>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div id="insideBadge" class="myDiv">badge inside element</div>
<paper-badge for="insideBadge" id="insideOwnDom" label="1"></paper-badge>
<div on-tap="_changeLabel">Click me to change all labels</div>
</template>
</dom-module>
<script>
Polymer({
is: 'accessing-element',
_changeLabel: function() {
this.$.insideOwnDom.label = 2;
var docLevel = document.getElementById('inSameDoc');
docLevel.label = 3;
var anotherElement = document.querySelector('another-element');
var ele = Polymer.dom(anotherElement.root);
var badge = ele.getEffectiveChildNodes()[3];
badge.label = 4;
// or
// anotherElement.label= 4;
}
})
</script>
<dom-module id="another-element">
<template>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div id="anotherELementsBadge" class="myDiv">badge inside another element</div>
<paper-badge id="anotherElementsDom" for="anotherELementsBadge" label="{{label}}"></paper-badge>
</template>
</dom-module>
<script>
Polymer({
is: 'another-element',
properties: {
label: {
type: Number,
value: 1
}
}
})
</script>
<html>
<head>
<meta charset="UTF-8">
<title>Change labels</title>
</head>
<body>
<style>
.myDiv {
width: 250px;
height: 40px;
border: 1px solid black;
margin-bottom: 30px;
}
</style>
<div style="height:100px;"></div>
<div id="docBadge" class="myDiv">badge at same doc level</div>
<paper-badge for="docBadge" id="inSameDoc" label="1"></paper-badge>
<another-element></another-element>
<accessing-element></accessing-element>
</body>
</html>
I am using Scrollable paper-tabs - Polymer. I have placed a NEXT button above the tabs and I want to change the position of the selected bar(bar which is displayed on bottom of the selected tab ) on next button's click. I am new to Ploymer. Any help will be appreciated.
https://www.polymer-project.org/0.5/components/paper-tabs/demo.html
in order to change the position of the selected bar you can change the paper-tabs's index selection. It's better to use tabs.selectIndex(); function than selectNext(); in order to make the change cyclic : meaning once you've reached the end, it will select the first element and so on, if you provide the right index.
Here's the javascript function to do that :
function clickAction(e) {
var t = e.target;
if (t.localName === 'paper-icon-button') {
if (!t.hasAttribute('disabled')) {
var tabs = document.querySelector('paper-tabs');
var index = tabs.selectedIndex;
index = index+1 == tabs.children.length ? 0 : index + 1;
tabs.selectIndex(index);
}
}
}
If you need a working sample, here's the one I've been working one (it's from Polymer's official documentation with a bit more) :
<!doctype html>
<html>
<head>
<title>paper-tabs</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="core-icons/core-icons.html">
<link rel="import" href="font-roboto/roboto.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="core-toolbar/core-toolbar.html">
<link rel="import" href="core-media-query/core-media-query.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
color: #333;
}
body.core-narrow {
padding: 8px;
}
paper-tabs, core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
core-toolbar paper-tabs {
box-shadow: none;
}
paper-tabs[noink][nobar] paper-tab.core-selected {
color: #ffff8d;
}
paper-tabs.transparent-teal {
background-color: transparent;
color: #00bcd4;
box-shadow: none;
}
paper-tabs.transparent-teal::shadow #selectionBar {
background-color: #00bcd4;
}
paper-tabs.transparent-teal paper-tab::shadow #ink {
color: #00bcd4;
}
h3 {
font-size: 16px;
font-weight: 400;
}
</style>
</head>
<body>
<div>
<paper-icon-button icon="arrow-forward" title="arrow-forward" onclick="clickAction(event)"></paper-icon-button>
</div>
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<script>
function clickAction(e) {
var t = e.target;
if (t.localName === 'paper-icon-button') {
if (!t.hasAttribute('disabled')) {
var tabs = document.querySelector('paper-tabs');
var index = tabs.selectedIndex;
index = index+1 == tabs.children.length ? 0 : index + 1;
tabs.selectIndex(index);
}
}
}
</script>
</body>
</html>
now that I got a progress bar, I need to know how to make the bar vanish after it's finished loading. If possible, I want it to vanish and then redirect to another website. Thanks for all of the help guys.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Initializing...</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Initializing...</div></div>
</body>
</html>
complete: function() {
this.hide();
window.location.href = "http://stackoverflow.com";
}
How would I add a progress bar to my website, that looks like the one on this website?
Progress Example
It looks like the Apple one!
<progress max="Maximum Value" value="Initial Value" />
See this for more details.
Note that this only works for browsers that support HTML5.
You can use jQuery instead. There in no restriction of HTML5. Also you can apply styles
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Progressbar - Custom Label</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
.progress-label {
float: left;
margin-left: 50%;
margin-top: 5px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">Loading...</div></div>
</body>
</html>
Source code available here http://jqueryui.com/progressbar/