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;
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'm using Billboard.js (https://naver.github.io/billboard.js/) to display my data in a line graph.
In my html, I'm declaring my graph before a table and I want it to appear before said table, but it's is loading beneath the table.
How would I force the chart to appear above the table?
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="~/Scripts/billboard.js"></script>
<link rel="stylesheet" href="~/Content/billboard.css">
<link rel="stylesheet" href="~/Content/insight.css">
<script type="text/javascript">
var chart = bb.generate({
data: {
x: "x",
xFormat: "%Y-%m-%d %H:%M",
columns: [
["x"#Html.Raw(Model.FirstOrDefault().List_GraphTime)],
["#Html.Raw(Model.FirstOrDefault().Name_Temp_5m)"#Model.FirstOrDefault().List_Variable_5m]
]
},
axis: {
x: {
type: "timeseries",
tick: {
format: "%Y-%m-%d %H:%M"
}
}
},
legend: {
position: "right"
},
zoom: {
enabled: {
type: "drag"
}
},
size: {
height: 600
},
padding: {
right: 260,
left: 260
},
bindto: "#chart"
});
</script>
</head>
<div id="chart"></div>
<table class="table wb-tables table-striped table-bordered">
<thead>
<tr>
<th>Update Date</th>
<th>Water Temp 5m (°C)</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#Html.DisplayFor(modelItem => item.LastUpdateTime)</td>
<td>#Html.DisplayFor(modelItem => item.Variable_5m)</td>
</tr>
}
</tbody>
</table>
Is because you're generating chart before the bind element is rendered.
Try move your generation code to happen after the bind element is rendered as follows.
<head>
...
<!-- (1) Move the generation code from -->
<script type="text/javascript">
var chart = bb.generate({ ... });
</script>
</head>
<body>
<div id="chart"></div>
<table class="table wb-tables table-striped table-bordered"></table>
<!-- (2) to this point, where after the '<div id="chart">' is rendered -->
<script type="text/javascript">
var chart = bb.generate({ ... });
</script>
</body>
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.
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();