I am trying to create a map with a range of values that includes negative to positive.
The negative numbers in my data file change my map to all black.
What can I do?
Thanks
$(function(){
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: "#FFFFFF",
series: {
regions: [{
values: mapData,
min: jvm.min(mapData),
max: jvm.max(mapData),
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function (event, label, code) {
label.html("<div class='tooltip'><div class='ttText'><div class='ttName'>" + label.html() + "</div><div class='ttState'>" + (mapData[code]) + "%</div></div></div>")
},
regionStyle: {
initial: {
fill: '#ccc'
},
hover: {
fill: '#000'
}
}
});
});
Change your normalize function to linear:
normalizeFunction: 'linear'
Related
is there a way to reduce the width of x-axis (see picture) in c3? Even if I tried to set "stroke-width" attribute to the "<"path">" tag with different values - it didn't make any visual changes. Thank you for your advices in advance.
Picture
var chart = c3.generate({
bindto: '#' + chartId,
data: {
columns: columns,
type: 'bar',
labels: true
},
interaction: {
enabled: false
},
tooltip: {
show: false
},
color: {
pattern: colorPattern
},
bar: {
width: { ratio: 0.7 },
space: 0.25
},
size: settings.ChartSizes.BarChart,
legend: {
position: 'right',
grouped: true,
item: {
onclick: function (d) {
counter++;
if (counter === 1) {
chart.hide();
chart.show(d);
} else {
chart.show();
counter = 0;
}
}
}
},
axis: {
x: {
type: 'category',
categories: categories,
show: showAxe
},
y: {
show: false
}
}
});
This is a common issue, caused by you not picking up the c3.css file - see https://github.com/c3js/c3/issues/1962
If you can fix that, the problem goes away
I have created a chart with Chart.js, and I now need to show the data in the legend differently per the two different datasets.
How do I show the first dataset 'Low/High Range Limit' in the classic rectangle/fill style and the dataset 'Patient Results' in the point style?
(Bonus: Currently, I'm showing the second dataset near-correctly. I also want to completely fill the circle with the solid 'steelblue' color, not with transparency.)
(I would provide an image but I need at least 10 reputation to post them.)
<style>
.chart-container { width: 550px }
</style>
<div class="chart-container">
<canvas id="myChart" width="2" height="1"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script>
var context = document.getElementById('myChart');
var myChart = new Chart(context, {
type: 'line',
data: {
labels: ['(A)', '(B)', '(C)', '(D)'],
datasets: [
{
label: 'Patient Results',
data: [40, 230, 30, 60],
borderColor: 'steelblue',
borderWidth: 2,
pointBackgroundColor: 'steelblue',
fill: false,
spanGaps: true // if true, lines will be drawn between points with no or null data. if false, points with NaN data will create a break in the line.
},
{
data: [0, 30, 20, 20], // representing the low range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#fff'
},
{
label: 'Low/High Range Limit',
data: [60, 150, 50, 40], // representing the high range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#c2e8f5'
}
]
},
options: {
elements: {
line: {
tension: 0 // disables bezier curves
}
},
legend: {
labels: {
boxWidth: 6,
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex === 1) {
return false;
}
return true;
},
usePointStyle: true
},
position: 'right',
reverse: true // shows 'Low/High Range Limit' first
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
Click here for demo - https://dojo.telerik.com/#rikinshah/EQiMupoG
I have lots of elements for navigation in headers and icon buttons in footer. all of them are using svg > path elements.
I want to change color for all path elements except Kendo Chart which also contains path elements.
In css I use this to make all to use same color :
path {
fill: #4b4c4c
}
but this also changes color for Kendo chart background.
I tried using :not selector for div ID to fill path for kendo and also tried
chartArea: {
background: "#4b4c4c",
},
path: {
fill: "#4b4c4c"},
fill: {
color: "4b4c4c"}
none of this changes path for svg element in kendo graph.
<div id="kendoChart" class="demo-section k-content wide" style="margin-left: -3px;">
<div id="chart"></div>
</div>
function createChart() {
$("#chart").kendoChart({
theme: "flat",
chartArea: {
background: "transparent",
},
legendItemClick: function (e) {
e.preventDefault();
},
seriesDefaults: {
type: "column",
width: 90,
gap: 1,
},
legend: {
position: "bottom",
spacing: 15,
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
},
series: [{
data: [parseFloat(($('#room-revenue1').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue2').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue3').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue4').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue5').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue6').text()).replace(/,/g, "")),
parseFloat(($('#room-revenue7').text()).replace(/,/g, "")), ],
name: "Room Revenue",
color: "#4472c3",
width: 500,
tooltip: {
visible: true,
template: "#= series.name #: #= kendo.format('{0:C2}',value) #",
font: "12px sans-serif",
},
}, {
type: "line",
data: [$('#rooms-sold1').text(),
$('#rooms-sold2').text(),
$('#rooms-sold3').text(),
$('#rooms-sold4').text(),
$('#rooms-sold5').text(),
$('#rooms-sold6').text(),
$('#rooms-sold7').text()],
name: "Room Sold",
color: "#12ccbe",
axis: "Rooms Sold",
width: 2,
markers: { visible: true },
tooltip: {
visible: true,
template: "#= series.name #: #= value #",
font: "12px sans-serif",
},
}],
render: function (e) {
var el = e.sender.element;
el.find("text:contains(Room Revenue)")
.parent()
.prev("path")
.attr("stroke-width", 3);
el.find("text:contains(Room Sold)")
.parent()
.prev("path")
.attr("stroke-width", 0);
},
valueAxes: [
{
visible: false,
majorGridLines: {
visible: true,
width: 0.5,
dashType: "solid",
color: "#ededed"
}
},
{
name: "Rooms Sold",
color: "#4e4141",
visible: false,
line: { visible: false },
majorGridLines: {
visible: false
},
}],
categoryAxis: {
categories: [($('#date1').text()).substring(0, 3),
($('#date2').text()).substring(0, 3),
($('#date3').text()).substring(0, 3),
($('#date4').text()).substring(0, 3),
($('#date5').text()).substring(0, 3),
($('#date6').text()).substring(0, 3),
($('#date7').text()).substring(0, 3)],
labels: {
font: "12px sans-serif",
color: "#7F7F7F"
},
majorGridLines: {
visible: false,
},
},
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart(), 400);
I want to keep kendo chart background color / path fill color unchanged.
I have the following chart and I want to make the y axis spacing integers only (when the data to display is low, I get decimals: 0.1, 0.2...). Anyone can help?
var Presence = c3.generate({
bindto: '#presence',
data: {
url: 'ranking.csv',
x:'AC_YEAR',
types: {
Number_students: "bar",
Ranking: 'spline'
},
axes:{
Number_students: "y",
Ranking: "y2"
}
},
axis: {
y: {
label: {
text:"Students",
position: "outer-middle"
},
tick: {
outer: false}
},
y2: {
inverted:true,
show: true,
label: {
text:"Ranking position",
position: "outer-middle"
},
tick: {
outer: false
}
},
x: {
label: {
text:"Year",
position: "outer-center"
},
tick: {outer: false}
}
},
size: {
height: 400,
width: 800
},
});
The csv file looks like this:
AC_YEAR,Number_students,Ranking
2011,1,103
2012,2,30
2014,1,178
2015,1,188
But the csv is changing over time and sometimes the Number of students is 100. So that is why I do not want to fix values on the y axis, only avoid having floats when the Number of students is low (1 or 2)
Thanks in advance!
Set the y tick formatting function to return blanks on non-whole numbers
y: {
label: {
text:"Students",
position: "outer-middle"
},
tick: {
format: function (d) {
return Math.abs(Math.round(d) - d) < 0.001 ? d : "";
},
outer: false
}
},
I want a pie chat using jqplot which will show the exact number (not percentage) inside each slice of pie chat.
$(document).ready(function(){
var s1 = [['Sony',200], ['Samsumg',40]];
var plot8 = $.jqplot('chart1', [s1], {
seriesColors: [ "#533E6A","#B4150C"],
grid: {
drawBorder: false,
drawGridlines: false,
background: '#ffffff',
shadow:false
},
axesDefaults: {
},
seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
// sliceMargin: 2,
startAngle: -90
// diameter:30
}
},
legend: {
// show: false,
rendererOptions: {
numberRows: 1
},
location: 's'
}
});
});
Below is the jsfiddle(http://jsfiddle.net/JWhmQ/2032/) but it is showing the slice in percentage..instead i want the actual number(like 200 and 40).
You need to add
dataLabels='value'
, in the rendererOptions, as described here. I fixed your jsfiddle here.