Develop Reference

Chart.js - Font only renders after you reload the canvas

I am using Chart.js and I am trying to use a Google Font. The first time I load the page, the chart uses the default font but if I recreate the chart, then the correct font is loaded.
How do I get the font to load the first time the chart is loaded?
My HTML:
<div style="width: 100%;" id="StatsDiv">
<div id="container" style="position: relative; height:300px; width:600px; background-color:#F9F9F9; padding-top:10px;">
<canvas id="myChart" width="600" height="400"></canvas>
</div>
</div>
The loading of the font:
<link href="https://fonts.googleapis.com/css?family=Asap+Condensed:400,500,600" rel="stylesheet" />
The Javascript that does the work:
Chart.defaults.global.defaultFontFamily = 'Asap Condensed';
var myChart = new Chart(document.getElementById("myChart"), {
type: 'bar',
data: {
labels: [FundsLabel,RequestedLabel],
datasets: [
{
label: "Cleared Balance: " + parseFloat(AVBalance).toFixed(2) + " AUD",
backgroundColor: "rgba(98,203,49,0.40)",
borderColor: "rgba(98,203,49,0.75)",
borderWidth: 2,
hoverBackgroundColor: "rgba(98,203,49,0.50)",
hoverBorderColor: "rgba(98,203,49,1.00)",
data: [AVBalance, GreenRequested],
},
{
label: "Pending Balance: " + parseFloat(PDBalance).toFixed(2) + " AUD",
backgroundColor: "rgba(231,76,60,0.40)",
borderColor: "rgba(231,76,60,0.75)",
borderWidth: 2,
hoverBackgroundColor: "rgba(231,76,60,0.50)",
hoverBorderColor: "rgba(231,76,60,1.00)",
data: [PDBalance, RedRequested],
}
]
},
options: {
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: true,
zeroLineColor: '#999999',
zeroLineWidth: '1',
// color: "rgba(255,99,132,0.2)",
color: "rgba(239, 239, 239)",
},
ticks: {
// min: 0, // it is for ignoring negative step.
beginAtZero: true,
fontSize: "12",
// if i use this it always set it '1', which look very awkward if it have high value e.g. '100'.
}
}],
xAxes: [{
stacked: true,
gridLines: {
display: false,
},
barThickness: 120,
scaleLabel: {
display: true,
//labelString: 'Banks'
}
}]
},
maintainAspectRatio: false,
}
});

wrapping the chart rendering code inside document.fonts.ready.then worked for me

The chart won't load your font on the first time because it couldn't find your font (yet). But it works the second time because your font is already cached by browser.
If you want to make sure the font is working, you can do preload the font by using a hidden DOM.
.fontPreloader{
font-family: 'Asap Condensed';
position: fixed;
top: -9999px;
left: -9999px;
}
<div class="fontPreloader">-</div>
<link href="https://fonts.googleapis.com/css?family=Asap+Condensed:400,500,600" rel="stylesheet" />

Waiting for the window to load before creating the chart worked for me:
window.addEventListener('load', function() {
// An example of creating a chart, replace with your code:
var ctx = document.getElementById("myChart").getContext("2d");
var barchart = new Chart(ctx, config);
})

Different tooltips for series in FlotChart

I have Flot line chart with two dataseries. I would like to edit the tooltips independently for each series. I have tried moving the tooltip settings to the dataset part but it didn't work.
Does anyone know a solution?
$(function () {
var barOptions = {
xaxis: {
tickDecimals: 0
},
yaxes: [{
position: "left"
}, {
position: "right"
}],
colors: ["#36c6d3"],
grid: {
color: "#888888"
},
tooltip: {
show: true,
content: "Uge %x, %s: %y"
}
};
var dataset = [{
data: occData.data,
label: occData.label,
yaxis: occData.yaxis,
lines: {
show: true,
lineWidth: 1,
}
}, {
data: houseData.data,
label: houseData.label,
yaxis: houseData.yaxis,
color: 'grey',
lines: {
show: true,
lineWidth: 1,
fill: false
}
}];
$("#flot-line-chart-past").plot(dataset, barOptions);
});

I'm going to presume that you are using flot.tooltip to provide the tooltips. In which case, the content property of the tooltip configuration object can be a function as well as a format string. I quote from the documentation for the plug-in:
you can pass a callback function(label, xval, yval, flotItem) that must return a string with the format described.
So write a function that distinguishes between each label you use for the two series, and return a different format string for each.

How to Get Highcharts Sparkline to Show Up On My Page.

