Is it possible to apply gradient color to area(filled-line) charts in nvd3.
I have seen a workaround in d3 charts, using the svg object.
But is there a simpler way to do this, or any hack to get the same done?
Too little info in your question, however here below is an example of area chart with gradient.
This is based on SVG Gradients:
<svg>
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
</svg>
After Gradient definition in SVG use it in CSS like this:
.nv-area { fill: url(#grad3) }
var data = [{
"key": "Quantity",
"bar": true,
"area": true,
"values": [
[1301544000000, 2000],
[1304136000000, 2500],
[1306814400000, 1800],
[1309406400000, 2100],
[1312084800000, 2100],
[1314763200000, 2800]
]
}]
nv.addGraph(function() {
chart = nv.models.lineChart();
chart.margin({
left: 100,
bottom: 100
}).useInteractiveGuideline(true).showLegend(true).duration(250);
chart.xAxis.axisLabel("Date").tickFormat(function(d) {
var date = new Date(data[0].values[d][0]);
return d3.time.format("%b-%e")(date);
});
chart.yAxis.axisLabel('Quantity').tickFormat(d3.format(',.2f'));
chart.x(function(d, i) {
return i
})
.y(function(d) {
return d[1]
})
chart.showXAxis(true);
d3.select('#chart svg').datum(data)
.transition().call(chart);
return chart;
});
#chart svg {
height: 400px;
}
.nv-area { fill: url(#grad3) }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<link href="https://rawgit.com/novus/nvd3/master/build/nv.d3.css" rel="stylesheet"/>
<div id="chart">
<svg>
<defs>
<linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
</svg>
</div>
Related
The legend labels are not in the DOM when using time series data.
I have around 1500 data points. Here is reduced it to 3 because it seems like the amount of data points is not the cause of the issue.
Is this a bug or did I misconfigure something?
I also tried using a separate div for the legend (like described here but it seems to have no effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AmCharts</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="http://cdn.date-fns.org/v2.0.0-alpha0/date_fns.min.js"></script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<style>
html, body {
font-size: 16px;
}
#chartdiv,
#legenddiv {
width: 100%;
height: 500px;
border: 1px dotted #c99;
margin: 1em 0;
}
#legenddiv {
height: 150px;
}
</style>
</head>
<body>
<div id="chartdiv"></div>
Legend:
<div id="legenddiv"></div>
<script src="./main.js"></script>
</body>
</html>
am4core.ready(function () {
am4core.useTheme(am4themes_animated); // theming
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [{
"date": 1574861644000,
"value": 13505
},
{
"date": 1574861645000,
"value": 13505
},
{
"date": 1574861645000,
"value": 13492
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = { timeUnit: "second", count: 1 };
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.tooltipText = "{value}";
series.tooltip.pointerOrientation = "vertical";
chart.cursor = new am4charts.XYCursor();
chart.cursor.snapToSeries = series;
chart.cursor.xAxis = dateAxis;
// create a legend for the sensors
chart.legend = new am4charts.Legend();
let legendContainer = am4core.create("legenddiv", am4core.Container);
legendContainer.width = am4core.percent(100);
legendContainer.height = am4core.percent(100);
chart.legend.parent = legendContainer;
}); // end am4core.ready()
By default the legend will look at the series' name property to use as the legend label as documented here. Adding this to your series will fix the problem, e.g. series.name = "Series #1"
I just can't figure out why is there allways at least one category missing from my chart:
This does not happen when I switch chart type to type:'pie'.
Please find my code below:
<!DOCTYPE html>
<html>
<body>
<div style="width: 40%;">
<canvas id="polarAreaChart " width="400" height="400"></canvas>
</div>
<script>
var ctx = document.getElementById("polarAreaChart ");
var polarAreaChart = new Chart(ctx, {
type: 'polarArea',
options: {
legend: {
display: true,
position: 'bottom',
}
},
data: {
labels: ["D1","D2","D3"],
datasets: [{
label: 'Dimensiones',
data: [40, 20, 40],
backgroundColor: [
"#f8b195",
"#c06c84",
"#6c5b7b"
]
}]
}
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>
</body>
</html>
Any comments will help.
Cheers!
Apparently it was just a bug.
Solved it by using a more recent version of Chartjs:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js
I'm new here, referred by a friend. I'm working with Google Charts, connecting to a Google sheet. I've got the chart working fine. The next step is adding a toolbar to the bottom of it. BUT, I cannot get the code to work, no matter what. I've even tried copying and pasting Google's example code into a blank page just to test, but I can't even get their example to show. Is there something missing from the documentation that's preventing this?
Here's my 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>
<!-- datasheet link https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/edit?usp=sharing
https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/pubhtml
-->
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawAll() {drawChart(); drawToolbar();}
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'titleTextStyle': {fontSize: '24', color: 'teal'},
//'width':800,
'height':600,
hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}},
vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}},
legend: {'position': 'top'},
series: {
0: {pointsVisible: true, color: 'orange'},
1: {pointsVisible: true, color: 'blue'},
2: {pointsVisible: true, color: 'black'},
3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
//chart.draw(data, options);
function drawToolbar() {
var components = [
{type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
{type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
};
google.charts.setOnLoadCallback(drawAll);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<div id="toolbar_div"></div>
</body>
</html>
Seems to work here, with a couple minor adjustments.
Typically, setOnLoadCallback should only be called once per page.
Which was most likely the problem.
Here, I have defined the callback in the load statement.
// Load the Visualization API and the piechart package.
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var query = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5");
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
var data = response.getDataTable();
var options = {
'title':'College Readiness',
'titleTextStyle': {fontSize: '24', color: 'teal'},
//'width':800,
'height':600,
hAxis: {'title': 'Academic Year', 'textStyle': {bold: true, fontSize: '16'}},
vAxis: {'title': 'Percent of Students Ready', 'format': 'percent','textStyle': {color: 'gray', fontSize: '9'}},
legend: {'position': 'top'},
series: {
0: {pointsVisible: true, color: 'orange'},
1: {pointsVisible: true, color: 'blue'},
2: {pointsVisible: true, color: 'black'},
3: {pointsVisible: true, pointShape: 'square', pointSize: '14', color: 'maroon'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
var components = [
{type: 'html', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'},
{type: 'csv', datasource: 'https://docs.google.com/spreadsheets/d/1m3ujxzPQJh3haReNDzGGF73Mh6-u6HxyCVPK_5MK2hw/gviz/tq?sheet=Sheet2&range=A1:E5'}
];
var container = document.getElementById('toolbar_div');
google.visualization.drawToolbar(container, components);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="toolbar_div"></div>
<div id="chart_div"></div>
I need to alter value when user select the value from google chart dropdown,
please check the code, I need when user select subject value, then I can alert the message or selected value,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {
packages: ['controls']
});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var jsonData = '{"cols":[{"label":"Subject","type":"string"},{"label":"pete","type":"number"},{"label":"john","type":"number"},{"label":"carl","type":"number"},{"label":"andrea","type":"number"}],"rows":[{"c":[{"v":"coolness"},{"v":4.4},{"v":4.3},{"v":3.1},{"v":4.3}]},{"c":[{"v":"sexyness"},{"v":4.2},{"v":3.8},{"v":3.6},{"v":4.8}]},{"c":[{"v":"toughness"},{"v":3.1},{"v":2.7},{"v":2.4},{"v":2.9}]},{"c":[{"v":"chillnes"},{"v":4.4},{"v":4.4},{"v":4.2},{"v":4.5}]},{"c":[{"v":"madness"},{"v":4.6},{"v":4.6},{"v":4},{"v":4.6}]},{"c":[{"v":"lochness"},{"v":3.9},{"v":3.7},{"v":2.9},{"v":3.9}]},{"c":[{"v":"extraness"},{"v":4.6},{"v":4.3},{"v":3.6},{"v":4.3}]}]}';
console.log(typeof(responseText));
console.log(jsonData);
var data = new google.visualization.DataTable(JSON.parse(jsonData));
var compPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Subject',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// Define a chart
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {
'title': 'Competenties',
'width': '100%',
'height': 300,
'vAxis': {
viewWindow: {
max: 5,
min: 0
},
gridlines: {
color: '#CCC',
count: 6
}
},
bar: {
groupWidth: '80%'
},
colors: ["#FFC000", "#00b0f0", "#ff0000", "#92d050"]
}
});
// Define a table
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '400px'
}
});
// Create a dashboard
var drawChart = new google.visualization.Dashboard(document.getElementById('dashboard')).bind([compPicker], [chart, table]);;
drawChart.draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
</tr>
<tr>
<td>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
JS fiddle link
Please help me.
Thanks
Use the 'statechange' event listener to determine when values are selected...
Then compPicker.getState().selectedValues to get the selected values in an array...
google.charts.load('current', {
callback: drawVisualization,
packages: ['controls', 'corechart', 'table']
});
function drawVisualization() {
var jsonData = '{"cols":[{"label":"Subject","type":"string"},{"label":"pete","type":"number"},{"label":"john","type":"number"},{"label":"carl","type":"number"},{"label":"andrea","type":"number"}],"rows":[{"c":[{"v":"coolness"},{"v":4.4},{"v":4.3},{"v":3.1},{"v":4.3}]},{"c":[{"v":"sexyness"},{"v":4.2},{"v":3.8},{"v":3.6},{"v":4.8}]},{"c":[{"v":"toughness"},{"v":3.1},{"v":2.7},{"v":2.4},{"v":2.9}]},{"c":[{"v":"chillnes"},{"v":4.4},{"v":4.4},{"v":4.2},{"v":4.5}]},{"c":[{"v":"madness"},{"v":4.6},{"v":4.6},{"v":4},{"v":4.6}]},{"c":[{"v":"lochness"},{"v":3.9},{"v":3.7},{"v":2.9},{"v":3.9}]},{"c":[{"v":"extraness"},{"v":4.6},{"v":4.3},{"v":3.6},{"v":4.3}]}]}';
var data = new google.visualization.DataTable(JSON.parse(jsonData));
var compPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Subject',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': true
}
}
});
// listen for 'statechange' event on ControlWrapper
google.visualization.events.addListener(compPicker, 'statechange', function () {
// log selected values array
document.getElementById('message').innerHTML += JSON.stringify(compPicker.getState().selectedValues) + '<br/>';
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart1',
'options': {'title':'Competenties',
'width':'100%',
'height':300,
'vAxis': {
viewWindow: {max:5,min:0},
gridlines: {color:'#CCC', count: 6}
},
bar: { groupWidth: '80%' },
colors: ["#FFC000","#00b0f0","#ff0000","#92d050"]
}
});
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'chart2',
'options': {
'width': '400px'
}
});
var drawChart = new google.visualization.Dashboard(document.getElementById('dashboard'));
drawChart.bind([compPicker], [chart, table]);
drawChart.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<table>
<tr style='vertical-align: top'>
<td>
<div id="control1"></div>
<div id="control2"></div>
<div id="control3"></div>
</td>
</tr>
<tr>
<td>
<div style="float: left;" id="chart1"></div>
<div style="float: left;" id="chart2"></div>
<div style="float: left;" id="chart3"></div>
</td>
</tr>
</table>
</div>
<div id="message"></div>
In order to create horizontal bar charts using Chart.js I added Chart.HorizontalBar.js to my project. The problem is that bars are drawn from top to down in descending order and I need exactly the opposite.
Does anyone has an idea on how to change the order? I spend hours researching but I could not find any solution.
Thank you
drawn from top to down in descending order
<!doctype html>
<html>
<head>
<title>Horizontal Bar Chart</title>
<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<script src="../Chart.HorizontalBar.js"></script>
</head>
<body>
<div style="width: 50%">
<canvas id="canvas" class="chart-base" chart-type="type"
chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>
</div>
<script>
var barChartData = {
labels : ["Facebook Inc Class A","Amazon.com Inc","Allergan PLC"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [9,8,7]
}
]
};
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
var chart = new Chart(ctx).HorizontalBar(barChartData, {
responsive: true,
barShowStroke: false,
scaleBeginAtZero: true
//scaleLabel: "<%=label%>"
});
};
</script>
</body>
</html>
Just swap the order in the input i.e.
var barChartData = {
labels: ["Allergan PLC", "Amazon.com Inc", "Facebook Inc Class A"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [7, 8, 9]
}]
};