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().
Related
I am working on a project that will display a bar chart. The bar chart is working perfectly but when I try to pass an integer php variable to javascript variable and add the variable as an element of a list isn't working. below is my code. I don't know what is wrong with my source code. I spend several hours finding for solution online but I don't get any.
Looking forward to see your response.
<html>
<head><title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container {
height: 400px;
min-width: 310px;
max-width: 800px;
margin: 0 auto;
}
</style>
<?php
//my php variable
$ab=6;
?>
<script type="text/javascript">
//assign the php variable to javascript variable
var za = <?php echo $ab; ?>;
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
// I'm putting the variable as an element below, but it's not working
data: [za, 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
For what it's worth, you should avoid interacting with javascript in this way. PHP works better when you're interacting with HTML, and let javascript be separate (this goes halfway towards using a true templating system, which you should do):
<?php
// page setup goes up here:
$ab = 6; // name your variables at little more descriptively, I don't know what this does
?>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container { height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto; }
</style>
<script type="text/javascript">
$(function () {
console.log($('#ab-variable').val());
$('#container').highcharts({
chart: {
type: 'column',
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
// We're referencing our hidden field in the HTML
data: [$('#ab-variable').val(), 3, null, 4, 0, 5, 1, 4, 6, 3]
}]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- we're including our variable here, in HTML, rather than in the javascript -->
<input type="hidden" id="ab-variable" value="<?= $ab; ?>">
<div id="container" style="height: 400px"></div>
</body>
... you can then look int the HTML and see that your hidden field has the correct value. If it's still not working, then you've got a problem with your javascript setup using highcharts.
If you write your code this way, you get the added benefit of being able to create a separate javascript file that will be cached at the client and they won't have to download it every time.
As is, it doesn't look like there's any inherent problem with your code, but re-factoring (when it's warranted) can sometimes suss out little bugs. To confirm that this code should work the way you want, I've added a console.log() call to ensure that your javascript can see your variable. To see anything more than that you'll have to provide a link to your page so we can see any errors that might be popping up.
This is my first time using highcharts alongside with jade and the MEAN stack. I am able to get the chart to work on a jsfiddle, but it will not display anything inside of the div when running locally.
this is the jsfiddle I used jade-lang to convert the jade into html so I would be able to put it into jsfiddle.
<div id="chartcon" style="min-width: 310px; height:400px; margin 0 auto"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript"></script>
<script src="http://code.highchart.com/modules/exporting.js" type="text/javascript"></script>
$(function() {
$('#chartcon').highcharts({
chart: {
type: 'column'
},
title: {
text: 'colum chart w/ neg values'
},
xAxis: {
categories: ['Apples','Oranges', 'Pears']
},
credits: {
enabled: false
},
series: [{
name: 'John',
data: [5,3,4]
}, {
name: 'Jane',
data: [2,-2,-3]
}, {
name: 'Joe',
data: [3,4,5]
}]
});
});
I am trying to do this in a single jade file, which I have been thinking may be the problem (I can't find to much on using jade with highcharts so this leads me to think it may not be compatible?)
I've got some charts of http://canvasjs.com/javascript-charts/ and they are just wonderful! I used one of them and it worked perfectly :
<script type="text/javascript">
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ip', 'quantity'],
#foreach($ipsWithBytesDates as $item)
['{{$item['ip']}}', {{$item['counts']}}],
#endforeach
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
<div id="piechart_3d" style="width: 700px; height: 350px;"></div>
Now i need a second chart - I've already got it from the website and copy & paste it in my code.. but this haven't worked like I want.. the second chart works but overwrites the whole first chart.
The first chart is a column chart and is at the top of my page.. the second chart should be at the bottom.. but it isn't, it every time just overwrites my first chart -- could anybody tell me why? I think it's because of the "window.onload" at the beginning of both chart.. but I haven't really worked with javascript.
second chart:
<script type="text/javascript">
window.onload = function () {
var secchart = new CanvasJS.Chart("chartContainer2",
{
title:{
text: "U.S Smartphone OS Market Share, Q3 2012",
fontFamily: "Impact",
fontWeight: "normal"
},
legend:{
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [
{
//startAngle: 45,
indexLabelFontSize: 20,
indexLabelFontFamily: "Garamond",
indexLabelFontColor: "darkgrey",
indexLabelLineColor: "darkgrey",
indexLabelPlacement: "outside",
type: "doughnut",
showInLegend: true,
dataPoints: [
{ y: 53.37, legendText:"Android 53%", indexLabel: "Android 53%" },
{ y: 35.0, legendText:"iOS 35%", indexLabel: "Apple iOS 35%" },
{ y: 7, legendText:"Blackberry 7%", indexLabel: "Blackberry 7%" },
{ y: 2, legendText:"Windows 2%", indexLabel: "Windows Phone 2%" },
{ y: 5, legendText:"Others 5%", indexLabel: "Others 5%" }
]
}
]
});
secchart.render();
}
</script>
<script type="text/javascript"></script>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
source code from the chartlibary:
You need to have separate containers for each chart. Each snippet you've pasted is using var chart = new CanvasJS.Chart("chartContainer",
Try setting the 2nd chart to use a different element on your page.
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
var chart = new CanvasJS.Chart("chartContainer1", ...
var chart = new CanvasJS.Chart("chartContainer2", ...
Looks like both of these charts are being rendered in an element called "chartContainer". In both code snippets there is a div at the bottom with this name. You should change the name of this div for at least one of the charts.
I am trying to implement google charts in my project.
Where I want to display marks of last x tests on bar graph.
But the issue is, user can take any number of subjects for the test like only Math and History.So I only want to show that subjects in a bar chart.
I can not display 0 since "0" might infer that user got 0 marks in that subject. I just want to include those subjects which the user gives test for.
Is this possible in google Chart or any other library ?
Here is the code:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Math', 'Science', 'History', 'Geography', { role: 'annotation' } ],
['#1', 10, 24, 20, ''],
['#2', 16, 22, 23, ''],
['#3', 28, 19, 29, '']
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I tried morris.js, but I was unsuccessful.
Any help will be appreciated. Thanks!
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.