`
<html>
<head>
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
}
.main-panel {
width: 70%;
float: left;
}
.side-panel {
width: 30%;
background-color: lightgray;
min-height: 300px;
overflow: auto;
float: right;
}
</style>
</head>
<body>
<div class="graph-container">
<div id="myDiv" class="main-panel"></div>
<div id="lineGraph" class="side-panel"></div>
</div>
<script>
var nodes = [
{ x: 0, y: 0, z: 0, value: [1, 2, 3] },
{ x: 1, y: 1, z: 1, value: [4, 5, 6] },
{ x: 2, y: 0, z: 2, value: [7, 8, 9] },
{ x: 3, y: 1, z: 3, value: [10, 11, 12] },
{ x: 4, y: 0, z: 4, value: [13, 14, 15] }
];
var edges = [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 2, target: 3 },
{ source: 3, target: 4 }
];
var x = [];
var y = [];
var z = [];
for (var i = 0; i < nodes.length; i++) {
x.push(nodes[i].x);
y.push(nodes[i].y);
z.push(nodes[i].z);
}
const edge_x = [];
const edge_y = [];
const edge_z = [];
for (var i = 0; i < edges.length; i++) {
const a = nodes[edges[i].source];
const b = nodes[edges[i].target];
edge_x.push(a.x, b.x, null);
edge_y.push(a.y, b.y, null);
edge_z.push(a.z, b.z, null);
}
var traceNodes = {
x: x, y: y, z: z,
mode: 'markers',
// marker: { size: 12, color: 'red' },
// marker: { size: 12, color: Array.from({length: nodes.length}, () => 'red') },
text: [0, 1, 2, 3, 4],
// add the color gradient to the nodes from red to blue
// marker: { size: 12, color: Array.from({length: nodes.length}, () => 'red'), colorscale: 'Viridis'},
marker:{color: [1,2,3,4,5],colorscale: [[0, 'rgb(255, 0, 0)'], [1, 'rgb(0, 0, 255)']], showscale: true, size: 12},
hoverinfo: 'text',
hoverlabel: {
bgcolor: 'white'
},
customdata: nodes.map(function(node) {
if (node.value !== undefined)
return node.value;
}),
type: 'scatter3d'
};
var traceEdges = {
x: edge_x,
y: edge_y,
z: edge_z,
//add the color gradient to the lines from red to blue
// line: { color: Array.from({length: edge_x.length}, () => 'red'), width: 5, colorscale: 'Viridis'},
line: {
color: [4,1,4,1,4,1],
colorscale: [[0, 'rgb(255, 0, 0)'], [1, 'rgb(0, 0, 255)']],
showscale: true,
width: 5
},
type: 'scatter3d',
mode: 'lines',
// line: { color: 'red', width: 2, arrow: {size: 50, color: 'black', end:1}},
// line: { color: 'red', width: 2, shape: 'spline', arrow: {size: 500, color: 'black', end:1}},
//add color gradient to the lines
// line: { width: 2, shape: 'spline', arrow: {size: 500, color: 'black', end:1}, colorscale: 'Viridis'},
opacity: 2.8
//add cones shape to the end of the lines
};
var layout = {
margin: { l: 0, r: 0, b: 0, t: 0 }
};
// var traceCone = {
// type: "cone",
// x: [1], y: [1], z: [1],
// u: [1], v: [1], w: [0]
// };
//add the cones shape at the middle of the lines and they are pointing to the end of the lines
var traceCone = {
type: "cone",
x: [0.5, 1.5, 2.5, 3.5], y: [0.5, 0.5, 0.5, 0.5], z: [0.5, 1.5, 2.5, 3.5],
u: [1,1,1,1], v: [1,-1,1,-1], w: [1,1,1,1],
//set the size of the cones
sizemode: "absolute",
sizeref: 0.5,
// give color to cone which have co-oridnates (0.5,0.5,0.5)
colorscale: [[0, 'rgb(255, 0, 0)'], [1, 'rgb(0, 0, 255)']],
// color: [1,2,3,4], // color array
// colorscale: 'Viridis',
showscale: false
// colorscale: 'Viridis',
// color: [1,4,1,1,4,1],
// showscale: false,
};
Plotly.newPlot('myDiv', [traceNodes, traceEdges,traceCone],layout, { displayModeBar: false });
// max y value for the line plot
const ymax = Math.max(...nodes.map(n => n.value).flat());
document.getElementById('myDiv').on('plotly_click', function(data){
var nodeIndex = data.points[0].pointNumber;
var values = nodes[nodeIndex].value;
//change the color of the clicked node to blue and when clicked on another node, change the color of the previous node to red
var update = {
//give the color of the nodes to the initial color
// marker: { color: Array.from({length: nodes.length}, () => 'red') }
//give the color of the nodes to the color gradient
marker: { color: [1,2,3,4,5],colorscale: [[0, 'rgb(255, 0, 0)'], [1, 'rgb(0, 0, 255)']], showscale: true, size: 12}
};
update.marker.color[nodeIndex] = 'blue';
setTimeout(function() {
Plotly.restyle('myDiv', update);
}, 50);
Plotly.newPlot('lineGraph', [{
type: 'scatter',
mode: 'lines',
x: [0, 1, 2],
y: values
}], {
margin: { t: 0 },
yaxis: {autorange: false, range: [0, ymax + 1]}
});
});
</script>
</body>
</html>
The code above shows how to display a 3D network graph , and cones were used as an arrow of the edge.Basically we wanted to give different colors to the cones,but its not working...
Please help us to way out of this problem.
So,the code that I have shown ,assign same color to all the cones (which I dont want), is there any way out?
Unlike scatter traces, cone traces don't have a color property where you can specify an array of numbers that are mapped to a color scale. You can only define what the colorscale is, and its bounds in the color space using cmin and cmax.
The thing (number) that determines the color of a cone is its u/v/w norm in the vector field, and it seems that it's not possible to decide arbitrarily - regardless of that norm - how each cone should be colored.
If I'm not wrong the u/v/w norm is computed as follows :
const norm = Math.sqrt(u**2 + v**2 + w**2);
In your example, all cones are assigned the same color because they all have the same norm, which is √3. If you try to assign different u/v/w values, it should change accordingly.
Related
Is it possible to scale Chart.js background Image so that when the page is resized, the background image is also resized?
Followed the chartjs.org example, but it doesn't resize either.
I've tried CSS on the image object...
Could possibly tie image to around chart that sizes with page.
Suggestions?
//setup block
const data = {
datasets: [{
label: "Elevation",
radius: 0,
borderWidth: 2,
pointBorderColor: 'blue',
pointBackgroundColor: 'red',
data: [{
x: "03/02/2022",
y: "659.63"
}, {
x: "03/03/2022",
y: "659.6"
}, {
x: "03/04/2022",
y: "659.6"
}, {
x: "03/05/2022",
y: "659.63"
}, {
x: "03/06/2022",
y: "659.81"
}, {
x: "03/07/2022",
y: "659.86"
}, {
x: "03/08/2022",
y: "659.99"
}, {
x: "03/09/2022",
y: "660.29"
}, {
x: "03/10/2022",
y: "660.38"
}, {
x: "03/11/2022",
y: "660.39"
}, {
x: "03/12/2022",
y: "660.78"
}, {
x: "03/13/2022",
y: "660.95"
}, {
x: "03/14/2022",
y: "660.95"
}, {
x: "03/15/2022",
y: "661.01"
}, {
x: "03/16/2022",
y: "661.48"
}, {
x: "03/17/2022",
y: "661.39"
}, {
x: "03/18/2022",
y: "661.24"
}, {
x: "03/19/2022",
y: "661.34"
}, {
x: "03/20/2022",
y: "661.44"
}, {
x: "03/21/2022",
y: "661.34"
}, {
x: "03/22/2022",
y: "661.12"
}, {
x: "03/23/2022",
y: "661.27"
}, {
x: "03/24/2022",
y: "661.29"
}, {
x: "03/25/2022",
y: "661.29"
}, {
x: "03/26/2022",
y: "661.29"
}, {
x: "03/27/2022",
y: "661.29"
}, {
x: "03/28/2022",
y: "661.52"
}, {
x: "03/29/2022",
y: "661.53"
}, {
x: "03/30/2022",
y: "661.44"
}, {
x: "03/31/2022",
y: "661.36"
}, {
x: "04/01/2022",
y: "661.0"
}, {
x: "04/02/2022",
y: "660.68"
}, {
x: "04/03/2022",
y: "660.41"
}, {
x: "04/04/2022",
y: "660.247"
}, {
x: "04/05/2022",
y: "660.31"
}, {
x: "04/06/2022",
y: "660.46"
}, {
x: "04/07/2022",
y: "660.7"
}, {
x: "04/08/2022",
y: "660.73"
}, {
x: "04/09/2022",
y: "660.73"
}, {
x: "04/10/2022",
y: "660.73"
}, {
x: "04/11/2022",
y: "660.85"
}, {
x: "04/12/2022",
y: "660.87"
}, {
x: "04/13/2022",
y: "660.83"
}, {
x: "04/14/2022",
y: "660.75"
}, {
x: "04/15/2022",
y: "660.73"
}],
fill: false,
borderColor: 'blue'
}]
};
//plugin block
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const {
ctx,
chartArea: {
left,
top,
width,
height
}
} = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
const image = new Image();
image.src = 'castle.png';
const imgPlugin = {
id: 'custom_canvas_background_image',
beforeDraw: (chart) => {
if (image.complete) {
const ctx = chart.ctx;
const {
top,
left,
width,
height
} = chart.chartArea;
const x = left + width / 2 - image.width / 2;
const y = top + height / 2 - image.height / 2;
ctx.drawImage(image, x, y);
} else {
image.onload = () => chart.draw();
}
}
};
var GradientBgPlugin = {
beforeDraw: function(chart, args, options) {
const ctx = chart.ctx;
const canvas = chart.canvas;
const chartArea = chart.chartArea;
// Chart background
var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
gradientBack.addColorStop(0, "rgba(255, 255, 255, 0.7)");
gradientBack.addColorStop(1, "rgba(200, 204, 255, 0.7)");
ctx.fillStyle = gradientBack;
ctx.fillRect(chartArea.left, chartArea.bottom, chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
}
};
//config block
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom'
},
title: {
display: true,
text: "HARTWELL PROJECT ",
font: {
size: 20
}
},
},
scales: {
x: {
type: 'time',
time: {
parser: 'MM/dd/yyyy',
unit: 'month',
displayFormats: {
month: 'MMM yyyy'
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
position: 'left',
display: true,
text: 'Elevation (FT-MSL)'
}
}
},
chartAreaBorder: {
borderColor: 'black',
borderWidth: 10,
//borderDash: [5, 5],
borderDashOffset: 5
},
imgPlugin: {}
},
plugins: [chartAreaBorder, imgPlugin, GradientBgPlugin]
};
// render block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
.chartBox {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
When drawing the image inside the beforeDraw hook, you should should specify its width and height depending on the size of the canvas.
const x = left + width / 2 - height / 2;
const y = top + height / 2 - height / 2;
ctx.drawImage(image, x, y, height, height);
Please take a look at your amended code and see how it works.
const data = {
datasets: [{
label: "Elevation",
radius: 0,
borderWidth: 2,
pointBorderColor: 'blue',
pointBackgroundColor: 'red',
data: [{
x: "03/02/2022",
y: "659.63"
}, {
x: "03/03/2022",
y: "659.6"
}, {
x: "03/04/2022",
y: "659.6"
}, {
x: "03/05/2022",
y: "659.63"
}, {
x: "03/06/2022",
y: "659.81"
}, {
x: "03/07/2022",
y: "659.86"
}, {
x: "03/08/2022",
y: "659.99"
}, {
x: "03/09/2022",
y: "660.29"
}, {
x: "03/10/2022",
y: "660.38"
}, {
x: "03/11/2022",
y: "660.39"
}, {
x: "03/12/2022",
y: "660.78"
}, {
x: "03/13/2022",
y: "660.95"
}, {
x: "03/14/2022",
y: "660.95"
}, {
x: "03/15/2022",
y: "661.01"
}, {
x: "03/16/2022",
y: "661.48"
}, {
x: "03/17/2022",
y: "661.39"
}, {
x: "03/18/2022",
y: "661.24"
}, {
x: "03/19/2022",
y: "661.34"
}, {
x: "03/20/2022",
y: "661.44"
}, {
x: "03/21/2022",
y: "661.34"
}, {
x: "03/22/2022",
y: "661.12"
}, {
x: "03/23/2022",
y: "661.27"
}, {
x: "03/24/2022",
y: "661.29"
}, {
x: "03/25/2022",
y: "661.29"
}, {
x: "03/26/2022",
y: "661.29"
}, {
x: "03/27/2022",
y: "661.29"
}, {
x: "03/28/2022",
y: "661.52"
}, {
x: "03/29/2022",
y: "661.53"
}, {
x: "03/30/2022",
y: "661.44"
}, {
x: "03/31/2022",
y: "661.36"
}, {
x: "04/01/2022",
y: "661.0"
}, {
x: "04/02/2022",
y: "660.68"
}, {
x: "04/03/2022",
y: "660.41"
}, {
x: "04/04/2022",
y: "660.247"
}, {
x: "04/05/2022",
y: "660.31"
}, {
x: "04/06/2022",
y: "660.46"
}, {
x: "04/07/2022",
y: "660.7"
}, {
x: "04/08/2022",
y: "660.73"
}, {
x: "04/09/2022",
y: "660.73"
}, {
x: "04/10/2022",
y: "660.73"
}, {
x: "04/11/2022",
y: "660.85"
}, {
x: "04/12/2022",
y: "660.87"
}, {
x: "04/13/2022",
y: "660.83"
}, {
x: "04/14/2022",
y: "660.75"
}, {
x: "04/15/2022",
y: "660.73"
}],
fill: false,
borderColor: 'blue'
}]
};
//plugin block
const chartAreaBorder = {
id: 'chartAreaBorder',
beforeDraw(chart, args, options) {
const {
ctx,
chartArea: {
left,
top,
width,
height
}
} = chart;
ctx.save();
ctx.strokeStyle = options.borderColor;
ctx.lineWidth = options.borderWidth;
ctx.setLineDash(options.borderDash || []);
ctx.lineDashOffset = options.borderDashOffset;
ctx.strokeRect(left, top, width, height);
ctx.restore();
}
};
const image = new Image();
image.src = 'https://i.stack.imgur.com/S7tJH.png';
const imgPlugin = {
id: 'custom_canvas_background_image',
beforeDraw: (chart) => {
if (image.complete) {
const ctx = chart.ctx;
const {
top,
left,
width,
height
} = chart.chartArea;
const x = left + width / 2 - height / 2;
const y = top + height / 2 - height / 2;
ctx.drawImage(image, x, y, height, height);
} else {
image.onload = () => chart.draw();
}
}
};
var GradientBgPlugin = {
beforeDraw: function(chart, args, options) {
const ctx = chart.ctx;
const canvas = chart.canvas;
const chartArea = chart.chartArea;
// Chart background
var gradientBack = canvas.getContext("2d").createLinearGradient(0, 0, 0, 250);
gradientBack.addColorStop(0, "rgba(255, 255, 255, 0.7)");
gradientBack.addColorStop(1, "rgba(200, 204, 255, 0.7)");
ctx.fillStyle = gradientBack;
ctx.fillRect(chartArea.left, chartArea.bottom, chartArea.right - chartArea.left, chartArea.top - chartArea.bottom);
}
};
//config block
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: true,
position: 'bottom'
},
title: {
display: true,
text: "HARTWELL PROJECT ",
font: {
size: 20
}
},
},
scales: {
x: {
type: 'time',
time: {
parser: 'MM/dd/yyyy',
unit: 'month',
displayFormats: {
month: 'MMM yyyy'
}
},
title: {
display: true,
text: 'Date'
}
},
y: {
title: {
position: 'left',
display: true,
text: 'Elevation (FT-MSL)'
}
}
},
chartAreaBorder: {
borderColor: 'black',
borderWidth: 10,
//borderDash: [5, 5],
borderDashOffset: 5
},
imgPlugin: {}
},
plugins: [chartAreaBorder, imgPlugin, GradientBgPlugin]
};
// render block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
I would like to add a different Font Awesome icon to each instance on a C3 Chart legend.
So far it looks like I have to use the unicode and I have found how to do it for a D3 chart but am unsure how to transfer that info.
My code looks like this...
var eventChart = c3.generate({
bindto: '#eventChart',
data: {
columns: [
['A', -1, -1, -1, -1, -1, 0],
['B', 1, 0, 1, 0, 1, 1],
['C', -1, 0, -1, 0, -1, -1]
],
axes: {
A:'y2',
B: 'y2',
C: 'y2',
},
type: 'bar',
legend: {
position: 'right',
}
},
}
});
the D3 chart example was as follows
node.append('text')
.attr('font-family', 'FontAwesome')
.attr('font-size', function(d) { return d.size+'em'} )
.text(function(d) { return '\uf118' });
graph.json#
{"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},
{"name":"Mlle.Baptistine","group":1},
{"name":"Mme.Magloire","group":1}]}
Thank you
Here is the code I found that worked.
var eventChart = c3.generate({
bindto: '#eventChart',
data: {
columns: [
['A', -1, -1, -1, -1, -1, 0],
['B', 1, 0, 1, 0, 1, 1],
['C', -1, 0, -1, 0, -1, -1]
],
axes: {
A:'y2',
B: 'y2',
C: 'y2',
},
type: 'bar',
legend: {
show:false,
position: 'right',
}
},
}
});
d3.select('.container').insert('div','.eventChartlegend')
.attr('class', 'eventslegend').selectAll('span')
.data( ['A', 'B', 'C'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.html(function (id) { return id; })
.each(function (id) {
if(id === "A") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-bug");
} else if(id === "B") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-procedures");
} else if(id === "C") {
d3.select(this).style('color',
eventChart.color(id)).attr('class',"fas fa-cog");
} else {
d3.select(this).style('color', eventChart.color(id))
}
})
----legend.css -------
.eventslegend span{
width: 33.333333%;
cursor: pointer;
color: white;
}
I am new to using highcharts.js. I want to create an activity gauge chart using data from a json file or url. I have understood how they draw the chart but failed to understand the data format used in json to display the chart.
Here is my code
var options = {
chart: {
type: 'solidgauge',
marginTop: 50
},
title: {
text: 'Activity',
style: {
fontSize: '24px'
}
},
tooltip: {
borderWidth: 0,
backgroundColor: 'none',
shadow: false,
style: {
fontSize: '16px'
},
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
positioner: function (labelWidth, labelHeight) {
return {
x: 200 - labelWidth / 2,
y: 180
};
}
},
pane: {
startAngle: 0,
endAngle: 360,
background: [{ // Track for Move
outerRadius: '112%',
innerRadius: '88%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Exercise
outerRadius: '87%',
innerRadius: '63%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
borderWidth: 0
}, { // Track for Stand
outerRadius: '62%',
innerRadius: '38%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
borderWidth: 0
}]
},
yAxis: {
min: 0,
max: 100,
lineWidth: 0,
tickPositions: []
},
plotOptions: {
solidgauge: {
borderWidth: '34px',
dataLabels: {
enabled: false
},
linecap: 'round',
stickyTracking: false
}
},
series: []
};
var gauge1;
$.getJSON('bryan.json', function(json){
console.log(json)
options.chart.renderTo = 'container';
options.series.data = json
gauge1 = new Highcharts.Chart(options);
});
/**
* In the chart load callback, add icons on top of the circular shapes
*/
function callback()
{
// Move icon
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
.attr({
'stroke': '#ffffff',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.translate(190, 26)
.add(this.series[2].group);
// Exercise icon
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
.attr({
'stroke': '#ffffff',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.translate(190, 61)
.add(this.series[2].group);
// Stand icon
this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
.attr({
'stroke': '#ffffff',
'stroke-linecap': 'round',
'stroke-linejoin': 'round',
'stroke-width': 2,
'zIndex': 10
})
.translate(190, 96)
.add(this.series[2].group);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>
And here is my json data which i thout might be rendered but it didnot.
data.json
First of all, instead of options.series.data = json, you need to create the first series and then populate its data array with your data. Also, set in each point different radius and innerRadius properties. Take a look at the example below.
API Reference:
http://api.highcharts.com/highcharts/series.solidgauge.data.radius
http://api.highcharts.com/highcharts/series.solidgauge.data.innerRadius
Example:
http://jsfiddle.net/x3cne1ng/
I need to have a bubble layout like this:
I have completed the work till this stage - JsBin
As I am not that skilled in CSS/Web design, I can only think of using table tr td.
But I can see I will need the bubbles to be aligned close to each other. If I go for table structure, I dont think it will work.
Please suggest some design structure, or I should go for other things, SVG, etc.
Thanks!
I hope this helps you :) I have fun with this.
(Also check out this for some great reading / viewing http://paulbourke.net/texture_colour/randomtile/)
Demo: http://po0.co.uk/circles/
Uses: http://packery.metafizzy.co/
Code:
<style>
.circle
{
border-radius:50%;
text-align:center;
background:#efdeee;
display:inline-block;
margin:-5px;
}
</style>
<div id="container">
<?php
$xx = 1;
while ($xx <= 200) {
$thisx = rand(10,99);
echo '<div class="item circle" style="width:'.$thisx.'px;height:'.$thisx.'px;"> </div>';
$xx++;
}
?>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.1/packery.pkgd.min.js"></script>
<script>
var container = document.querySelector('#container');
var pckry = new Packery( container, {
// options
itemSelector: '.item',
gutter: 10
});
</script>
You can also try with the HTML5 canvas feature. Here you can learn more about CANVAS.
Please visit the FiddleDemo.
HTML
<canvas width="400" height="400" id="circles"></canvas>
Javascript
var circle = $('#circles').get(0).getContext('2d');
var circles = [
{ x: 50, y: 50, r: 25, c: "#78BA00" },
{ x: 80, y: 100, r: 35, c: "#F4B300" },
{ x: 150, y: 170, r: 15, c: "#78BA00" },
{ x: 50, y: 220, r: 20, c: "#F4B300" },
{ x: 60, y: 150, r: 10, c: "#78BA00" },
{ x: 70, y: 170, r: 15, c: "#F4B300" },
{ x: 110, y: 220, r: 16, c: "#78BA00" },
{ x: 130, y: 150, r: 2, c: "#F4B300" },
{ x: 60, y: 150, r: 5, c: "#78BA00" },
{ x: 70, y: 170, r: 12, c: "#F4B300" },
{ x: 110, y: 30, r: 21, c: "#78BA00" },
{ x: 180, y: 60, r: 2, c: "#F4B300" },
{ x: 70, y: 90, r: 21, c: "#78BA00" },
{ x: 220, y: 110, r: 2, c: "#F4B300" }
];
function drawCircle(data) {
circle.beginPath();
circle.arc(data.x, data.y, data.r, 0, Math.PI * 2);
circle.fillStyle = data.c;
circle.fill();
}
$.each(circles, function() {
drawCircle(this);
});
Explanation of { x: 50, y: 50, r: 25, c: "#78BA00" },
x : x-axis postion in pixels
y : y-axis position in pixels
r : radius in pixels
c : mention the color in hex
With the help of above parameters you can Position, Size and Color the circles as per your needs.
Most importantly this solution will be independent of server-side scripting.
I am trying to read the data from csv and display it as a input to Speedometer but I am unable to get the chart. Please tell me where i am going wrong.
My code is:
$(document).ready(function() {
var options = {
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
},
plotBands: [{
from: 0,
to: 120,
color: '#55BF3B' // green
}, {
from: 120,
to: 160,
color: '#DDDF0D' // yellow
}, {
from: 160,
to: 200,
color: '#DF5353' // red
}]
},
series: []
};
$.get('data.csv', function(data) {
var series = {
data: [],
name: 'Speed',
tooltip: {
valueSuffix: ' km/h'
}
};
series.data.push(parseFloat(data));
options.series.push(series);
alert("data "+options.series);
var chart = new Highcharts.Chart(options);
});
});
and the csv file is simple
data.csv has only one value 30.
or incase it is
t1,30
t2,40
t3,60
how do i display 3 corresponding speedometers with respective speed.
Your help is greatly appreciated.
Thanks in advance.
In your case data your data (from ajax) is a single string, but you need to split elements and then choose which should be parsed to integer (parseFloat).