Currently, I have a graph, and I want it so that after 3 data points, the graph is a dotted line. (Attempting to do show current data + predictions on this graph)
Current Code
<canvas id="commands"></canvas>
<script>
var ctx = document.getElementById("commands");
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["03/14","03/16","Today","Tommorow"],
datasets: [{
data: ["0","0","23","90"],
}],
},
});
</script>
I'd like it so that the line between 23-90 and any points after that is a dotted line, (this can be done for the whole graph by adding borderDash: [10,5], but I'd like it to work for only certain points.)
Update: I've found a fiddle which does this, https://jsfiddle.net/uwb8357r/, but as you can see the tooltips look really bad.
Related
enter image description here
Above when I hover over the chart it highlights the section Im hovering over with a grey border. What can I do to remove this.
You can use the hoverBorderWidth property to remove the border on hover like this:
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [
data: [//data here],
hoverBorderWidth: 0
]
},
options: options
});
So I've been trying to recreate the chart in the following image:
I'm using the cutoutPercentage property but it affects both doughnuts, in my case, I only want to change the thickness of the outer ring.
This is what I have now:
You can define the weight option on individual datasets to obtain the desired result.
weight: The relative thickness of the dataset. Providing a value for weight will cause the pie or doughnut dataset to be drawn with a thickness relative to the sum of all the dataset weight values.
Please take a look at below runnable code snippet and see how it works.
var pieChart = new Chart("myChart", {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow"],
datasets: [{
data: [300, 50, 100],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
weight: 0.2
}, {
data: [200, 100, 25],
backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
}]
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
As i am pretty new to Charting libraries and in my case i have been asked to implement a Chartjs library for my requirement. So i have chosen a chartjs library.
The use case i must want to know if anybody can help me then it would be a great time saver for me. Actually i am googleling since morning for this.
The actual use case is i have doughnut chart in which i am trying to show the data of a single value. As i have gone through the documentation the chartjs works on a array of data values. But my API is having only one value, means in my case its a counter variable. Assume if my maximum counter limit is say 5000 then i have to show that 5000 as a maximum counter and as the current counter is say 100 then i have to show it in the doughnut arc in red color. Means how much the graph has consumed the data something like that.
Assume total runs 5000
If runs became any count like 100 then we need to do minus from total runs - current runs count = 4900 inside the doughnut circle. As the runs increases then we need to show the reduced count runs inside the doughnut circle graph.
Once if the current runs count comes to total runs the show the circle in red color and make the count to 0.
Is this possible using Chartjs? See below picture.
There is no built-in support for doing this in Chart.js, however, it can be achieved using a very simple hack. Look at the code and try to understand, if any issues feel free to comment.
I have used chartjs-datalabels plugin to show datalabels on the pieChart.
Hope it helps!
Fiddle -> http://jsfiddle.net/y6mnkz84/7/
function drawPieChart(value, maxValue) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Consumed"],
datasets: [{
data: [value, maxValue - value],
backgroundColor: ['green', 'red'],
}]
},
options: {
tooltips: {
enabled: false,
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
display: function(context) {
var dataset = context.dataset;
var value = dataset.data[context.dataIndex];
return value > 0;
},
color: 'white'
}
}
}
});
}
drawPieChart(5000, 5000);
I would like to make a google chart that highlights different regions continents, or countries based on a particular grouping.
The problem is I can't figure the best way to show both continents and countries.
For instance, I'd like to have two highlighted entries: Europe and Japan.
I can use the below JS code to attempt this:
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['150', 1, 'Europe'],
['Japan', 2, 'Japan']
]);
var options = {
resolution: 'continents',
}
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, options);
};
The above code partly works- Europe is properly highlighted and labelled. However, because resolution is set to 'continents' Japan does not get highlighted. If I set resolution to 'countries' the opposite problem occurs.
So the real question:
Is there a way to highlight both Europe and Japan individually with one array entry each, or do I have to put every single European country in the list to also have Japan highlighted?
yes, you would need to put every single European country in the list to also have Japan highlighted
another option might be to draw two charts, one on top of the other,
using the following config options to allow the bottom one to show thru.
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
however, this would suppress the tooltip on the bottom chart.
see following working snippet for an example...
google.charts.load('current', {packages:['geochart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['150', 1, 'Europe']
]);
var options1 = {
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
resolution: 'continents'
}
var geochart1 = new google.visualization.GeoChart(
document.getElementById('visualization1')
);
geochart1.draw(data1, options1);
var data2 = google.visualization.arrayToDataTable([
['Region', 'Label', {role: 'tooltip', p:{html:true}}],
['Japan', 2, 'Japan']
]);
var options2 = {
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
resolution: 'countries'
}
var geochart2 = new google.visualization.GeoChart(
document.getElementById('visualization2')
);
geochart2.draw(data2, options2);
}
.geo {
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="geo" id="visualization1"></div>
<div class="geo" id="visualization2"></div>
note: jsapi should no longer be used to load the charts library,
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. The last update, for security purposes, was with a pre-release of v45. Please use the new gstatic loader.js from now on.
this will only change the load statement, see above snippet...
I have a dataset that has 1-2 entries per day and I don't want that many labels on the x-axis so I am going through them and only showing every 5th or 10nth one. My issue is I do want to show the label for each one in the tooltips. I have a second array or data with the original label set that I want to use for tooltips but can't seem to figure it out. I assume there should be a fairly simple solution for this.
Below is a simple example. I tried adding the cutom option on tooltips with the second dataset but no luck.
var labels = ["10-23-2017", "", "10-25-2017", ""];
var labels2 = ["10-23-2017", "10-24-2017", "10-25-2017", "10-26-2017"];
var chart = document.getElementById('chart').getContext('2d');
var myChart = new Chart(chart, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
label: "Readings",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: data,
}]
},
// Configuration options go here
options: {
tooltip: [{
enabled: true,
custom: labels2
}]
}
});