Working Plot Without Using CSV Data
Using this example:
http://jsfiddle.net/grw3hamv/
I wrote the following code to plot a simple ohlc chart:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.stockChart('chart-container', {
chart: {
type: 'ohlc'
},
title: {
text: 'OHLC Chart W/O CSV'
},
series: [{
data: [{
//date: 2016-08-01,
x: new Date('2015-08-01').getTime(),
open: 22,
high: 40,
low: 20,
close: 35,
}, {
// date: 2016-08-02,
x: new Date('2015-08-02').getTime(),
open: 32,
high: 50,
low: 30,
close: 45
}]
}]
});
</script>
Experimenting with "null" values in the open and close fields shows that the application tolerates null values for open but does not print the bar if there is a null value for the close field.
Example of Using CSV in PRE Block
This example code uses embedded csv data to generate an "areaspline" chart via highcharts:
http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/data/csv/
Unable to Plot OHLC Chart from CSV in PRE Block - (Solved!)
I am trying to embed csv data into the html and generate an "ohlc" style chart from the csv data. The html/script code below runs locally in Firefox. The result shows the chart layout except no data bars appear in the plot. (Edit: The code below now works due to solution provided in comment section).
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="chart-container" style="width: 400px; height: 400px; margin: 0 auto"></div>
<pre id="csv" style="display: none">
x,open,high,low,close
1524787200000,179,180.48,178.16,178.50
1525046400000,179,180.615,178.05,178.80
</pre>
<script>
Highcharts.stockChart('chart-container', {
chart: {
type: 'ohlc'
},
title: {
text: 'OHLC Chart from CSV?'
},
data: {
csv: document.getElementById('csv').innerHTML
}
});
</script>
The next effort will be to convert the date format in the CSV data to the timestamp format which is output from the example command: new Date('2015-08-02').getTime().
I want to plot data with my X-axis representing Timespans (elapsed times), not actual dates.
I have a series with the following (string) values:
times: "00:00:00", "00:01:00", "00:10:00", "00:11:00"
I parse these values into (int)
times: 0, 6000, 60000, 66000
But when I draw the graph, the hour field is wrong. It shows "2" instead of "0" or "00". Minutes and seconds seem fine:
Here is my json code. I played with the Hours field, with no success:
// Description of the graph to be displayed
vm.chartJson = {
type: 'line',
scaleX: {
transform: {
type: 'date',
all: '%H:%h:%G:%g:%i:%s'
}
},
series: [{ values: data }]
};
How can I display the Hours field, while still manipulating TIMES and not Datetimes? How would that go if the total number of hours goes above 24? I would be okay with either displaying the total number of hours, or adding a day field. Example:
"124:22:01" or
"5:4:22:01"
Thank you
One issue I can note is we take time in milliseconds. So one minute = 60000 milliseconds. This could be the first thing off. Tack on a zero to the end of all your values.
The second issue, I cannot duplicate your times exactly because your local machine timezone is being used and I think mine is different. We have attributes that account for this, but it may not be necessary. Read further.
You cannot display 124 hours natively in the library. Depending on your input data you can just format and plot your own values with a custom x-axis label and tokens. Since you seem to already have the string format you want, why not just continue to use that?
var customLabels = ['00:00:00', '00:01:00', '00:10:00','00:11:00'];
var myConfig = {
type: 'line',
scaleX: {
labels: customLabels
},
tooltip: {
textAlign: 'left',
text: '%kl<br>OR<br>%data-dates: %v'
},
series: [
{
values: [475, 420, 400, 500],
dataDates: customLabels, // one for each point in values array
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
Relative Documentation:
demo link
tokens. Third one down in the grid is custom tokens starting with data-.
tooltips
scales
Here is what I did to solve the issue:
// Determine the format of x-axis
var format = '%i:%s';
if (data[data.length - 1][0] >= 3600000) format = '%G:%i:%s';
// Description of the graph to be displayed
vm.chartJson = {
type: 'line',
scaleX: {
transform: {
type: 'date',
all: format
}
},
series: [{ values: data }],
"utc": true,
"timezone": 0
};
I can't display Hours more than 24, so I could display days if needed.
Does anyone know of an Echarts (http://echarts.baidu.com) example that:
Only uses english characters
Correctly imports all the necessary includes from a local directory structure
Works
All the Echarts examples are presented very nicely but there are no examples that show how to deploy and run it locally (in English) that (and this is rather important) actually work.
From my many 'copy and paste' then edit efforts I just get endless file not found messages and mysterious characters all over the place (to be fair they are Chinese characters but I only see them as mysterious squiggles). I've also downloaded the github sampes and searched Google but with no success.
The library looks absolutely brilliant but I can't decipher it :(
A single .jsp page example in English (that works) would be great. Anyone know where I can find one?
Thanks
I know there is already an accepted answer, but I thought I would add a link for people reading this question.
The new version of the echarts documentation (echarts 3.4.0 as of writing this) has been converted into english.
They have all the documentation including options, the api code, downloads, and many examples all in english (with a codepen type development area that you can test out your options and see the results in real time).
The entry page can be found here:
https://ecomfe.github.io/echarts-doc/public/en/
The library can be downloaded here:
https://ecomfe.github.io/echarts-doc/public/en/download.html
The getting started tutorial can be found here:
ecomfe.github.io/echarts-doc/public/en/tutorial.html
The multitude of options can be found here:
ecomfe.github.io/echarts-doc/public/en/option.html
A plethora of examples can be found here:
ecomfe.github.io/echarts-examples/public/index.html
An simple bar chart example and their codepen playground can be found here:
ecomfe.github.io/echarts-examples/public/editor.html?c=bar-tick-align
Below I have pasted their simple bar chart into the window for your viewing pleasure:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 250px;"></div>
<script type="text/javascript">
var chart = document.getElementById("container");
var myChart = echarts.init(chart);
var option = {
title: {
text: "Echarts Bar Chart"
},
legend: [
{
data: ["Hours Worked"]
}
],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name:'Hours Worked',
type:'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option, true);
</script>
</body>
</html>
Here is an example that simply works. Just save it into an HTML file and render it into your browser. No need to download or configure anything else. It uses a remote script file, and no Chinese text:
<!doctype html>
<html>
<head>
<title>ECharts Sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts-en.min.js"></script>
</head>
<body>
<div id="chart" style="width: 500px; height: 350px;"></div>
<script>
var chart = document.getElementById('chart');
var myChart = echarts.init(chart);
var option = {
title: { text: 'ECharts Sample' },
tooltip: { },
legend: { data: [ 'Sales' ] },
xAxis: { data: [ "shirt", "cardign", "chiffon shirt", "pants", "heels", "socks" ] },
yAxis: { },
series: [{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
There is an example in their github that clearly explain the way of using the chart
i just test it, it's working very well
echart Example on github
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--Step:2 Import echarts-all.js-->
<!--Step:2 引入echarts-all.js-->
<script src="js/echarts-all.js"></script>
<script type="text/javascript">
// Step:3 echarts & zrender as a Global Interface by the echarts-plain.js.
// Step:3 echarts和zrender被echarts-plain.js写入为全局接口
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸发量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
// --- 地图 ---
var myChart2 = echarts.init(document.getElementById('mainMap'));
myChart2.setOption({
tooltip : {
trigger: 'item',
formatter: '{b}'
},
series : [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode : 'multiple',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[
{name:'广东',selected:true}
]
}
]
});
</script>
</body>
</html>
Just incase devs are still looking for the english version of echarts, the cdn link below has links to the english version:
https://cdnjs.com/libraries/echarts
Works fine for me.
ECharts does offer an English version of their site, including examples and documentation, which I am guessing you did not see based on your question.
https://ecomfe.github.io/echarts/index-en.html
(At the time of this edit, they need to update their english docs to the 3.0 version of echarts).
https://ecomfe.github.io/echarts/doc/example-en.html
That being said, there are still times when you wish the entire .js and its default strings were in English, but Google Translate can help there.
If anyone is wondering. Someone did translate their entire .js to english, so that the buttons and controls appear in English. This guy also requested them to merge his 'English' version to master on github, but I guess they aren't interested yet.
I have tested his js file and it is in English. The link to the zip file is also included there. But just in case it can be found here - Download
https://github.com/ecomfe/echarts/issues/2321
The data is displayed in Chinese,Code structure and framework in English.Ignore the specific data,try to put some data what you want to show.
demon in english:
http://echarts.baidu.com/echarts2/doc/example-en.html
If someone is using echarts-for-react, here is how I solved it
toolbox: {
show: true,
orient: 'vertical',
feature: {
dataView: { show: true, title: 'Data View', readOnly: false },
restore: { show: true, title: 'Reset' },
saveAsImage: { show: true, title: "Download" }
},
}
the magic lies in the toolbox.feature.title
i have a website, one page i have successfully added an highchart.
now i copied exactly the same code to the same page, but diffrent asp page, but the first chart has disappeared and the 2nd chart is not showing.
it is giving me an error:
Uncaught Highcharts error #16: www.highcharts.com/errors/16 highcharts.js:16
Uncaught SyntaxError: Unexpected token ILLEGAL Dashboard.aspx:657
Uncaught TypeError: Object [object Object] has no method 'highcharts' Dashboard.aspx:405
Uncaught TypeError: Object [object Object] has no method 'draggable'
any ideas why am getting this.
so my code for the new chart i want:
<script type="text/javascript"
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
></script>
the chart that is working has the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function() {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Chart'
},
xAxis: {
categories: array1
},
yAxis: {
title: {
text: 'aWH'
}
},
tooltip: {
pointFormat: "Value: {point.y:.1f} mm"
},
series: [{
name: '2011-2012',
color: '#0000FF',
data: array
},
{
name: '2012-2013',
color: '#92D050',
data: array3
},
{
color: '#FF0000',
name: '2013-2014',
data: array2
}]
});
});
</script>
the 2nd chart shows.
but the first chart doesnt,
both code is in diffrent acsx page!
if you go to Given Error Link
Highcharts Error #16
Highcharts already defined in the page
This error happens the second time Highcharts or Highstock is loaded in the same page, so the Highcharts namespace is already defined. Keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file.
Check whether you copied the scripts library for highcharts second time your code should contain only one time:
<script src="http://code.highcharts.com/highcharts.js"></script>
Edit
You are trying to show charts in same div as $('#container') Here container is the Id for div. When both ascx render in a page it find the same div with Id container and render the chart which override one of it. so
Make two separate divs:
<div id="container1" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
Remove script(following) from ascx and put it in MasterPage.:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
For chart One:
$('#container1').highcharts({//other code
For chart Two:
$('#container2').highcharts({//other code
You can use this way to wrap the code which runs Highcharts.js library.:
if (!window.HighchartsUniqueName) {
window.HighchartsUniqueName = true;
// .. your code which runs Highcharts.js library here ...
}
I found it here https://stackoverflow.com/a/5154971 and it works for me.
In this way you don't need to put your script in the MasterPage if you
don't want.
Be sure to use a very unique name, since it's a global variable.
Also keep in mind that the Highcharts.Chart constructor and all features of Highcharts are included in Highstock, so if you are running Chart and StockChart in combination, you only need to load the highstock.js file or you can wrap it in the same way.
A really simple question but I could not figure it out... I tried to use jqplot to generate a line plot with vertical y axis label. Based on the example from jqplot web site, all I need is to use this plugin jqplot.canvasAxisLabelRenderer.min.js. I tried it locally, but it did not work. Can anyone give me a hint on this? Here is a demo of my problem.
Below is my code:
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = $.parseJSON($('#x_indi_val').text());
$.jqplot('chart1', [s1], {
seriesDefaults: {
showMarker:false,
pointLabels: { show:false } ,
},
series:[
{label:'Individuals'}
],
axes: {
xaxis: {
label :'Time units',
pad: 0,
},
yaxis: {
label: 'Number of individuals',
//jqplot example indicated that use the following js file can give you a vertical label, I tried locally, but it did not work
//renderer: $.jqplot.canvasAxisLabelRenderer
}
},
legend: {
show: true,
location: 'ne',
placement: 'inside',
fontSize: '11px'
}
});
});
You had a few minor yet important issues in your code, as observed in the provided demo sample:
You forgot to import the two scripts required by the label renderer:
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
You were setting the renderer of the axis rather than the label renderer of the axis:
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
Please see the code with the corrected sample.