Related
The labels on my bar chart are not all showing up. maybe because it was too narrow, so they are alternating in showing up.
I tried a lot of things, nothing worked:
interval: 1
ticklength: 1
setting culture
http://www.jeroenchristens.be/ReadingLists/Graph2
<div id="chartContainer2"></div>
<script type="text/javascript">
var result2 = #Html.Raw(ViewBag.DataPoints2);
var dataPoints2 =[];
for(var i = 0; i < result2.length; i++){
dataPoints2.push({label:result2[i].x, y:result2[i].y});
}
window.onload = function () {
var chart2 = new CanvasJS.Chart("chartContainer2", {
theme: "theme2",
animationEnabled: true,
title: {
text: "series"
},
subtitles: [
{ text: "" }
],
data: [
{
zoomEnabled: true,
animationEnabled: true,
indexLabelFontFamily: "Garamond",
indexLabelFontSize: 15,
indexLabel: "{y}",
axisX: {
labelFontSize: 10,
interval: 1,
labelAngle: -70,
interlacedColor: "#F8F1E4",
tickLength: 1,
labelMaxWidth: 70
},
axisY: {
labelFontSize: 10,
interval: 1,
labelAngle: -70,
interlacedColor: "#F8F1E4",
tickLength: 1,
labelMaxWidth: 100
},
showInLegend: true,
toolTipContent: "{label} {y}",
type: "bar", //change type to bar, line, area, pie, etc
dataPoints: dataPoints2
}
]
});
chart2.render();
};
axisX and axisY are properties of chart and not dataSeries. Following code should work fine in your case.
window.onload = function () {
var chart2 = new CanvasJS.Chart("chartContainer2", {
theme: "theme2",
animationEnabled: true,
title: {
text: "series"
},
subtitles: [{
text: ""
}],
axisX: {
labelFontSize: 10,
interval: 1,
labelAngle: -70,
interlacedColor: "#F8F1E4",
tickLength: 1,
labelMaxWidth: 70
},
axisY: {
labelFontSize: 10,
interval: 1,
labelAngle: -70,
interlacedColor: "#F8F1E4",
tickLength: 1,
labelMaxWidth: 100
},
data: [{
zoomEnabled: true,
animationEnabled: true,
indexLabelFontFamily: "Garamond",
indexLabelFontSize: 15,
indexLabel: "{y}",
showInLegend: true,
toolTipContent: "{label} {y}",
type: "bar", //change type to bar, line, area, pie, etc
dataPoints: dataPoints2
}]
});
chart2.render();
}
I was developing a vue app using vue advanced webpack template and I didn't took much attention to IE browser but today I tried and I'm getting very odd errors.
I have a several sparkline charts rendered with Highcharts in the mount function of a component and I think the point where I have this error is here:
options = Highcharts.merge(defaultOptions, options);
I use babel-polyfill and my .babelrc configuration is this one:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true,
"debug": true
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs",
"dynamic-import-node"]
}
}
}
In webpack.base.config.js I have this loader configured:
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('i18n'), resolve('test'),
resolve('node_modules/webpack-dev-server/client')]
},
Any help will be appreciated, thanks!
Relevant Source of List.vue:
import createSmallCharts from './smallChart';
function refreshCharts(elements) {
createSmallCharts(elements);
}
...
mounted() {
const elements = this.$refs['currency-table-
body'].querySelectorAll('.table__price-graph');
refreshCharts(elements);
},
And the source for createSmallCharts
import * as Highcharts from 'highcharts/highcharts';
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function createSmallCharts(elements) {
const time = +new Date();
let stringdata;
let data;
let n = 0;
for (let i = 0; i < elements.length; i += 1) {
const element = elements[i];
stringdata = element.getAttribute('data-sparkline');
data = stringdata.split(', ').map(dataEl => parseFloat(dataEl));
Highcharts.SparkLine(element, {
series: [{
data,
pointStart: 1,
pointInterval: 24 * 3600 * 1000,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
},
}],
plotOptions: {
series: {
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 3,
},
},
},
},
},
tooltip: {
formatter: () => false,
},
});
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
elements.splice(0, i + 1);
setTimeout(createSmallCharts, 0);
break;
}
}
}
export { createSmallCharts as default };
Finnaly the definition of SparkLine:
import Highcharts from 'highcharts/highcharts';
Highcharts.SparkLine = function SparkLine(...params) {
const hasRenderToArg = typeof a === 'string' || params[0].nodeName;
let options = params[hasRenderToArg ? 1 : 0];
const defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible',
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
},
title: {
text: '',
},
credits: {
enabled: false,
},
xAxis: {
labels: {
enabled: false,
},
title: {
text: null,
},
startOnTick: false,
endOnTick: false,
tickPositions: [],
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false,
},
title: {
text: null,
},
tickPositions: [0],
},
legend: {
enabled: false,
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner(w, h, point) {
return {
x: point.plotX - (w / 2),
y: point.plotY - h,
};
},
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1,
},
},
marker: {
radius: 1,
states: {
hover: {
radius: 2,
},
},
},
fillOpacity: 0.25,
},
column: {
negativeColor: '#910000',
borderColor: 'silver',
},
},
};
options = Highcharts.merge(defaultOptions, options); // I think ERROR is here
return hasRenderToArg ?
new Highcharts.Chart(params[0], options, params[2]) :
new Highcharts.Chart(options, params[1]);
};
Try to import it at the top of your main.js file like this:
import 'babel-polyfill'
At least this fixed this issue for me.
highcharts can set yAxis formatter function to change yAxis format,but
using highcharts-export-server to generate image, yAxis formatter does not work.
the demo code is like this:
const exporter = require("highcharts-export-server");
const fs = require("fs");
const options = {
"xAxis": {
"categories": ['1', '2', '3', '4']
},
"yAxis": {
title: {
text: 'times'
},
plotLines: [
{
value: 0,
width: 1,
color: "#808080"
}
],
labels: {
enabled: true,
formatter: function () {
return this.value * 100
},
},
},
"series": [{
"data": [1, 3, 2, 4],
"type": "line"
}, {
"data": [5, 3, 4, 2],
"type": "line"
}]
}
const exportSettings = {type: 'png',options}
//Set up a pool of PhantomJS workers
exporter.initPool();
//Perform an export
exporter.export(exportSettings, function (err, res) {
var dataBuffer = new Buffer(res.data, 'base64');
fs.writeFile("out.png", dataBuffer, function (err) {
if (err) {
console.log(err);
} else {
console.log("save success！");
}
});
exporter.killPool();
});
any one have some suggestions?thanks!
the result:
demo result
There's a bug associated with this problem: https://github.com/highcharts/node-export-server/issues/70
However you can use the formatter function in callback export parameter like this:
{
"type": "Png",
callback: `function(chart) {
chart.yAxis[0].update({
labels: {
enabled: true,
formatter: function() {
return this.value * 100
}
}
});
}`,
options: {
"xAxis": {
"categories": ['1', '2', '3', '4', '5']
(...)
Notice that the whole function is a String.
I'm new to highcharts, but I seem to have an issue with the display of the large heatmap. The colors in the legend don't seem to match the colors in the actual chart.
The following is my chart configuration code.
function load_team_effort_by_day_of_week_heat_map(ele, config)
{
var self = $(ele);
var days = ["Monday", "Tuesday", "Wednesday", "Thursday","Friday", "Saturday", "Sunday"]
load_data(self, function(response)
{
var div = $("<pre/>")
.attr("id","csv")
.css("display","none");
div.html(response.data);
$("body").append(div);
var chart_container = self.attr("chart-container");
$("#"+chart_container).css("width","100%");
var min = new Date(response.min)
var max = new Date(response.max)
var max_value = response.max_range
var mid_range = parseFloat(max_value/4);
Highcharts.chart(chart_container, {
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: '',
align: 'left',
x: 40
},
subtitle: {
text: '',
align: 'left',
x: 40
},
xAxis: {
title: {
text: config.xlabel
},
type: 'datetime',
min: Date.UTC(min.getFullYear(), min.getMonth(), min.getDate()),
max: Date.UTC(max.getFullYear(), max.getMonth(), max.getDate()),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%b-%d-%Y}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: config.ylabel
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 1, 2, 3, 4, 5, 6],
tickWidth: 1,
min: 0,
max: 6,
reversed: true
},
colorAxis: {
stops: [
[0, '#EEEEEE'],
[mid_range, '#00ee33'],
[max_value, '#00ee33']
],
min: 0,
max: max_value,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}'
}
},
tooltip: {
formatter: function () {
var d = new Date(this.point.x)
var todate=d.getDate();
var tomonth=d.getMonth()+1;
var toyear=d.getFullYear();
var original_date=tomonth+'/'+todate+'/'+toyear;
return '<b>' + original_date + ', <b>' +
this.point.value + '</b> on <br><b>' + days[this.point.y] + '</b>';
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EEEEEE',
colsize: 7 * 24 * 36e5, // one week
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
});
self.parents('.white-background').removeClass("loadingdv");
self.parents('.white-background').find(".lodimg").remove();
//Remving extra div for legends on rite side
self.parents('.white-background').find(".legendcontainer").remove();
});
}
I'm trying to create a highstock chart which has some of the points flagged with a circle. All the points in the chart have a tooltip as you hover over the chart.
However the tooltip for the points that have a flag should be one from the flag. I've been trying to see if highstock has an API through which I can say whether tooltip should be displayed on not based on the condition that the point has a flag or not. However, I'm stuck on how to find if a point has a flag or not.
Here a fiddle of my example : http://jsfiddle.net/ulhas87/WSDza/
{
rangeSelector: {
selected: 1
},
title: {
text: 'USDtoEURexchangerate'
},
yAxis: {
title: {
text: 'Exchangerate'
}
},
tooltip: {
formatter: function(){
console.log(this);
if(this.point){
//if this point has a flag then return false
//else return the tooltip for this point
return this.y;
}else{
//this is a flag - hence return the flag tooltip
return this.y;
}
},
},
series: [
{
name: 'USDtoEUR',
data: data,
id: 'dataseries',
tooltip: {
valueDecimals: 4
},
followPointer: false
},
{
type: 'flags',
data: [
{
x: Date.UTC(2011,
1,
14),
title: '',
text: 'Shape: "circle"'
},
{
x: Date.UTC(2011,
3,
28),
title: '',
text: 'Shape: "circle"'
}
],
onSeries: 'dataseries',
shape: 'circle',
width: 1,
height: 1,
y: -4,
states: {
hover: {
fillColor: '#395C84'//darker
}
},
point: {
events: {
mouseOver: function(){
console.log(this);
}
}
},
zIndex: 10
},
{
type: 'flags',
data: [
{
x: Date.UTC(2011,
2,
10),
title: 'C',
text: 'Shape: "flag"'
},
{
x: Date.UTC(2011,
3,
11),
title: 'C',
text: 'Shape: "flag"'
}
],
color: '#5F86B3',
fillColor: '#5F86B3',
onSeries: 'dataseries',
width: 16,
style: {
//textstylecolor: 'white'
},
states: {
hover: {
fillColor: '#395C84'//darker
}
},
marker: {
fillColor: '#000000'
}
}
]
}
Appreciate any help. Thanks
The problem is that your cherries are not the same as you are using for a flags. See updated version: http://jsfiddle.net/WSDza/3/
Also, I advice to set lower hideDelay to observer that point doesn't have tooltip.