Related
How do I render superscript or subscript in a 3D chart?
Right now I'm doing like this:
xAxis3D: { scale: true, gridIndex: 0, name: "f0" },
yAxis3D: { scale: true, gridIndex: 1, name: "f1" },
zAxis3D: { scale: true, girdIndex: 2, name: "f2" },
and the y-axis label in the plot looks like this:
Instead of f2, is there any way I can label it like f₂ (similar to f<sub>2</sub> in html)?
Also, is there any way to use latex or mathjax within echarts?
As I know Echarts doesn't have this or similar features. But even if it did, it’s not enough. Need improve the zRender (visualization engine) to support this feature.
I would to recommend for you to capture the values and replace to Unicode symbol in formatter, see example:
var myChart = echarts.init(document.getElementById('main'));
var chars = ['\u00BC', '\u00BD', '\u00BE', '\u2150', '\u2151', '\u2152'];
var option = {
xAxis: [{
data: [0, 1, 2, 3, 4, 5],
axisLabel: {
formatter: (val, idx) => chars[parseInt(val)],
}
}],
yAxis: [{}],
series: [{
name: 'Series',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
Addition:
Online Converter LaTeX expression to Unicode
Ready to use library on npm
P.S. Just for my: have you ever seen JS-charts with embedded Latex?
I would like to use highstock but I can't seem to get it to work... my code:
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) {
// create the chart
var options = {
chart: {
alignTicks: false,
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
};
});
var chart = new stockChart(options);
});
The browser doesn't display anything and if I go to look at the error;
stockChart is not defined(…)
I have also tried the code from this JSFiddle, but it didn't work either. So i tried to use the options, but this doesn't work as well.. Could someone help me out?
You need to add the HighStock JavaScript library before your initialisation script:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
Alternatively, as given in the fiddle, you can use this to initialise:
chart = Highcharts.stockChart('container', options);
You are calling the function stockChart as a constructor function using the keyword "new". The reason you get a "is not defined error" is because in your code, that stockChart function is nowhere to be found!
To create one write
var stockChart = function(opt){
this.someproperty = "hello there im a stockchart"
};
With this function, you can then "new" the stockChart
var my_stockchart = new stockChart();
Now you can use your newly formed my_stockchart object and call its methods. Try it in your console.
my_stockchart.someproperty
returns => "hello there im a stockchart"
Now if you want the quick and dirty answer, I guess other people got you covered. So basically what it comes down to is that you're calling a function that is not yet defined in your code. Hope this helps.
Use Highcharts.stockChart or new Highcharts.StockChart.
Also, you create a new chart before the data is received (get.json works asynchronously) and you try to access options which is defined in a different scope.
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-v.json&callback=?', function (data) {
// create the chart
var options = {
chart: {
alignTicks: false,
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Volume'
},
series: [{
type: 'column',
name: 'AAPL Stock Volume',
data: data,
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
};
var chart = Highcharts.stockChart(options); // alternatively new Highcharts.StockChart(options);
});
});
When i tried to pass the string value(data) to highchart series, it return blank chart. How to use the String value in series in highchart jquery plugin.
var data="{name: 'Jane',data: [1, 0, 4]},{name: 'John',data: [5, 7, 3]},{name: 'RAHUL', data: [1, 5, 4]}";
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series:[data]
});
Note: the data will be passed as dynamic.
Check this : http://jsfiddle.net/prathi89/FDjq7/26/
JSON.parse() is not working for you as your data is not a valid JSON string.
There is a trick, however, to force JavaScript to parse that kind of strings:
var data="{name: 'Jane',data: [1, 0, 4]},{name: 'John',data: [5, 7, 3]},{name: 'RAHUL', data: [1, 5, 4]}";
console.log(Function("return [" + data + "];")());
This is not clean and considered harmful, so if you can get your data in a valid JSON format - do it instead.
http://jsfiddle.net/neustroev_ai/FDjq7/27/
Server is sending back data like this:
{"barData":
[
{"Accepted":[0,0,0]},
{"Rejected":[0,0,0]},
{"In_Process":[0,1,0]}]
}
In the browser, it shows up as such:
My perhaps (and very likely) incorrect belief was that this was the correct structure to populate a Highcharts stacked bar chart as seen here:
Example Stacked Bar in jsFiddle
The example in the documentation shows a fixed data set that appears like this:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
This is what I was attempting to emulate. So, at the end of all that, I get a zero plot. My Javascript looks like this:
$.ajax({
url : 'http://localhost:8080/afta/report/transfersbynetwork',
success : function(point) {
data = [];
$.each(point.barData, function(itemNo, item) {
data.push([ item[0], parseInt(item[1][0]), parseInt(item[1][1]), parseInt(item[1][2])]);
});
barchart = new Highcharts.Chart(baroptions);
baroptions.series[0].data = data;
},
cache : false
});
So where did I bone this up? I'm getting no plot and am quite convinced the problem is either in my presentation of the data from the server (possible) or in the javascript that's parsing the data structure and loading the series (highly likely).
Any insight would be appreciated.
Based on your structure, you need to change your function to process the data:
$(function () {
var point = {
"barData": [{
"Accepted": [1, 2, 3]
}, {
"Rejected": [3, 4, 5]
}, {
"In_Process": [0, 1, 0]
}]
},
data = [];
$.each(point.barData, function (itemNo, item) {
for (var prop in item) {
data.push({
name: prop,
data: [parseInt(item[prop][0]), parseInt(item[prop][1]), parseInt(item[prop][2])]
});
}
});
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: data
});
});
http://jsfiddle.net/9jVJb/
I am attempting to use a different symbol for one of my data series on my flot graph as it is at a much larger scale then the rest of the data. I am using this example as reference: http://www.flotcharts.org/flot/examples/symbols/index.html
Here is what I have so far:
My includes:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
I then configure my flot options like so:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
series: { points : { show: true } }
};
I then actually plot the data:
$.plot('#placeholder', [{
data: my_data,
lines: { show : true},
points: { symbol: "square"},
color: '#CB4B4B',
label: 'My Data'
}], options);
}
However, flot is still graphing the points as the default circle. I get no error messages in firebug and I have even tried adding a logging message in the jquery.flot.symbol.js library itself to see if the "square" handler is even being called like so:
var handlers = {
square: function (ctx, x, y, radius, shadow) {
console.log("Square handler was called");
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.rect(x - size, y - size, size + size, size + size);
},
I am getting no console messages so I am assuming the handler is not getting called correctly. Am I missing something here?
EDIT:
Example of data I am trying to plot:
var d1 = [
[1364342400000, 208],
[1364346000000, 107],
[1364353200000, 42],
[1364371200000, 1680],
[1364360400000, 52],
[1364349600000, 67],
[1364385600000, 1118],
[1364367600000, 163],
[1364382000000, 1359],
[1364378400000, 1468],
[1364389200000, 1023],
[1364356800000, 63],
[1364374800000, 1601],
[1364392800000, 556],
[1364364000000, 84],
],
d2 = [
[1364342400000, 86],
[1364346000000, 42],
[1364353200000, 13],
[1364371200000, 458],
[1364360400000, 10],
[1364349600000, 22],
[1364385600000, 453],
[1364367600000, 45],
[1364382000000, 369],
[1364378400000, 379],
[1364389200000, 358],
[1364356800000, 17],
[1364374800000, 471],
[1364392800000, 147],
[1364364000000, 16],
],
d3 = [
[1364342400000, 7],
[1364346000000, 5],
[1364382000000, 11709],
[1364371200000, 58336],
[1364360400000, 1],
[1364349600000, 1],
[1364367600000, 2],
[1364389200000, 1191],
[1364378400000, 9085],
[1364385600000, 4688],
[1364374800000, 9386],
[1364392800000, 1140],
[1364364000000, 1],
];
I have also edited my options parameter and how the plot function is called:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1}
};
$.plot("#placeholder", [{
data: d1,
lines: { show : true },
points: { show: true},
color: '#EDC240',
label: "d1"
}, {
data: d2,
lines: { show : true },
points: { show : true},
color: '#AFD8F8',
label: "d2"
}, {
data: d3,
yaxis: 2,
lines: { show : true},
points: { show: true, symbol: "square"},
color: '#CB4B4B',
label: "d3"
}], options);
I am also sure that the symbol library is being included because I have added some logging itself to the library and that is showing up fine.
I see no issue with what you've done. I made a quick working example here: http://jsfiddle.net/ryleyb/shLtU/1/
I would guess that you haven't included the symbol library (even though you say you have).
Or show your data, might somehow be an issue there (doubtful?).
This is the full flot code I ran to make a working example (plus including flot and the symbol library):
$.plot('#placeholder', [{
data: [
[1, 1],
[2, 3],
[4, 4],
[5, 9]
],
lines: {
show: true
},
points: {
show: true,
symbol: "square"
},
color: '#CB4B4B',
label: 'My Data'
}]);