I'm trying to render a partial in my app, but for some reason it will not render. I think it has to do with my asset pipeline and the fact that I am not correctly implementing the JavaScript I want to use in my partial. A test partial with a simple sentence works just fine. Can someone direct me in the proper use of JavaScript in my app?
Here is a jsFiddle of what I am trying to show: http://jsfiddle.net/yZQg4/
Problematic partial:
<%= javascript_include_tag "highcharts", "exporting", "jquery-1.4.2.min", "rails" %>
<script type="text/javascript" charset="utf-8">
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'panel_contents',
type: 'column'
},
xAxis: {
categories: ['Automotive', 'Agency', 'Contractor', 'Country Club', 'Other']
},
yAxis: {
min: 0,
title: {
text: 'Business Summary'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: 100,
verticalAlign: 'top',
y: 0,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Mobile',
data: [5, 3, 4, 27, 2]},
{
name: 'Foursquare',
data: [2, 2, 3, 2, 1]},
{
name: 'Facebook',
data: [3, 4, 4, 2, 5]},
{
name: 'Yelp',
data: [3, 4, 4, 2, 5]},
{
name: 'Google',
data: [3, 4, 4, 2, 5]}]
});
});
});
</script>
Working test partial:
<h1> hello world </h1>
Thanks!
Add before the javascript code this:
<div id="panel_contents"></div>
P.S. Besides it's better move javascript inclusion out of partial or using a content_for
I just recreated the file in TextEdit, and it worked. For some reason TextMate was secretly adding this to the file: .
Related
i want to represent two categories of data in stacked column chart. Though i am able to get one column with stacks showing its sub category data.Below is the code i am trying
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
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]
}]
});
});
I want a chart which can full fill below mentioned requirement. I want to show month wise purchase of 4-wheeler(cars) and 2-wheeler(bikes and scooter) sale monthwise for example for month of october if we have data for cars as ford=25,Maruti=30,Honda=20,BMW=15 and for 2-wheeler Bajaj=70,Yamaha=60,Honda=40,Suzuki=10. Now i want my chart to show each 4-wheeler as one stacked column showing all its data(Ford,Maruti,Honda,BMW) as its stacks and same for 2-wheeler . Any help will be appreciated.
I advice to familiar with grouped plugin, https://github.com/blacklabel/grouped_categories/ which seems to be solution of your problem. Let us know if it correct.
Whats the reason for the following chart don't render dates on the xAxis:
http://jsfiddle.net/NwkAr/
This are the settings:
{
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: [10000, 20000, 30000, 40000],
type: 'datetime'
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + this.y + '<br/>' + 'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
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]
}]
}
Remove categories, you can't use categories and datetime axis in the same time.
New to highcharts, but a simple question:
I need to mix several (say 6 or 8) small Highcharts gauges and charts on a single browser window. Is the only reliable way of doing this to create a separate div for each one and to target a separate Highcharts instance at each div?
And as a supplementary: Even if there is an alternative approach, is this multi-div approach as good as any, or are there pros and cons?
Here is how I do multiple Highcharts on the same page.
http://jsfiddle.net/no1uknow/Jb2cb/2/
Keep in mind that you'll want to use jQuery 1.9.1 and Highcharts JS 3.0.x+, if you want to support most all browsers including IE8. This jsfiddle demo will work cross browser.
There are many examples using "var chart" singular for every chart, but I like making a var container_chartname for each div container. This technique gives me a lot more control to be interactive with each chart on the fly. Like resize, update data, etc.
If you plan on using forms to build charts dynamically then you can also use "just" the javascript code in the above jsfiddle example as the json callback. This will load all the divs each time you hit submit on a form dynamically.
Stackoverflow requires me to post code here, but see jsfiddle for the full piece of code...
And of course this is just my technique, there are many others...
var container_chartCorrectiveAction = new Highcharts.Chart({
chart: {
renderTo: 'container_chartCorrectiveAction',
type: 'bar',
height: 195
},
title: {
text: 'Corrective Action'
},
subtitle: {
text: 'Sub-ATA () / ATA (20)'
},
xAxis: {
categories: ['No Defects Found-Fastener-Loose / Displaced'],
title: {
text: 'Action'
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Count',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Count';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Heavy',
total: '0',
data: [null]
},{
name: 'Intermediate',
total: '0',
data: [null]
},{
name: 'Line',
total: '0',
data: [null]
},{
name: 'Lite',
total: '1',
data: [1]
}]
});
var container_chartAtaFleetAvg = new Highcharts.Chart({
chart: {
renderTo: 'container_chartAtaFleetAvg',
type: 'bar',
height: 185
},
title: {
text: 'Fleet Average'
},
subtitle: {
text: 'ATA (20)'
},
xAxis: {
categories: ['Fleet Average'],
title: {
text: ''
},
labels: {
style: {
width: '12000px'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Average',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+ this.series.name +': '+ this.y +' Average';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
},
series: {
pointWidth:10,
groupPadding: .05,
shadow: true
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
floating: false,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true,
labelFormatter: function() {
return '<div class="' + this.name + '-arrow"></div><span style="font-family: \'Advent Pro\', sans-serif; font-size:12px">' + this.name +'</span><br/><span style="font-size:10px; color:#ababaa"> Total: ' + this.options.total + '</span>';
}
},
credits: {
enabled: false
},
exporting: {
enabled: true
},
series: [{
name: 'Intermediate',
total: '0.35',
data: [0.35]
},{
name: 'Lite',
total: '0.3',
data: [0.30]
},{
name: 'Heavy',
total: '0.1',
data: [0.10]
}]
});
You can also use many series in one div. http://jsfiddle.net/sbochan/wzprF/
It seems that the only way to do this is to have a container by chart.
In my own opinion, I don't think a multi-div approach is a bad idea. Just be careful about the id you will give to the div.
But you can create a clean code, on the javascript side. When you create many charts (6 or 8 is a lot...), you have to avoid code duplication... (At least to limit duplication)
There is a good way to do this with jQuery.extend() and Highcharts.setOptions : Manage multiple highchart charts in a single webpage
Make sure your div containers are formatted as this
<div ... ></div>
and not
<div ... />
as it may not render properly.
I have the following HighChart code. I would like to make the data & categories available through an object rather than hard coding it, so that at a later point I can dynamically get the data and assign to the object. Please let me know the necessary changes that needs to be made for this purpose. Thanks in advance.
$('#stackedChartContainer').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['IAS', 'Funding', 'Gilts', 'BuyOut']
},
yAxis: {
min: 0,
title: {
text: 'Millions'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Pensioners',
data: [800000000, 904080340, 961576651, 998929115]
}, {
name: 'Deferreds',
data: [700000000, 925466733, 1063478804, 1158224555]
}, {
name: 'Active',
data: [200000000, 265524863, 305739877, 333386521]
}]
});
You can use addSeries / addPoint / setData functions which allows to modify data / series. Categories can be modified by setCategories() function. All of them are documented here: http://api.highcharts.com/highcharts
In case when you would like to dynamically get data i.e from server/database etc, you can use ajax calling.
Example of it are avaiable here: http://docs.highcharts.com/#preprocessing
When I place this in my base application html.haml file:
= javascript_include_tag :defaults, 'jquery-1.3.2.min', 'highcharts'
<!--[if IE]>
javascript_include_tag 'excanvas.compiled'
<![endif]-->
%script{:type => "text/javascript"}
$(document).ready(function() {
= yield :javascripts
});
I get a textual description of a graph that is supposed to appear visually:
$(document).ready(function() { var chart = new Highcharts.Chart({ chart: { margin: [50, 30, 0, 30], renderTo: 'pie-chart-container' }, credits: { text: 'Data provided by NETMARKETSHARE', enabled: true, href: 'http://marketshare.hitslink.com/browser … px?qprid=3' }, legend: { style: {left: 'auto', right: '50px', top: '75px', bottom: 'auto' }, layout: 'vertical' }, plotOptions: { pie: {dataLabels: {color: 'white', enabled: true, formatter: function() { if (this.y > 15) return this.point.name; }, style: {font: '10pt Helvetica', textShadow: '#000000 1px 1px 2px' } } } }, series: [ {type: 'pie', data: [{y: 3.57, identifier: 'applewebkit', name: 'Safari'}, {y: 22.32, sliced: true, identifier: 'gecko', name: 'Firefox'}, {y: 56.9, identifier: 'msie', name: 'Internet Explorer'}, {y: 17.21, name: 'Other'}]} ], subtitle: { text: 'January 2010' }, title: { text: 'Browser Market Share' }, tooltip: { formatter: function() { return "" + this.point.name + ": " + this.y + " %"; } }, xAxis: { title: {text: '' } }, yAxis: { title: {text: '' } } }); });
I recommend contacting the project owner by filing an issue on the github project.
You need to place that script in the layout or some other erb file.
The application.js is not being parsed so you can't use inline ruby in it (or any other file residing in the public directory.