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();
Related
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 am using Uikit (getuikit.com) and google charts but the tooltips in the chart do not show when using uk-sortable="handle: .uk-sortable-handle".
I have done a jsfiddle so you can see it is not working at the moment.
It works if I take out the link for the uikit.css(but I need it this one).
Also it works if I remove the uk-sortable="handle: .uk-sortable-handle" from the div(but I also need this one to make the tile draggable) the tooltips come back, so I know it is something to do with uikit. Have anyone found a work around this?
Thank you for your help.
**HTML**
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!-- The next line rotates HTML tooltips by 30 degrees clockwise. -->
<script type="text/javascript">google.charts.load('45', {packages: ['table','controls','corechart','treemap','map','geochart','gauge','timeline']});</script>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.4/js/uikit-icons.min.js"></script>
<div uk-sortable="handle: .uk-sortable-handle">
<div id="chart" style="width: 400px; height: 400px;"></div>
</div>
**JS**
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var dTable2 = google.visualization.arrayToDataTable([
['Date', 'TY', 'LY'],
['04/05/19', 98.5, 94.5],
['05/05/19', 94.2, 98.1],
['06/05/19', 96.3, 98.9],
['07/05/19', 98.2, 96.5],
['08/05/19', 94.4, 95.2],
['09/05/19', 96.2, 94.5],
['10/05/19', 98.8, 97.5],
['11/05/19', 96.5, 98.1],
['12/05/19', 97.7, 98.5],
['13/05/19', 95.4, 94.3]
]);
var options = {
focusTarget: 'category',
tooltip: {isHtml: true},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#a5a5a5',
fontSize: 10
}
},
chartArea:{
top: 25,
left: 50,
width:'95%',
height:'80%'
},
height: 250,
width: 800,
backgroundColor: '#5a5959',
hAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#a5a5a5',
fontSize: 10,
fontName: 'Arial',
bold: false,
italic: false
},
},
vAxis: {
baselineColor: 'transparent',
gridlines: {
color: 'transparent'
},
textStyle: {
color: '#a5a5a5',
fontSize: 10,
bold: false
},
format: '#'
},
colors: ['#99ca3d', '#798860'],
seriesType: 'bars',
series: {1: {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
chart.draw(dTable2, options);
}
Here is the jsfiddle
https://jsfiddle.net/justme0112/kqaLmvgu/1/
I expect the tooltips to work with uikit.
I found the solution, you just need to comment line 6055 from uikit.css
.uk-sortable svg {
pointer-events: none;
}
That was making the hover not appear on the google chart.
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 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]
Here is my HTML and JS. I have tried putting the padding on both bottomWrapper and topList, but for some reason neither seems to work for padding-right. The other styles seem to be fine. Nothing is floated or anything that I know of. Any ideas? This is a WebView for Android, but really shouldn't matter in this case I get the same behavior when I just render this code in a browser.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 157, 1167, 587, 807, 397, 623]
]);
var options = {
// title : 'Top Texters',
legendTextStyle: { color: 'white' },
// titleTextStyle: { color: 'white' },
vAxis: {
title: "Points",
titleTextStyle: { color: 'white' },
textStyle:
{color: 'white'},
},
hAxis: {
title: "Month",
titleTextStyle: { color: 'white' },
textStyle:
{color: 'white'},
},
seriesType: "bars",
series: {5: {type: "line"}},
backgroundColor: { fill:'transparent' }
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body style="background-color:#02071D;">
<div id="topWrapper" style="width:100%;">
<h1 style="color: white; padding-left: 22px; margin-bottom: -28px;">Top Texters</h1>
<div id="chart_div" style="width: 80%; height: 350px;margin:0 auto;"></div>
</div>
<div id="bottomWrapper" style="width:100%">
<div id="topList" style="width:100%;height:200px;background-color:#FFFFFF;padding:15px;"></div>
</div>
</body>
</html>
The div is droped out of the browserwindow. Just give the div with the padding a box-sizing: border-box; and all is fine!