Trying to create a chart with 1 dashed line and solid lines. I've only ever created a chart in which all the lines were styled the same. I'm using the getJSON method any everything works well, however I would like to individually style one of the lines. I thought I would be able to add something to the empty series section within options - but I can't seem to get it to work.
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
marginBottom: 100
},
xAxis: {
categories: [],
},
series: []
}
$.getJSON("php/mysqldata.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
options.series[1] = json[2];
options.series[2] = json[3];
options.series[3] = json[4];
chart = new Highcharts.Chart(options);
});
});
Add style information in that way (for example for second serie).
options.series[1] = json[2];
options.series[1].dashstyle = 'Dash';
Related
In Highcharts.js is it possible to disable/enable a given category by clicking on it? In the same way as you can disable/enable a given series in a legend by clicking on it.
If not, what is the next best alternative?
Disabling a category by clicking on it is not supported in Highcharts by default. To acheieve the wanted result you need to add custom code. For example, in render event you can add click event to xAxis labels and update the chart with new categories and data:
var H = Highcharts,
categories = ['one', 'two', 'three'],
data = [1, 2, 3];
chart = Highcharts.chart('container', {
chart: {
events: {
render: function() {
var chart = this;
H.objectEach(chart.xAxis[0].ticks, function(tick) {
if (tick.label) {
H.addEvent(tick.label.element, 'click', function() {
data.splice(tick.pos, 1);
categories.splice(tick.pos, 1);
chart.update({
series: [{
data: data
}],
xAxis: {
categories: categories
}
});
});
}
});
}
}
},
series: [{
type: 'column',
data: data
}],
xAxis: {
categories: categories
}
});
Live demo: http://jsfiddle.net/BlackLabel/8wfx5yve/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update
In highcharts initialization I've set array of only one color. I would like to change this with another array on charts's hover event. In other words chart is default monochromatic and after hover it becomes colorful.
config = {
colors: ["#C0C0C0"]
};
chart = $('#chart').highcharts(config).highcharts()
$('#chart').hover(function(){
chart.options.colors = ["#E84C3D", "#C1392B", '#D25400', "#E67F22", "#F39C11"]
}, function(){
chart.options.colors = ["#C0C0C0"]
});
Unfortunately it doesn't work. How should I do it?
You can set the plotOptions events:
plotOptions: {
column:{colorByPoint:true},
series: {
animation:false,
events: {
mouseOver: function(e) {
//console.log( chart.options);
var options = chart.options;
if(options.colors[0]!='#E84C3D')
{
options.colors=['#E84C3D','#C1392B','#D25400','#E67F22','#F39C11'];
chart = new Highcharts.Chart(options);
}
},
mouseOut: function(e) {
var options = chart.options;
if(options.colors[0]!='#C0C0C0')
{
options.colors=['#C0C0C0'];
chart = new Highcharts.Chart(options);
}
}
}
}
}
demo http://jsfiddle.net/eNMvw/134/
Instad of creating chart multiple time, better is using series.update() and apply colors per bars.
I want to change the zoom-type from "x" to "xy" without creating new instance,
I want do do it like update() method they have..
located in myChart.options.chart.zoomType
You can do something like this:
var chart1 = new Highcharts.StockChart({
chart: {
zoomType: 'xy', //requried!
...
}
...
});
function SwitchToZoomX() {
chart1.pointer.zoomX = true;
chart1.pointer.zoomY = false;
chart1.pointer.zoomHor = true;
chart1.pointer.zoomVert = false;
}
function SwitchToZoomY() {
chart1.pointer.zoomY = true;
chart1.pointer.zoomX = false;
chart1.pointer.zoomVert = true;
chart1.pointer.zoomHor = false;
}
With Highcharts v5 you can now do this:
chart1.update({chart: {zoomType: "y"}})
The update function dynamically updates the chartoptions to imperitively change zoomType post render.
First Prepare a string for the chart to display
Clone Series To Redraw as highcharts set it null after draw.
var seriesClone=[{
name: 'USD to EUR',
data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]
}]
Series Options To SET
var chartOptions={
chart: {
renderTo:'container',
zoomType: 'xy'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: [1,2,3,4,4,5,6,7,7,8,8,8,9,10,14]
}]
}
var chart = new Highcharts.StockChart(chartOptions);
And When you want to change the value of ZoomType redeclare the chart like this
chartOptions.chart.zoomType='y';
chartOptions.series=seriesClone;
myChart=new Highcharts.StockChart(chartOptions);
Working example JSFIDDLE
I have about 6 charts on one page, one of them needs to have a different theme from the other five. I have the themes working individually but the second one initialized is applied to all the charts.
Is there a way to specify which theme a chart uses?
After reading Ricardo's comment I realized I just had to move the setOptions() call inside the $(document).ready call.
A much simplified version of my code:
Highcharts.theme1 = {
chart: {
borderWidth: 0,
},
};
var chart;
$(document).ready(function() {
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme1);
// Build the chart
chart = new Highcharts.Chart({});
});
Highcharts.theme2 = {
chart: {
borderWidth: 5,
},
};
var chart2;
$(document).ready(function() {
// Apply the theme
var highchartsOptions = Highcharts.setOptions(Highcharts.theme2);
// Build the chart
chart = new Highcharts.Chart({});
});
Best practice currently would be to merge in the theme with your chart options:
chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));
var options1 = {
// options goes here
chart: {
renderTo: 'chart1',
type: 'bar',
},
title: {
text: 'Conversions'
},
};
var theme1 = {
// themes goes here
};
var chart1 = new Highcharts.Chart(Highcharts.merge(options1, theme1));
this way you can set individual themes for each chart if you need too
I need to include pagination for my chart (Bar). so that i can control the number of bars that can be displayed. Has anyone tried this earlier?
If this can be achieved, Anyone help me to sort this out.
The basic idea behind changing the 'data' of your chart is to update the series information for it. So that as you press the pagination buttons for your chart, you update the series data directly.
I put together a simple fiddle example based on another question I answered previously.
Check it out here: http://jsfiddle.net/Robodude/EmMxH/71/
html:
<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set A + B
<OPTION VALUE="C">Data Set A + B + C
</SELECT>
<button id="change">Change Data Source</button>
<div id="container" style="height: 400px"></div>
Javascript/Jquery:
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
series: []
};
$("#change").click(function(){
if ($("#list").val() == "A")
{
options.series = [{name: 'A', data: [1,2,3,2,1]}]
}
else if ($("#list").val() == "B")
{
options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]}]
}
else if ($("#list").val() == "C")
{
options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]},{name: 'C', data: [1,1,1,1,1]}]
}
var chart = new Highcharts.Chart(options);
});
This is the previous question I helped answer: Reload chart data via JSON with Highcharts
Obviously, this is a pretty straight forward example. If you update your post with more information, I can possibly expand on this further.
Good luck :)
The other way to do this would be to make use of axis.setExtremes to zoom into the first page then you update the parameters for the prev/next page so rather than the chart refreshing it actual moves left/right.
Pagination in highcharts can be achieved easily, using an extra plugin, Jquery pagination plugin.
I found this forum post informative and helpful.
function pageselectCallback(page_index, jq){
var items_per_page = 3,
max_elem = 5,
from = page_index * items_per_page,
to = from + max_elem,
newcontent = '',
chartData = [];
//pie.series[0].setData( data.slice(from,to) );
if(typeof pie !== 'object') {
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
series: [{
data: []
}]
});
}
pie.series[0].setData( data.slice(from, to) );
// Prevent click eventpropagation
return false;
}
And an working demo is here.