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.
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>
I want my chart to be inline with other div and with the main div , but I am not able to fix the height of the piechart div , I want the extra padding to be removed . how do i achieve that ?
chart.html
<html>
<head>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="chart1.js"></script>
</head>
<body>
<div style="width:175px; height :200px">
<div >
<table style="width:100%;border:1px solid green">
<tr>
<td>Execution %</td>
<td style="text-align:right">70</td>
</tr>
<tr>
<td>Pass %</td>
<td style="text-align:right">90</td>
</tr>
</table>
</div>
<div id="chartdiv" style="min-width: 100px; max-width:100%;max-hright:100%;border:3px solid black ">
</div>
</div>
the js file for rendering this chart is :-
$(function() {
var chart = new Highcharts.Chart('chartdiv',{
chart: {
margin: [0, 0, 0, 0],
spacingTop: 0,
spacingBottom: 0,
spacingLeft: 0,
spacingRight: 0
},
credits: {
enabled: false
},
title: {
text: null
},
plotOptions: {
pie: {
size:'100%',
slicedOffset: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
type: 'pie',
name: 'Months',
data: [
['Jan', 45.0],
['Feb', 26.8],
['Mar', 8.5],
['June', 6.2],
['July', 21.0]
]}]
});
});
add style for chart div - "chartdiv"
width:100% !important;
height:100% !important;
I have a chart that allows the user to select an option to compare to a statewide average. The chart works fine until I use the stringify method to create annotations - the number of columns varies based on the selection. What is your advice on how to retain this functionality, and still have data labels?
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize() {drawVisualizations();
function drawVisualizations() {drawChart(); drawTable();} //drawC();}
//main chart
function drawChart() {
var dataCap = document.getElementById("selected2").value;
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:A5,E1:E5,' + dataCap); query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'subTitle':'Test',
'titleTextStyle': {fontSize: '24', color: 'teal', fontName: '"Arial"', isHTML: true},
hAxis: {'title': 'Percent of Students Ready', 'textStyle': {color: 'gray', fontSize: '9'}, 'minValue': '0', 'maxValue':'1','format': 'percent'},
vAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}, 'minValue': '0', 'maxValue':'1'},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: '16', fontName: "'Arial'"}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
0: {pointsVisible: true, color: '#003366'},
1: {pointsVisible: true, color: '#cc0000'}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
stem:{color: 'none'}
}};
function handleQueryResponse(response) {var data = response.getDataTable()};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));chart.draw(data, options);}
//current stats sidebar
function drawTable() {
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A:E');
query2.send(handleQueryResponse2);
}
function handleQueryResponse2(response) {
var data2 = response.getDataTable();
var options2 = {'sort': 'disable'};
var chart2 = new google.visualization.Table(document.getElementById('data_div'));
chart2.draw(data2, options2);}
}
</script>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;}
html, body {height: 100%;}
body {text-align: center;}
#chart_div {width: 900px; margin: 20px auto; height: 600px;}
</style>
</head>
<body>
<label for="selected2">You are viewing:</label>
<select id="selected2" onChange="initialize()">
<option selected value="">Statewide average only</option>
<option value="B1:B5">Fake University 1 compared to statewide average</option>
<option value="C1:C5">Fake University 2 compared to statewide average</option>
<option value="D1:D5">Fake University 3 compared to statewide average</option>
</select>
<input onClick="window.open('datatest21-data.html')" type="button" value="Download the complete data set" />
<div id="chart_div"></div>
<div id="data_div"></div>
</body>
</html>
Here is the stringify method I was using, but it messes up the above code:
//
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, { calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"},
2,{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" }]);
//
It could be that I'm doing this all wrong - advice, appreciated. This type of coding is new to me.
I've got it working now with set columns, but the dropdown to change the value no longer works. My guess is that once the graph shifts into DataView (rather than DataTable), it becomes "read-only" and the interactivity is lost. (This example is using another chart.) I need a way of redrawing the table when another option is selected.
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['table', 'corechart']});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(initialize);
function initialize() {drawVisualizations(); function drawVisualizations() {drawChart(); drawTable();} //drawC();}
//main chart
function drawChart() {
var dataCap = document.getElementById("selected2").value;
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Enrollment&range=' + dataCap); query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
//
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,
{calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation"}
]);
//
var options = {
height: 500,
chartArea: {'left': '5%'},
isStacked: true,
hAxis: {'textStyle': {'fontSize':11}},
vAxis: {'textStyle': {'fontSize':11}, 'maxValue':110000},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: 11, fontName: '"Arial"'}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
0: {color: 'navy'},
1: {color: 'teal'}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
alwaysOutside: true,
isHTML: true,
stemColor: 'none',
text: 'test'
}};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));chart.draw(view, options);}
//current stats sidebar
function drawTable() {
var dataCap2 = document.getElementById("selected3").value;
var query2 = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?' + dataCap2);
query2.send(handleQueryResponse2);
}
function handleQueryResponse2(response) {
var data2 = response.getDataTable();
var options2 = {
height: 300,
chartArea: {'left': '5%'},
hAxis: {'textStyle': {'fontSize':11}},
vAxis: {'minValue': '0', 'maxValue':'1', 'format':'percent', 'textStyle': {'fontSize':11}},
legend: {'position': 'top', 'maxLines': 5, 'textStyle': {bold: true, fontSize: 11, fontName: '"Arial"'}},
tooltip: {
textStyle: {fontName: "'Arial'"}},
series: {
//0: {pointsVisible: true, color: '#003366', pointSize: 6},
0: {pointsVisible: true, color: '#cc0000', pointSize: 6}
},
annotations: {
textStyle: {bold: true,color: '#000000', fontName: "'Arial'"},
stem:{color: 'none'}
}
};
var chart2 = new google.visualization.LineChart(document.getElementById('data_div'));
chart2.draw(data2, options2);}
}
</script>
<style type="text/css">
body {text-align: center; font-family: Arial, Helvetica, sans-serif;}
#wrapper {width: 75%; margin: 0 auto; text-align: left;}
#current {float: right; width: 28%; background-color: #ececec; padding: 0 1em; font-size: 80%; margin-left: 5%;}
h2 {margin-top: 2em;}
dt {font-weight: bold; margin-top: .5em;}
dd {padding-top: .25em; margin-top: .25em;}
dd.total {border-top: 1px solid #000;}
#chart_div, #data_div {width: 75%;}
</style>
</head>
<body>
<div id="wrapper">
<h1>Student Enrollment in State Universities and Community Colleges</h1>
<h3>Trend Data</h3>
<form>
<label for="selected2">You are viewing:</label>
<select id="selected2" onchange="initialize()">
<option selected value="A1:E8">All state universities</option>
<option value="F1:I8">Fake University 1</option>
</select>
<div id="chart_div"></div>
<input onClick="window.open('')" type="button" value="Download the complete data set" />
</form>
<h2>Community and Technical Colleges</h2>
<h3>Trend Data</h3>
<form>
<label for="selected3">You are viewing:</label>
<select id="selected3" onChange="initialize()">
<option selected value="sheet=GraduationRates-3Yr&range=A1:B11">3-Year graduation rate</option>
<option value="sheet=GraduationRates-2Yr&range=A1:B11">2-Year graduation rate</option>
</select>
<div id="data_div"></div>
<input onClick="window.open('')" type="button" value="Download the complete data set" />
</form>
</div>
</body>
</html>
[/code]
im trying to loade a PieChart from my js file
in to a div in the HTML code. But I can't get it to work except
from when I have a script containing the js code in the HTML code.
But I want to have the code separated.
Here is my code so far:
Index.html
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="Scripts\Chart.js"></script>
<script type="text/javascript" src="Scripts\canvasjs.min.js"></script>
</head>
<body>
<div>
<div id="chartContainer" onload="LoadPieChart()" style="height: 300px; width: 300px; margin-left:auto; margin-right:auto; background-color:#323232;"></div>
</div>
</body>
Chart.js
function LoadPieChart() {
var chart = new CanvasJS.Chart("#chartContainer", {
theme: "theme2",//theme1
title: {
text: "Stats"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
// Change type to "bar", "splineArea", "area", "spline", "pie",etc.
indexLabelFontSize: 20,
indexLabelFontFamily: "Monospace",
indexLabelFontColor: "darkgrey",
indexLabelLineColor: "darkgrey",
indexLabelPlacement: "outside",
type: "pie",
showInLegend: true,
toolTipContent: "{y} - <strong>#percent%</strong>",
dataPoints: [
{ label: "Stat1", y: 30, color: "#5877F5", exploded: true, legendText: "30%" },
{ label: "Stat2", y: 70, color: "#EB483F", legendText: "70%" }
]
}
]
});
chart.render();
}
I solved the problem like this:
<script type="text/javascript">
window.onload = LoadChart;
</script>
HTML:
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="Scripts\Chart.js"></script>
<script type="text/javascript" src="\Scripts\canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = LoadChart;
</script>
</head>
<body>
<div>
<div id="chartContainer" style="height: 300px; width: 300px; margin-left:auto; margin-right:auto;"></div>
</div>
</body>
</html>
JS:
function LoadChart() {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",//theme1
title: {
text: "Stats"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
// Change type to "bar", "splineArea", "area", "spline", "pie",etc.
indexLabelFontSize: 20,
indexLabelFontFamily: "Monospace",
indexLabelFontColor: "darkgrey",
indexLabelLineColor: "darkgrey",
indexLabelPlacement: "outside",
type: "pie",
showInLegend: true,
toolTipContent: "{y} - <strong>#percent%</strong>",
dataPoints: [
{ label: "Stat1", y: 30, color: "#5877F5", exploded: true, legendText: "30%" },
{ label: "Stat2", y: 70, color: "#EB483F", legendText: "70%" }
]
}
]
});
chart.render();