I'm using chart.js to generate this stacked graph. The problem is, the chart is too small and the users won't be able to read the chart (the stacked portion is really important, some of the tooltips on the X axis are missing (the dataset is a bit large). I want the chart to occupy a very specific place within my webpage.
Is there a way to make the scale on the X-axis smaller and simply being able to horizontally scroll through chart?
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<script>
const data = {
labels: {{ labels | safe }},
datasets: {{ data_list | safe}}
};
const config = {
type: 'bar',
data: data,
options: {
plugins: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
}],
},
}
};
window.onload = function() {
var ctx = document.getElementById('pie-chart-stacked').getContext('2d');
window.myPie = new Chart(ctx, config);
};
</script>
<!doctype html>
{% load static %}
<html lang="en">
<head>
<meta charset="utf-8">
<title>Project Scanner</title>
<meta name="description" content="Project Scanner">
<link rel="stylesheet" href="{% static 'css/home.css' %}">
</head>
<body>
<div id="container" style="width: 50%;">
<canvas id="pie-chart-stacked"></canvas>
</div>
</body>
</html>
Also here's a picture of the chart in it's current state:
EDIT: Added a new picture of the chart with a smaller dataset.
Chart.js doesn't support scrollable axis natively. ChartJs charts are responsive and change width according to parent container. You can do something like this :
<div class="chartWrapper">
<div class="chartAreaWrapper">
<canvas id="chart" height="400" width="15000"></canvas>
</div>
</div>
CSS
.chartWrapper {
position: relative;
}
.chartWrapper > canvas {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
.chartAreaWrapper {
width: 15000px;
overflow-x: scroll;
}
Finally, add this options object to your chart
options: {
scales: {
xAxes: [{
ticks: {
padding: 20
}
}]
}}
Here is one more example on how you can make your chart scrollable
try the responsive chart options.
responsive: [{
breakpoint: 769,
bar: {
horizontal: false
},
Related
I am working on chart pie to input the data and I want to make the correct order for the chart pie color, I want to make the green pie to go on the left and the blue pie to go on the right.
var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
legend:{
position: 'right'
},
data: {
labels: ["Opened", "Clicked"],
datasets: [{
data: [
opened_today,
clicked_today
],
backgroundColor: [
"#28a745",
"#007bff"
],
}],
},
});
.chartjs-render-monitor {
animation: chartjs-render-animation 1ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js" integrity="sha256-2upzq+m3oG9Q4Xye6pGvLrXgrzOKtTgR1D2GCLUzL2o=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/chart.js/Chart.min.js"></script>
<!-- Custom fonts for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Card Body -->
<div class="card-body" style="height: 401px;">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart" width="272" height="245" class="chartjs-render-monitor" style="display: block; width: 272px; height: 245px; text-align: right;"></canvas>
</div>
</div>
Here is what my chart pie show:
When I try this:
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ["Opened", "Clicked"],
datasets: [{
data: [
clicked_today,
opened_today
],
backgroundColor: [
"#007bff",
"#28a745"
],
}],
},
});
I am getting this:
Here is what I want to achieve:
Can you please show me an example how I can make the green pie to go on the left and the blue pie to go on the right?
Thank you.
Ok, you have to choose your data/color following clockwise, first clicked/blue then opened/green.
All settings for legend have to be inside key options
For legend, reverse does the job
var showalert = 'opened';
var opened_today = 2;
var clicked_today = 1;
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'pie',
options: {
legend: {
reverse:true,
position: 'top',
labels: {
fontColor: 'gray'
}
}
},
data: {
labels: ["Clicked","Opened"],
datasets: [{
data: [
clicked_today,
opened_today,
],
backgroundColor: [
"#007bff", //blue
"#28a745", //green,
],
}],
},
});
.chartjs-render-monitor {
animation: chartjs-render-animation 1ms;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment-with-locales.min.js" integrity="sha256-2upzq+m3oG9Q4Xye6pGvLrXgrzOKtTgR1D2GCLUzL2o=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://startbootstrap.github.io/startbootstrap-sb-admin-2/vendor/chart.js/Chart.min.js"></script>
<!-- Custom fonts for this template-->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="https://startbootstrap.github.io/startbootstrap-sb-admin-2/css/sb-admin-2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Card Body -->
<div class="card-body" style="height: 401px;">
<div class="chart-pie pt-4 pb-2">
<canvas id="myPieChart" width="272" height="245" class="chartjs-render-monitor" style="display: block; width: 272px; height: 245px; text-align: right;"></canvas>
</div>
</div>
The following code plots static csv into Highstock chart in my browser. How do I change the color of the plot lines? The lines show up in the legend with labels ADJ_HIGH and ADJ_LOW.
<html>
<head>
<title>
Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Chart'
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left'
},
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML
}
});
</script>
</body>
</html>
To change the color of the line you should use the following code:
series: [{
color: '#FFFF00',
lineColor: '#FF0000'
}]
so change your script into following:
<html>
<head>
<title>
Chart
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/in/in-all.js"></script>
</head>
<body>
<div id="chart-container" style="min-width: 400px; height: 600px; margin: auto"></div>
<pre id="csv" style="display: none">DATE,ADJ_HIGH,ADJ_LOW
2018-04-27,164.33,160.63
2018-04-30,167.26,161.84
2018-05-01,169.20,165.27
2018-05-02,177.75,173.80
2018-05-03,177.50,174.44
</pre>
<script type="text/javascript">
Highcharts.stockChart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Chart',
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'top',
align:'left'
},
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML
},
series: [{
color: '#FFFF00',
lineColor: '#FF0000'
}]
});
</script>
</body>
</html>
Hello I wrote this code using javascript, chart.js and html & css :
<!DOCTYPE HTML>
<html>
<head>
<title>Index</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="line-chart" width="800" height="450"></canvas>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id = "Global">
<div id = "right">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>
<div id = "left">
<script>
var ctx = new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
/* labels: [18.123,46.8603108462,75.5976216923,104.334932538] */
datasets: [{
data: [{'y': 426777.148122,'x': 18.123},
{'y': 258927.721326,'x': 46.8603108462},
{'y': 176174.771954,'x': 75.5976216923},
{'y': 129604.15967,'x': 104.334932538},
{'y': 101328.238625,'x': 133.072243385}],
label: "Model",
borderColor: "#3e95cd",
fill: false
}, {
label : 'Data',
fill:false,
showLine: false,
backgroundColor: "#FF0000",
data : [{x: 17.0, y: 454995.091169},
{x: 18.0, y: 457656.874749},
{x: 19.0, y: 444574.49162},
{x: 20.0, y: 432511.514968},
{x: 21.0, y: 421184.776328},
{x: 22.0, y: 410452.691467}],
type: 'line'
}]
},
options: {
title:{
display: true,
text:"Tools"
},
scales: {
xAxes: [{
type: 'logarithmic',
position: 'bottom'
}],
yAxes: [{
type: 'logarithmic'
}]
}
}
})
</script>
</div>
</div>
</body>
</html>
Actually when I look at the result in a browser I see the javascript above the
<div id = "right"> whereas I would like to have the javascript at the left and the <div id = "right"> at the right.
Here is my css :
#Global
{
width:100%;
}
#Global #left {
float:left;
width:60%;
}
#Global #right {
margin-left:60%
}
I thought It will work but it is not the case.
Thank you for your help !
This is why I get when I look at the result in a browser :
Another option, aside from the ones already provided, would be to make your Global div a table instead and your left and right divs can be sibling cells in a row on that table.
I am trying to draw circle diagram on html button click (would prefer it on kendo diagram toolbar which is not working too), the addShape method seems to be working fine without any errors, but the diagram doesn't show up on the page.
However the circle is drawn with no issues on initial kendo diagram load.
$(document).ready(createDiagram);
function createDiagram() {
$("#diagram").kendoDiagram({
shapes: [{
type: 'circle',
fill: {
color: 'blue'
}
},
{
type: 'rectangle'
}
],
shapeDefaults: {
editable: {
tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"]
}
},
connectionDefaults: {
stroke: {
color: "#979797",
width: 1
},
type: "polyline",
startCap: "FilledCircle",
endCap: "ArrowEnd"
},
editable: {
tools: ["createShape", "delete", "rotateClockwise", "rotateAnticlockwise"]
}
});
$("#diagram").getKendoDiagram().layout();
}
function drawCircle() {
var diagram = $("#diagram").getKendoDiagram();
/*diagram.addShape(new kendo.dataviz.diagram.Point(100, 220), {
background: "red"
});*/
diagram.addShape(new kendo.dataviz.diagram.Circle({
radius: 600,
stroke: {
width: 5,
color: "#586477"
},
fill: "#e8eff7"
}));
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<base href="http://demos.telerik.com/kendo-ui/diagram/events">
<input type="button" class="btn btn-warning" value="Circle" onclick="drawCircle();" />
<div id="diagram"></div>
I think the problem might be occurring as you have might have put your JS code after your HTML. i.e after the </body> tag ends. This might be leading to problems.
In this working DEMO, I have placed all the JS code into the <head> tag and now the function dramCircle() is being called successfully.
I am working on bubble chart with the help of cviz-0.8.5.min.js, but i want bubble chart that uses d3.js. That should be floating also with tooltip.
I checked in http://bl.ocks.org/mbostock/4063269. but it is not moving or floating. I want both of them.
json
-----
[{"hod":"Speeding","age":"17-19","score":1},
{"hod":"Speeding","age":"20-30","score":10},
{"hod":"Speeding","age":"31-40","score":5},
{"hod":"Speeding","age":">40","score":2},
{"hod":"Hard Braking","age":"17-19","score":15},
{"hod":"Hard Braking","age":"20-30","score":41},
{"hod":"Hard Braking","age":"31-40","score":14},
{"hod":"Hard Braking","age":">40","score":9},
{"hod":"Sharp Left turn","age":"17-19","score":16},
{"hod":"Sharp Left turn","age":"20-30","score":120},
{"hod":"Sharp Left turn","age":"31-40","score":60},
{"hod":"Sharp Left turn","age":">40","score":65},
{"hod":"Sharp Right turn","age":"17-19","score":20},
{"hod":"Sharp Right turn","age":"20-30","score":71},
{"hod":"Sharp Right turn","age":"31-40","score":64},
{"hod":"Sharp Right turn","age":">40","score":169}]
bubble.html
-----------
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Trips-Bubble</title>
<script type="text/javascript" src="https://cviz-core.appspot.com/static/cviz-0.8.5.min.js"></script>
<style type="text/css">
#import url("https://cviz-core.appspot.com/static/cviz-0.8.5.min.css");
#import url("https://cviz-core.appspot.com/static/cviz-studio-0.8.5.min.css");
</style>
</head>
<body style="height: 1000px">
<div class="studio container" id="visualization-container" style="width: 100%; height: 100%">
<div style="position: absolute; text-align: center; height: 100%; width: 100%;">
<h2>Trips by Time of Day and Age Group</h2>
<ul id="picker"></ul>
<div class="gallery"><div style="width:100%;height:100%" id="chart"></div></div>
</div>
</div>
<script src="bubble.js"></script>
</body>
</html>
bubble.js
---------
$(window).ready(function() {
jQuery.ajax({
url: "bubble.json",
dataType: "json",
beforeSend: function(xhr) {
if(xhr.overrideMimeType) {
xhr.overrideMimeType("application/json");
}
},
error: function(xhr, errText, err) {
console.log(err);
},
success: function(data, okText, xhr) {
renderGTODemographics(data);
}
});
});
var graphRunner;
function renderGTODemographics(data) {
graphRunner = cviz.widget.MultiGraph.Runner({
container: {id: "#chart", width: 960, height: 540},
bindings: {level1: "age", level2:"hod", value:"score"},
scaling: {radius: 1},
picker: {id: "#picker", labels: ["Everyone","By Age","By Time of Day"]},
tooltip: {width: 250, height: 40, offsetX: 1, offsetY: 1, labels: {level1: "Age", level2: "Time of day", count: "No of Trips"}}
}).graph().render(data);
}
You might be looking for something like this:
Clustered Force Layout
The above demonstrates how to make bubbles "move and float" (if I understood you correctly) and cluster around a point.
And the link below shows how to add tooltips (Look under T) and other cool features as well:
A-Z features for Force Layouts