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
- How to draw Square wave in highchart
- Highcharts Double Click To Select
- How to reformat a HighChart series to for CSV export
- How to draw Balanced yAix in HighCharts?
- Extracting data from a JSON call to a Postgres table for use in Highcharts (without PHP)
- HighCharts - Selection Event keep the selection marked in graph
- Highcharts Gantt Setting Dependency Type
- How can I apply different background color to entire tooltip for different series in highcharts
- HighStock Library: How to keep the same color for each segment in case of selecting
- how do you create a link on highcharts to open up pop up window with another chart
- Drill from Bar to Pie - xAxis Still Present
- Highcharts 2 groups of series
- Export image with phantom - Navigator or credits cannot be changed
- How do i change time on xasis on live chart with highcharts?
- yAxis tickPositioner label on column range chart
- Javascript - Convert timestamp into milliseconds for Highcharts Y axis
- How do I get this text inside of this HTML using Selenium Webdriver?
- Highcharts Node.js export server : Connection error
- different approximation methods (dataGrouping) for each Series in one Highstocks-Chart?
- HighStocks Array Series
- Highcharts: Combo Dual Axes with DrillDown
- highcharts: column chart color change based on value
- Highcharts - per customer- even small date/range increments must be visible
- Highcharts export chart new window/tab
- How can I display my high-chart correctly and import data?
- Angular 4 - Create Heat Chart
- HighCharts - hide date on x-axis and have only hours and minutes
- Javascript syntax when setting a value
- highcharts xAxis density
- Highchart - change data series with link