score:15
Accepted answer
You can use view's "render" method to initialize highcharts:
$(function () {
var DataModel = Backbone.Model.extend({});
var DataCollection = Backbone.Collection.extend({
model: DataModel
});
var DataView = Backbone.View.extend({
el: '#container',
initialize: function (options) {
this.data = options.data;
},
render: function () {
this.$el.highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: this.data.toJSON()
});
}
});
var items = new DataCollection([{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]);
var view = new DataView({ data: items });
view.render();
});
Here is live example: jsfiddle
Source: stackoverflow.com
Related Query
- Using HighCharts with Backbone
- Type 'number[]' has no properties in common with type 'XrangePointOptionsObject' in Angular8 using Highcharts
- Using a fill pattern instead of colour with HighCharts
- getting error#17 from highcharts while using solid gauge from backbone rails
- Using highcharts with rails not displaying plotLines
- Using PhantomJS to create HighCharts grahps server side for use in PDF creation (PHP) - results in exit code 11 from PHPs exec();
- Highcharts - Global configuration with common code and unique data & Headings
- creating a bar chart using Highcharts with React - getting an error that rendering div isn't found
- Timeline chart with highcharts using x-range with multiple stacks
- Using Trellis Chart with Stacked Columns in Highcharts
- Highcharts problem with xAxis using multiple series
- when printing page with highcharts using javascript this.print() width values in css in @media print seem to be ignored
- How to draw a bubble map with longitude and latitude using Highcharts in react
- Using wkhtmltopdf with highcharts shows blank chart
- Loading 'theme' and 'exporting' module with Highcharts using Requirejs
- Creating Highcharts with Angular using Highcharts >= 5.0.0 and highcharts-ng >= 1.0.0 using a ChartFactory
- Using Bootstrap Datepicker with Highcharts
- Jquery Highcharts is not loading when using with common function?
- Using Highcharts with mysql for Page Visits
- using library highcharts with asp.net mvc 3
- Drawing Bubble Chart by using npm highcharts with error #17
- Charts using Highcharts with multiple series from JSON
- Strange behavior with highcharts when using "column" type and multiple datetime series
- passing formatting JavaScript code to HighCharts with JSON
- highcharts example for using data from database with mvc
- Using Highcharts (and modules) with lit-element
- How can I make milestone lines with a GANTT chart using the highcharts library?
- dynamic highchart config in angular ui grid with angular js using pablojim's highcharts ng
- Rendering more than one chart with Highcharts using Angular js Directives
- How to specify a range of data when using HighCharts with <table>?
More Query from same tag
- if statement in Highcharts
- Highchart with Prototype
- Highcharts - Is it possible to display the my own text on the data-labels of line chart?
- Add a custom text tooltip that differs from point to point in Highcharts
- Unable to use solid-gauge highchart in backboneJS from ruby on rails
- highCharts overlay dataLabels
- how to add color inside a 3d chart in highchart js
- Two y Axis in Highcharter in R
- Remove space between yAxis and data in highcharts
- Highcharts.js DateTime on x axis coming from JSON only displays number
- Changing the color of each column in high charts
- Highcharts export chart new window/tab
- Set min and max value in double for y-axis in highchart
- Highchart series did not draw
- Highcharts shankey diagram percentage not showing
- Highcharts zoom on 2 charts - Reset zoom issue
- Highcharts: incorrect column placement with linked series?
- How to draw connectors for venn diagram chart in Highcharts?
- How to draw multiple segments overlapping and non overlapping in high-charts?
- how to handle mouse over event in legend in highcharts?
- Using HighCharts styledMode in Angular 8 application
- Change the text of the back button on Highcharts Treemap?
- Unable to render SVG as dataURI in Highcharts marker
- Highchart tooltip hover not working properly
- Changing data series type dynamically with Highcharts-angular
- Highcharts multiple series in drill down
- Overriding log scale with highcharts export server
- High Charts - Organizational Chart
- how to animate the move of a point from a position to another in a HighCharts scatterplot
- Highchart - Display JSON Data - MYSQL / PHP