I need to convert default position of two charts in chartjs from absolute to relative. From inspect elements of the browser I saw that it could be changed. Then I tried to change the position of the div to relative as follows but it didn't changed the position of the chart.
<div class="col-xs-6 col-sm-6 d-flex flex-column" style="background-color: ghostwhite;">
<div id="barChartContainer1" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
<div id="barChartContainer2" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
<div id="barChartContainer3" style="height: 100%; width: 100%; padding: 10px; display: block; position: relative;"></div>
</div>
three charts overlaps on each other. I tried by changing java script as follows but it didn't do the work I expected.
var chart1 = new CanvasJS.Chart("barChartContainer2", {
animationEnabled: true,
position: "relative",
height: 600,
})
Can anyone help me with this?
You can try implementing Flexbox design in CSS3:
#container{
display: flex;
flex-direction: row;
}
<!DOCTYPE html>
<html>
<body>
<div id="container">
<div style="height: 100%; width: 100%; padding: 10px; background-color: red;"></div>
<div style="height: 100%; width: 100%; padding: 10px; background-color: blue;"></div>
<div style="height: 100%; width: 100%; padding: 10px; background-color: green;"></div>
</div>
</body>
</html>
If that does not work, this will for sure:
var chart = new CanvasJS.Chart("chart1",
{
animationEnabled: true,
title: {
text: "Chart 1"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(255,12,32,.3)",
dataPoints: [
{ x: 1, y: 10 },
{ x: 2, y: 30 },
]
},
]
});
chart.render();
var chart = new CanvasJS.Chart("chart2",
{
animationEnabled: true,
title: {
text: "Chart 2"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(32,255,12,.3)",
dataPoints: [
{ x: 1, y: 10 },
{ x: 2, y: 20 },
]
},
]
});
chart.render();
var chart = new CanvasJS.Chart("chart3",
{
animationEnabled: true,
title: {
text: "Chart 3"
},
axisX: {
interval: 10,
},
data: [
{
type: "splineArea",
color: "rgba(12,32,255,.3)",
dataPoints: [
{ x: 1, y: 30 },
{ x: 2, y: 1 },
]
},
]
});
chart.render();
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chart1" style="height: 100%; width: 30%; display: inline-block;"> </div>
<div id="chart2" style="height: 100%; width: 30%; display: inline-block;"></div>
<div id="chart3" style="height: 100%; width: 30%; display: inline-block;">
</div>
Related
Using gridstack, I can resize my widgets. However, when dragging on the widgets' handles, the widget's size will snap to specific sizes. This seems like a fixed amount. If I wanted to set the widget's size to one in between the specific sizes I am unable to do that since it snaps to that specific size.
Is there any way to change the scaling on this so the snapping can happen at smaller intervals?
Sorry, I'm quite new and I've been playing around using a demo I found on codepen, https://codepen.io/AKay/pen/GZXEJx, but am unable to figure out how to do so.
HTML:
<body>
<section class="darklue" id="demo">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Tile drop</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2 grid-container sidebar-scroll">
<div class="sidebar grid-stack-1"></div>
</div>
<div class="col-lg-10 grid-container">
<div class="grid-stack grid-stack-4"></div>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
background: #2c3e50;
color: #fff;
}
.sidebar {
/* background: lightblue; */
height: 100%;
}
.grid-stack {
/* background: #66a3ff; */
}
.sidebar-scroll {
overflow-y: scroll;
}
.grid-container {
padding-top: 15px;
padding-bottom: 15px;
height: 542px;
background: grey;
}
.sidebar .grid-stack-item {
text-align: center;
line-height: 100px;
z-index: 10;
cursor: grab;
display: inline-block;
}
.grid-stack-item-content {
background: white;
color: #2c3e50;
font-family: 'Indie Flower';
text-align: center;
font-size: 20px;
}
.grid-stack .grid-stack-item[data-gs-width="4"] {
width: 100%
}
.grid-stack .grid-stack-item[data-gs-width="3"] {
width: 75%
}
.grid-stack .grid-stack-item[data-gs-width="2"] {
width: 50%
}
.grid-stack .grid-stack-item[data-gs-width="1"] {
width: 25%
}
.grid-stack .grid-stack-item[data-gs-x="3"] {
left: 75%
}
.grid-stack .grid-stack-item[data-gs-x="2"] {
left: 50%
}
.grid-stack .grid-stack-item[data-gs-x="1"] {
left: 25%
}
.sidebar .grid-stack-item[data-gs-width="1"] {
width: 100%
}
JS:
$(function() {
var options = {
float: true,
width: 4,
height: 4,
animate: true,
always_show_resize_handle: true,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
acceptWidgets: '.grid-stack-item'
};
$('.grid-stack').gridstack(_.defaults(options));
var items = [{
x: 0,
y: 0,
width: 1,
height: 1
}, {
x: 1,
y: 0,
width: 1,
height: 1
}, {
x: 2,
y: 0,
width: 1,
height: 1
}, {
x: 0,
y: 1,
width: 1,
height: 1
}, {
x: 3,
y: 1,
width: 1,
height: 1
}, {
x: 1,
y: 2,
width: 1,
height: 1
}];
$('.grid-stack').each(function() {
var grid = $(this).data('gridstack');
_.each(items, function(node) {
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
});
var sidebar_options = {
float: true,
width: 1,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
};
$('.sidebar').gridstack(_.defaults(sidebar_options));
var droppables = [{
x: 0,
y: 0,
width: 1,
height: 1
}];
$('.sidebar').each(function() {
var sidebar = $(this).data('gridstack');
_.each(droppables, function(node) {
sidebar.addWidget($('<div><div class="grid-stack-item-content">I\'m new</div></div>'),
node.x, node.y, node.width, node.height);
}, this);
});
});
Maybe this is a silly question but I am unable to include a chart for each point on a map.
I am collecting the data from a JSON, this data I print it in the popup, each one with its class .scoreA, .scoreB... I would like from this data to create a chart for each point like the one I have. I would prefer to take them from the content of the popup (.scoreA, .scoreB) rather than from the JSON in case the structure changes. is it possible?
var mymap = L.map('mapid').setView([39.46975, -0.37739], 8 );
L.tileLayer('https://api.mapbox.com/styles/v1/jamaldols/cktwljkom0vzo18l9ggtnky83/tiles/256/{z}/{x}/{y}#2x?access_token={accessToken}', {
attribution: 'Map data © OpenStreetMap contributors, Imagery © Mapbox',
maxZoom: 12,
minZoom: 8,
id: 'mapbox/standard',
tileSize: 512,
zoomOffset: -1,
// maxNativeZoom: 16,
accessToken: ''
}).addTo(mymap);
$.getJSON('data.geo.json', function (geojson) {
L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
},
onEachFeature: function (feature, layer) {
const coordinates = feature.geometry.coordinates;
const normalizedCoordinates = feature.geometry.coordinates.sort(function(a,b){return a.typeid-b.typeid});
console.log( `Coordinates: ${coordinates}`);
console.log( `Coordinates N: ${normalizedCoordinates}`);
const content =
`
<p id="heading">${feature.properties.name}</p>
<p class="scoreA"><strong>ScoreA: </strong>${feature.properties.scoreA}</p>
<p class="scoreB"><strong>ScoreB: </strong>${feature.properties.scoreB}</p>
<p class="scoreC"><strong>ScoreC: </strong>${feature.properties.scoreC}</p>
<p class="scoreD"><strong>ScoreD: </strong>${feature.properties.scoreD}</p>
<div class="popup__chart">chart</div>
`;
layer.on('click', function (e) {
document.getElementById("popup__content").innerHTML = content;
$(".popup").fadeOut(10);
$(".popup").fadeIn("slow");
console.log( `Click on ${feature.properties.name}`);
const maxZoom = mymap.getMaxZoom();
console.log(maxZoom)
mymap.flyTo(this.getLatLng(), maxZoom, {easeLinearity: 0.12, duration:1});
});
}
}).addTo(mymap);
});
//Chart
var marksCanvas = document.getElementById("marksChart");
var marksData = {
labels: ["Score A", "Score B", "Score C", "Score D"],
datasets: [{
label: "City",
backgroundColor: "rgba(200,0,0,1)",
data: [65, 60, 90, 80]
},]
};
var radarChart = new Chart(marksCanvas, {
type: 'radar',
data: marksData
});
$(document).ready(function(){
$(".popup__bar__close").click(function(){
$('.popup').css('display', 'none');
mymap.flyTo([39.46975, -0.37739], 8, {easeLinearity: 0.12, duration:1});
});
});
html,
body {
height: 100%;
font-family: 'Montserrat', sans-serif;
}
.popup-fixed {
position: fixed;
top: auto;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
margin: 0;
border-radius: 0;
}
.leaflet-popup-tip-container {
display: none;
}
.leaflet-popup-content-wrapper {
border-radius: 0;
}
.popup {
width: 300px;
padding-bottom: 50px;
background: white;
position: absolute;
top: 50px;
right: 50px;
border: none;
display:none;
z-index: 1000;
}
#heading {
font-size: 35px;
color:black;
text-transform: uppercase;
margin: 15px 0;
}
#main {
display: flex;
overflow: hidden;
}
.popup {
}
.popup__bar {
width: 100%;
height: 50px;
position: relative;
display: flex;
align-items: center;
background: black;
}
.popup__bar__close {
background-image: url(img/close.svg);
background-size: 30px;
background-repeat: no-repeat;
background-position: center;
position: absolute;
height: 30px;
width: 30px;
right: 15px;
transform: rotate(45deg);
cursor: pointer;
}
.popup__chart {
}
.popup__chart img{
max-width: 100%;
height: auto;
}
#popup__content {
padding: 0 30px;
}
#info {
}
#footer {
font-family: 'Roboto Condensed', sans-serif;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
letter-spacing: 6px;
height: 70px;
position: absolute;
background: white;
bottom: 0;
width: calc(100% - 90px);
right: 0;
}
#marksChart {
display: block;
box-sizing: border-box;
height: 250px;
width: 250px;
position: absolute;
top: 100px;
left: 90px;
background: white;
z-index: 200000;
border-radius: 12px;
padding: 20px;
}
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<style>
#mapid {
height: calc(100vh - 70px);
width: calc(100vw - 90px);
}
body {
padding: 0;
margin: 0;
}
</style>
<main id="main">
<div id="mapid"></div>
</main>
<div class="chart-container" style="max-width: 200px;">
<canvas id="marksChart" width="200" height="400"></canvas>
</div>
<script>
</script>
<div class="popup">
<div class="popup__bar">
<div class="popup__bar__close"></div>
</div>
<div id="popup__content"></div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<!-- <script type="text/javascript" src="data.geo.json"></script> -->
<script type="text/javascript" src="main.js"></script>
</body>
Change your javascript to following:
$.getJSON('data.geo.json', function (geojson) {
L.geoJson(geojson, {
pointToLayer: function (feature, latlng) {
return L.marker(latlng);
},
onEachFeature: function (feature, layer) {
const coordinates = feature.geometry.coordinates;
const normalizedCoordinates = feature.geometry.coordinates.sort(function(a,b){return a.typeid-b.typeid});
console.log( `Coordinates: ${coordinates}`);
console.log( `Coordinates N: ${normalizedCoordinates}`);
const content =
`
<p id="heading">${feature.properties.name}</p>
<p class="scoreA"><strong>ScoreA: </strong><span>${feature.properties.scoreA}</span></p>
<p class="scoreB"><strong>ScoreB: </strong><span>${feature.properties.scoreB}</span></p>
<p class="scoreC"><strong>ScoreC: </strong><span>${feature.properties.scoreC}</span></p>
<p class="scoreD"><strong>ScoreD: </strong><span>${feature.properties.scoreD}</span></p>
<div class="popup__chart">chart</div>
`;
layer.on('click', function (e) {
var popupElm = document.getElementById("popup__content");
popupElm.innerHTML = content;
$(".popup").fadeOut(10);
$(".popup").fadeIn("slow");
console.log( `Click on ${feature.properties.name}`);
const maxZoom = mymap.getMaxZoom();
console.log(maxZoom)
mymap.flyTo(this.getLatLng(), maxZoom, {easeLinearity: 0.12, duration:1});
var marksData = {
labels: ["Score A", "Score B", "Score C", "Score D"],
datasets: [{
label: "City",
backgroundColor: "rgba(200,0,0,1)",
data: [
popupElm.querySelectorAll('.scoreA span')[0].innerHTML,
popupElm.querySelectorAll('.scoreB span')[0].innerHTML,
popupElm.querySelectorAll('.scoreC span')[0].innerHTML,
popupElm.querySelectorAll('.scoreD span')[0].innerHTML
],
},]
};
if(radarChart){
radarChart.destroy();
}
radarChart = new Chart(marksCanvas, {
type: 'radar',
data: marksData
});
});
}
}).addTo(mymap);
});
//Chart
var marksCanvas = document.getElementById("marksChart");
var radarChart = null;
$(document).ready(function(){
$(".popup__bar__close").click(function(){
$('.popup').css('display', 'none');
mymap.flyTo([39.46975, -0.37739], 8, {easeLinearity: 0.12, duration:1});
});
});
What changed:
Add in the Popup around the score value a span, so it can easily read out
<p class="scoreA"><strong>ScoreA: </strong><span>${feature.properties.scoreA}</span></p>
Move the chart generation into the click function but keep the global variables
Destroy the existing chart, else an error is thrown radarChart.destroy();
Get the valus from popup and use it in the data array. It searches for the class .scoreA and then it get the child span element
popupElm.querySelectorAll('.scoreA span')[0].innerHTML,
Btw. you can also get the values from the clicked layer:
data: [
layer.feature.properties.scoreA,
layer.feature.properties.scoreB,
layer.feature.properties.scoreC,
layer.feature.properties.scoreD,
]
I'm using a kendo grid and I want to implement an action bar when a user hover the row. I found the example solution. But I'm looking for showing the tooltips at the end of the row instead of the current hover column. So how can I get the last column that user currently stop at?
Add a :last-child to the filter property:
filter: "tbody td:last-child",
Demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 500
}, {
field: "ContactTitle",
title: "Contact Title",
width: 300
}, {
field: "CompanyName",
title: "Company Name",
width: 300
}, {
field: "Country",
width: 300
}]
});
});
$("#grid").kendoTooltip({
position: "right",
callout: false,
filter: "tbody td:last-child",
content: function(e) {
return "<button class='k-button' ><span class='k-icon k-i-trash'></span></button> <button class='k-button'><span class='k-icon k-i-email'></span></button> <button class='k-button'><span class='k-icon k-i-warning'></span></button>";
}
});
</script>
</div>
<style type="text/css">
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</body>
</html>
Dojo
I would like to do something like this but I don't know how.
I have an idea but it doesn't work.
<div id="stats">
<div id="men" class="circle"></div>
<div id="women" class="circle"></div>
<div id="white-circle" class="small-circle"></div>
</div>
<style>
#stats {
width: 100px;
height: 100px;
background: white;
position: relative;
}
.circle {
border-radius: 100px;
background: #CCC;
width: 100px;
height: 100px;
position: absolute;
}
.circle#men {
background: #27ae60;
}
.circle#women {
background: #f26646;
}
.small-circle {
border-radius: 100px;
background: white;
width: 65px;
height: 65px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
</style>
It is actually called as donut chart. It will be difficult for you to just use a div tag. Instead use canvas or just use a javascript framework for charting. Here are few examples.
<canvas></canvas>
Example1
Example2
Example3
Example4
markup
<canvas width="500px" height="250px"></canvas>
javascript
$(document).ready(function() {
var context = $("canvas")[0].getContext("2d");
var values = '24,43,43,45';
var segments = values.split(",");
var segmentColor = 50;
var total = 0;
//Reset the canvas
context.restore();
context.save();
context.clearRect(0,0,500,250);
for (i=0;i<segments.length;i++) {
total = total + parseFloat(segments[i]);
}
var parts = 360/total;
var startAngle=0
context.translate(100,100)
context.rotate(270*(Math.PI/180)); //Turn the chart around so the segments start from 12 o'clock
for (i=0;i<segments.length;i++) {
//Draw the segments
context.fillStyle ="rgb(" + segmentColor + "," + segmentColor + "," + segmentColor + ")";
context.beginPath();
context.moveTo(0,0);
context.arc(0,0,100,startAngle*(Math.PI/180),(startAngle + parseFloat(segments[i]*parts))*(Math.PI/180),false);
context.lineTo(0,0);
context.closePath();
context.fill();
startAngle = startAngle + parseFloat(segments[i]*parts);
segmentColor = segmentColor + 20;
}
//Turn into a donut!!
context.fillStyle = "White";
context.beginPath();
context.arc(0,0,60,0,Math.PI*2,false);
context.closePath();
context.fill();
});
Notice: var values = '24,43,43,45'; // This will basicall divide the circle into 4 parts
Demo: http://jsfiddle.net/Zgfb6/
One method would be to just use a chart framework which supports donut charts like d3js.
Examples made with d3js:
http://bl.ocks.org/mbostock/3887193
http://bl.ocks.org/mbostock/3888852
http://www.visualizing.org/visualizations/uk-olympic-sentiment-analysis
Here's how to make circles in css:
If you know how to make square in css you only need to add border-radius: 100% in css. That will convert a square into circle. Here is some more code which to address your question:
<html>
<head>
<title> Disappering Circles </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div>
<script type="text/javascript"></script>
</body>
</html>
Here is the CSS:
#red {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
border-radius: 100%
}
#blue{
width: 100px;
height: 100px;
background-color: blue;
display: inline-block;
}
#yellow{
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block;
}
You could also use Highcharts, and more specifically highcharts-chart (web-component of Highcharts) to get a chart like this:
Implementation:
chart.data = [{
name: 'Clients',
size: "100%",
innerSize: "60%",
showInLegend: true,
dataLabels: {enabled: false},
data: [
{name: "Men", y: 2258, color: '#20ad61'},
{name: "Women", y: 5023, color: '#f26645'},
],
}]
chart.legendOptions = {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: function() {return Math.round(this.y/7281*100)+"% "+this.name},
}
chart.chartOptions = {spacingLeft: 0,}
chart.highchartOptions = {
title: {
verticalAlign: 'middle',
y: -2
},
subtitle: {
verticalAlign: 'middle'
},
}
#chart {
width: 23em;
height: 10em
}
#chart .highcharts-point {rx: initial; ry: initial}
<base href="https://user-content-dot-custom-elements.appspot.com/avdaredevil/highcharts-chart/v2.0.1/highcharts-chart/">
<link rel="import" href="highcharts-chart.html">
<highcharts-chart id='chart' title='<b>7,281</b>' subtitle='CLIENTS' type="pie" title="" label="Gender" legend height-responsive></highcharts-chart>
Note: Click Run Code Snippet to see the chart.
I'm trying to output this twitter feed to a tag in the right column, but I can't figure out how to make it work. It seems like the code is set up to print wherever it is located. However, I can't place the code in the body of the page.
http://cusli.org/NiagaraIntlMootCourt/NiagaraMoot.aspx
Here is the code. I have a div tag with id "comments" in the html body.
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
Try this:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>
<script>
var myThing = new TWTR.Widget({ //save you reference
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}); //remove from here
</script>
inside your HTML go
<div>
<script>
myThing.render().setUser('NiagaraMoot').start(); //add here
</script>
</div>
Put the script tag inside the div where you want it to render.
eg:
<html>
<body>
<h1>Hello world</h2>
<div>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 250,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#000000'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#b80b0b'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('NiagaraMoot').start();
</script>
</div>
</body>
</html>
<div id="contentRight">
<!-- this is your right coulmn, put TWitter script here -->
<div class="myTwitter">
<script>
new TWTR.Widget({
version: 2,
....
}).render().setUser('NiagaraMoot').start();
</script>
</div>
<!-- end of your insert -->
<div id="dnn_ContentPane_Right">
....
CSS and main Tweeter JS library should stay in <head> ... </head> tag of you page - prefferably ... if you can not place them there ... they can be anywhere in your page but just before the init part (shown above).
I meen this part:
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<style type="text/css">
#nav {
padding: 0 0 0 10px;
margin: 0;
list-style: none;
width: 760px;
height: 0px;
background:#6E102B;
margin-bottom: 5px;
}
.twtr-hd,
.twtr-ft,
.twtr-user
{
display: none;
}
</style>