Below is the entire document I am using to try to generate a highcharts sparkline:
<script>
var sparkOptions = {
title: {
text: ''
},
credits: false,
chart: {
renderTo: 'container',
width: 120,
height: 20,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
skipClone: true
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
legend: {
enabled: false
},
tooltip: {
enabled: false
}
};
$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();
t.addSeries({
data: [1, 2, 3, 4, 5]
});
</script>
<div id="container" style="height: 40px; width: 200px;">
<div id="the_chart"></div>
</div>
I've been searching for hours to try to get this to work. Can anyone point out what I am doing incorrectly? I have been using this link: http://jsfiddle.net/cainmodyo/VhxDA/ along with the highcharts website: http://www.highcharts.com/demo/sparkline/. Thanks in advance for any help you can give me!

In Highcharts you have 2 ways of defining WHERE to put the chart:
Using the renderTo property of chart
calling the highcharts() function on the JQuery object of the container (ex: $('#container').highcharts({options})
In your code you are using both methods since you defined renderTo: 'container' in the sparkOptions and then called the highcharts method over another JQuery object $('#the_chart').highcharts(sparkOptions);
To make it work you should change your last lines:
$('#the_chart').highcharts(sparkOptions);
var t = $('#the_chart').highcharts();
to:
var t = new Highcharts.Chart(sparkOptions);
and the remove the extra container you have in the html, the one with id the_chart.
Also you should wrap your code into '$(function () { << HERE YOUR SCRIPT >>});' to make sure it gets executed after Highcharts is loaded.
Fiddle

Apply outer border for the highchart area chart

I am implementing the area chart as shown in the mock up, but have strict at some portion and not able to get option s that are available in http://api.highcharts.com/highcharts for configuring the chart to look as is.
Here is the mock up look.
What I have achieved so far is :
Fiddle Demo
So I could not able to achieve the
1.background color
backgroundColor: {
linearGradient: false,
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
2 . Only outer border line. (As shown in the mock up)
3 . On Hover Show All 3 labels. (As shown in the mock up)
4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.
Last Point to implement :

Well..
1.background color:
chart: {
backgroundColor: 'black', //for whole plot
name: 'IMPS',
data: [
...
], color: 'rgb(213, 156, 72)' //for one area
2 . Only outer border line. (As shown in the mock up)
yAxis: [{
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
},
gridLineWidth: 0,
minorGridLineWidth: 0
}, {
lineWidth: 1,
title: {
text: ''
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
},
gridLineWidth: 0,
minorGridLineWidth: 0,
linkedTo: 0,
opposite: true
}],
3 . On Hover Show All 3 labels. (As shown in the mock up)
tooltip: {
pointFormat: '{series.name} <b>${point.y:,.0f}</b> <br/>', //like in mock up
shared: true, //all series
crosshairs: true //vertical line
},
4 . Legend like "CPM IMPS SPEND BY TIME" with colors I mean I want to acheive same as in mock up.
so I already answered how do it in this question
Last Point to implement :
js:
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
style: {
padding: 0
},
and now you can customize your tooltip like you want:
.highcharts-tooltip>span p {
margin: 0;
}
.highcharts-tooltip>span span{
display: none;
}
#pCPM{background: rgb(87, 188, 0);}
#pIMPS{background: rgb(213, 156, 72);}
#pSPEND{background: rgb(12, 170, 226);}
Highchart's API don't allows you to set current values on axis, but you can disable default labels and put handmade labels with position absolute like I already doing with legend.
Summary FIDDLE

Dojo chart won't display after addSeries

I am trying to create a chart in dojo. The issue is, as soon as I try and add any data to the chart, the chart renders blank (no errors).
Code:
var cPosition
require(["dojox/charting/Chart","dojox/charting/themes/Claro", "dojox/charting/plot2d/Grid", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/MarkersOnly",], function(Chart, theme, Grid, Default, MarkersOnly){
cPosition = new Chart("chartPosition");
cPosition.setTheme(theme);
cPosition.addAxis("x", {
min: -180,
max: 180,
majorTicks: true,
majorTick: {length:180},
minorTick:{length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addAxis("y", {
min: -180,
max: 180,
vertical: true,
majorTicks: true,
majorTick: {length:180},
minorTick: {length:5},
majorTickStep:180,
minorTickStep:20
});
cPosition.addPlot("Grid", { type: Grid,
hMajorLines: true,
hMinorLines: true,
vMajorLines: true,
vMinorLines: true,
majorHLine: { color: "black", width: 2 },
majorVLine: { color: "black", width: 2 },
minorHLine: { color: "grey", width: 1 },
minorVLine: { color: "grey", width: 1 },
enableCache: true });
cPosition.addPlot("default", { type: MarkersOnly });
//cPosition.addSeries("series_markers", [{x:10,y:10}]);
cPosition.render();
});
If I uncomment the line:
cPosition.addSeries("series_markers", [{x:10,y:10}]);
The chart turns blank (absolutely nothing on it). If I comment the line, the grid displays correctly but, of course, no data.
What I am trying to accomplish is create an x,y grid that will display a marker that corresponds to the position of an object.