I begin in javascript...
I would like to draw a chart with data from XMLHttpRequest () as to YAXIS.
I receive the data from the server like this:
function cgi_return_data_conso_elec()
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "/cgi-bin/return_data_conso_elec?01/04/2015", true);
xhr.send(null);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
var array_reponse = xhr.responseText.split("/");
var data1 = array_reponse[1];
alert(data1);
}
else
{
//document.getElementById("text_test").innerHTML = "wait...";
}
}
}
the value of data1 is = 333,2682,2823,1749,624,860,4450,2402,2552,2199,605,794,2433,4060,821,692,477,1005,2904,2438,2066,1652,1672,1544
I draw the graph like this:
$('#container').highcharts
({
chart:
{
type: 'column'
},
title:
{
text: 'CONSO ELEC'
},
subtitle:
{
text: 'Source: PATATE.com'
},
xAxis:
{
categories: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23'],
labels:
{
rotation: - 90,
//align: 'right',
x: -26,
y: 15
//distance: 100,
//padding: 175
//format: '{value} km'
}
//crosshair: true
},
yAxis:
{
min: 0,
title:
{
text: 'Conso (Wh)'
}
},
plotOptions:
{
column:
{
pointPadding: 0,
borderWidth: 0
}
},
series: [{
name: 'Berlin',
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1,42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
}]
});
I want to replace the data of "Berlin" by the variable "data1" but I can not !!
My html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="test_style.css" />
<script type="text/javascript" src="/lib-js/jquery.min.js"></script>
<script src="/lib-js/highcharts/highcharts.js"></script>
<script src="/lib-js/highcharts/modules/exporting.js"></script>
<script src="test_code_js.js"></script>
<title>test graph data conso elec</title>
</head>
<body onload="cgi_return_data_conso_elec();"><!-- lance la fonction au chargement de la page -->
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
I know that must be used: "series.data.push(parseFloat(item));"
but I can not have put it in my code...
If anyone can help me, I would be really happy ...
thank you in advance
thank you for your reply.
Here is a solution that works:
function graph_teleinfo()
{
var xhr = new XMLHttpRequest();
xhr.open("GET", "/cgi-bin/return_data_conso_elec?01/04/2016", true);
xhr.send(null);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
{
var array_reponse = xhr.responseText.split("/");//separe les differents champs du str reponse
var data_tempo;
var data1 = new Array();
data_tempo = array_reponse[1].split(",");
//alert(data2.length);
var data3 = new Array();
data3 = array_reponse[2].split(",");
//alert(data3);
for (var i = 0; i < data_tempo.length; i++)
{
data1[i] = parseFloat(data_tempo[i]);//stock les valeur du str contenu dans "xhr.responseText" dans le tableau et les transforme en float
}//fin for...
//-----------------------------------------------
//construit le graph
$('#container').highcharts
({
chart:
{
type: 'column'
},
title:
{
text: '01/04/2015'
},
subtitle:
{
text: 'Source: raspi-elec'
},
xAxis:
{
categories: data3,
labels:
{
rotation: - 90,
align: 'right',
//x: -30 ,
//y: 15
}
},
yAxis:
{
min: 0,
title:
{
text: '(Wh)'
},
labels:
{
},
},
tooltip:
{
useHTML: true,
pointFormat: '{point.y} Wh'
},
plotOptions:
{
column:
{
pointPadding: 0,
borderWidth: 0
}
},
series:
[{
name: 'Consommation électrique',
data: data1
}]
});
//-----------------------------------------------
}
else
{
//document.getElementById("text_test").innerHTML = "wait...";
}
}
}//fin fonction graph_teleinfo()
Related
As a beginner in learning highchart, I cannot find out why the chart cannot display in the view. My controller displays the json data properly but when I call the controller in the $.getJSON to display the data in the chart I got a blank page.
Can someone help me to make the chart display in the View ?
Thanks
My controller
public function chartBarData()
{
$query1 = $this->model_admin->getBarCha1('2019-01-24','2019-01-25');
$category = array();
$category['name'] = 'Medico';
$series1 = array();
$series1['name'] = 'Paciente';
foreach ($query1 as $row)
{
$category['data'][] = $row->Medico;
$series1['data'][] = $row->Paciente;
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
print json_encode($result, JSON_NUMERIC_CHECK);
}
print json_encode($result, JSON_NUMERIC_CHECK) result :
[{"name":"Medico","data":["baptiste prophete","JUAN ALBERTO SUERO","ADRIANA MATEO","RAUL ARISTY COMAS","VICTORIA LILA FRANCO","IVANHOE LINARES VENTURA"]},{"name":"Paciente","data":[2,3,15,13,1,6]}]
The view
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Doctor patients view',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Amount'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("<?php echo site_url('chartBarData');?>", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
</script>
I want to format my values on the y-axis using HighCharts. Suppose I pass 14000, it should print "14K" on the y-axis. How can I do that? I've benn trying using numeral.js, but to no avail.
<!DOCTYPE html>
<html>
<head>
<title>Charts demo </title>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script >
$(function () {
$('#container').highcharts({
colors: ['#8dafb7', '#f19962', '#e97381', '#f8c465', '#6cd299', '#87cfe2'],
chart: {
type: 'column',
marginBottom : 50,
marginTop : 150,
height : 700
},
title: {
text: ''
},
xAxis: {
categories: ['Q2,16', 'Q3,16', 'Q4,16', 'Q1,17'],
width: 700,
tickmarkPlacement: 'on',
labels: {
y : 40,
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.6'
},
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
tickInterval: 20,
title: {
text: ''
},
labels: {
style: {
color: '#333333',
fontSize:'25',
fontFamily: 'ProximaNova-Light',
opacity : '.5'
},
formatter: function() {
return "$"+ this.value ;
}
},
stackLabels: {
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular'
},
enabled: true,
formatter: function() {
return "$"+ this.total ;
}
}
},
legend:{
enabled:false,
width: 600,
floating: false,
x:50,
align: 'left',
style: {
color: '#555555',
fontSize:'25',
fontFamily: 'ProximaNova-Regular',
opacity : '.8'
},
borderWidth: 0
},
tooltip: {
enabled: false
},
credits : {
enabled : false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'FTE-OpEx ',
data: [5000, 30000, 40000, 700000],
pointWidth: 30,
}, {
name: 'FTE-CapEx',
data: [20000, 20000, 30000, 20000],
pointWidth: 30
}, {
name: 'AWF-OpEx',
data: [30000, 40000, 4000, 2000],
pointWidth: 30
}, {
name: 'AWF-CapEx',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}, {
name: 'HW/SW',
data: [3000, 4000, 4000, 20000],
pointWidth: 30
}, {
name: 'Other',
data: [3000, 4000, 4000, 2000],
pointWidth: 30
}]
});
});
</script>
</head>
<body id="body">
<div id="container" style="height: 100%; width: 100%; position: center; margin-left: 5%; "></div>
</body>
</html>
}
It's problem with your formatter which returns default value, see API. If you want to keep numeric symbols, call defaultLabelFormatter.
Demo: http://jsfiddle.net/BlackLabel/uL2jx0t9/1/
yAxis: {
labels: {
formatter: function() {
return '$' + this.axis.defaultLabelFormatter.call(this);
}
}
}
I am building a chart using highstocks. The date value on the x-axis is not displaying the correct date and starts in 1970. Looking at other post I understand that it needs to be formatted in milliseconds (since 1, January 1970). So I have done this in the CSV file and verfied them on http://www.epochconverter.com/ but still high charts is not displaying the correct date/times. I also tried changing the x-axis type to 'datetime' but still not showing.
I understand one solution is to set a pointStart and pointInterval which does work but the issue I have with this solution is I pull the data daily and append it to the CSV. I worry if, for whatever reason, my scripts to pull the data does not run one day then completes the next it would display the incorrect date for the data.
Below is my HTML code, CSV file, and JS script format and the chart that is being displayed. I would appricate any help in how I can get the dates to display as mm/dd/yyyy.
CSV File:
Date,1457395200000,1457481600000,1457568000000,1457654400000,1457740800000,1457827200000,1457913600000,1458000000000,1458086400000
AUSTX,3862.94,4465.15,4247.64,3875.18,3263.06,3020.23,3309.66,3714.37,1573.27
CLBOH,2331,2662.17,2708.84,2375.02,1843.5,1812.71,2129.4,2273.38,918.63
GUID,2672.38,3164.67,2967.69,3141.39,2771.71,2469.85,2637.58,2792.44,1471.74
NYCNY,6627.41,7575.63,7383.43,6791.21,6339.03,6710.39,6302.29,6829.12,3251.16
ORNCA,11455.43,13908.57,13009.89,13008.68,11133,11028.88,11151.15,13015.48,7460.78
PKVCO,758.45,1242.89,769.35,770.14,745.31,650.31,696.03,726.53,414.16
RADNC,4374.73,5052.56,4889.06,4345.06,3884.03,3466.78,3632.1,3890.75,1142.66
SYRNY,2228.03,2419.88,2426.9,2202.09,1892.67,1948.18,2061.56,2334.07,934.85
$(document).ready(function() {
var options = {
chart: {
renderTo: 'content2',
defaultSeriesType: 'spline',
zoomType: 'x'
},
title: {
text: 'Usage(GiB) by Region',
align: 'center'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%m/%d/%Y',
week: '%m/%d/%Y',
month: '%m/%d/%Y',
year: '%m/%d/%Y',
},
categories: [],
labels: {
rotation: -45,
align: 'right'
}
},
yAxis: {
title: {
text: 'Usage(GiB)',
x: 5
},
labels: {
align: 'left',
x: 5
}
},
legend: {
enabled: true,
align: 'right',
// x: -400,
verticalAlign: 'middle',
y: -5,
floating: false,
backgroundColor: 'rgba(35, 35, 75, 1)', //(Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'dark-blue',
borderColor: '#CCC',
borderWidth: 1,
shadow: false,
width: 140,
itemWidth: 140,
itemStyle: {
fontSize: '10px'
}
},
tooltip: {
// formatter: function() {
// return '<b>'+ this.x +'</b><br/>'+
// this.series.name +': '+ this.y +'<br/>'; //+
// 'Total: '+ this.point.stackTotal;
// }
},
plotOptions: {
series: {
// pointStart: Date.UTC(2016, 2, 3),
// pointInterval: 24 * 3600 * 1000, //one day`
marker: {
enabled: true,
radius: 4
},
states: {
hover: {
enabled: true,
lineWidth: 4
}
}//,
//events: {
// legendItemClick: function(event) {
// if (!this.visible)
// return false;
//
// var seriesIndex = this.index;
// var series = this.chart.series;
//
// for (var i = 0; i < series.length; i++)
// {
// if (series[i].index != seriesIndex)
// {
//
// series[i].visible ? series[i].hide() : series[i].show();
// }
// }
//
// return false;
// }
//}
},
column: {
// stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
exporting: {
//url: 'http://ubppapp01:8085/highcharts-export-web/',
buttons: {
exportButton: {
menuItems: [
{
text: 'Export to PNG',
onclick: function() {
this.exportChart();
}
}, {
text: 'Export Data',
onclick: function() {
location.href = file2
}
},
null,
null
]
}
}
},
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: 0
}
},
navigator: {
enabled: false
},
rangeSelector:{
buttons:[{
type: 'day',
count: 14,
text: '14d'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 3,
text: '3m'
},
{
type: 'ytd',
text: 'YTD'
},
{
type: 'all',
text: 'All'
}],
selected: 0
},
scrollbar: {
enabled: false
},
series: []
};
$.get(file2, function(data) {
// Split the lines
var lines = data.split('\r');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line contains categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0) options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.StockChart(options);
});
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dashboard Init</title>
<script type="text/javascript" src="resources/lib/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="resources/lib/highstock.js"></script>
<script type="text/javascript" src="resources/lib/modules/exporting.js"></script>
<script type="text/javascript" src="resources/lib/highcharts-scalable-yaxis-master/scalable-yaxis.js"></script>
<script type="text/javascript" src="resources/lib/themes/dark-blue.js"></script>
<!--[if IE]>
<script type="text/javascript" src="./js/excanvas.compiled.js"></script>
<![endif]-->
<script type="text/javascript">
var file2="resources/csv/wifi_usage_by_region_t2.csv"
</script>
<script SRC="resources/js/usage_by_region.js">
</script>
</head>
<body bgcolor="silver">
<br>
<p align="center"><big>Home</big>
<hr>
<div id="content2" style="width: 85%; height: 350px; margin: 0 auto"></div>
<br>
</body>
</html>
Click here to see the Chart that is currently generated
Hi I am facing problem of making navigator on Highstock charts to work as they freeze when I use jQuery ui slider tabs with it. I am not able to debug it as I can't find any error. Any help on debugging or error that might be causing it would be greatly appreciated.My code looks like this:
"<link rel="stylesheet" href="/sites/all/libraries/InterestHighcharts/jquery_slider/styles/jquery.sliderTabs.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js'></script>
<?php
print '<div id="mySliderTabs">
<ul>';
for ($i=1;$i<=5;$i++)
{ $j=$i-1;
$tab_title=$tab_titles_arr[$j];
$tab_title_len=strlen($tab_title);
if($tab_title_len > 7)
{
print'<li style="font-size:11px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">'.substr($tab_title,0,6).'</li>';
}
else
{
print'<li style="font-size:11px; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">'.$tab_title.'</li>';
}
}
print '</ul>';
for($i=1;$i<=5;$i++)
{
print '<div id="container'.$i.'" style="height:375px !important; width:540px !important; margin-left:-10px !important;">Problem reading the charts</div>';
}
print '</div>';
?>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
(function($) {
for (i=1;i<=tabs_count;i++)
{ var j=i-1;
var flag_test=flagAr[i];
$('#container'+i).highcharts('StockChart', {
chart: {
borderColor: '#000000',
height:390,
width:550,
marginLeft:-3,
marginTop:13,
events: {
load: function() {
this.renderer.image('http://www.interest.co.nz/sites/all/libraries/InterestHighcharts/images/Interest_logo.gif', 170, 75, 200, 100).add(); // add image(url, x, y, w, h)
},
}
},
credits: {
enabled: true,
itemStyle: {
cursor: 'pointer',
color: '#000000',
fontSize: '11px',
fontWeight:'bold'
},
position: {
align: 'right',
x:-60,
verticalAlign: 'bottom',
y:-100
},
text: 'Source:'+source_arr[j],
href: source_hyperlink_arr[j]
},
rangeSelector : {
selected : 1,
inputEnabled : false,
buttonTheme: {
display: 'none',
},
labelStyle: {
color: 'transparent',
},
buttons: [{
type: 'day',
count: 12,
text: '1d'
}, {
type: 'week',
count: 3,
text: '3w'
}, {
type: 'month',
count: 6,
text: '6m'
}, {
type: 'ytd',
text: 'YTD'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : chart_title_arr[j],
x:-220,
style: {
fontFamily:'Arial,Helvetica,sans-serif',
fontWeight:'bold'
}
},
subtitle : {
text : chart_subtitles_arr[j],
floating:true,
x:-120,
y:15,
style: {
fontFamily:'Arial,Helvetica,sans-serif'
}
},
tooltip : {
valueDecimals : 2,
headerFormat:'<span style="font-size: 10px; margin-left:20px;">{point.key}</span><br/>',
pointFormat: '<span style="color:#FF0000; font-weight:bold">{point.y}</span><br/>'
},
xAxis: {
type: 'datetime',
lineWidth: 20,
gridLineColor:'#FAFFFF',
gridLineDashStyle:'Dot',
dateTimeLabelFormats: {
day: '%e-%b',
week: '%e-%b',
month: '%b-%y',
year: '%Y'
},
events: {
setExtremes: function(e) {
if (e.trigger === "navigator") {
var max=e.max+padding_value;
var x=this;
setTimeout(function(){
x.setExtremes(e.min,max);
}, 4);
}
}
},
max:xpad[i],
labels: {
style: {
color: 'black',
fontSize: '10px',
fontWeight:'bold',
fontFamily:'Arial,Helvetica,sans-serif',
},
y:3, //to pull x-axis label down
},
//showLastLabel:false,
},
yAxis: {
opposite: true,
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value,setdecimalpoints(this.value));
},
style: {
color: 'black',
fontSize: '10px',
fontWeight:'normal'
},
y:-12,
}
},
series : [{
data : finalAr[i],
id: 'dataseries',
lineWidth:3,
zIndex:9999,
shadow:{
width:3,
color:'#000000',
opacity:.7
},
lineColor:'#FF0000',
type : 'area',
dataGrouping:{
dateTimeLabelFormats: {
day: ['%b-%e,%Y'],
week: ['%e-%b'],
month:['%b-%y'],
year: ['%Y']
}
},
fillColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
stops: [
[0, Highcharts.getOptions().colors[8]],
[1, 'rgba(255,255,255,0)']
]
}
},
{
type: 'flags',
useHTML: true,
name: 'Flags on series',
data: JSON.parse("["+flag_test+"]"),
onSeries: 'dataseries',
shape: "url(http://www.interest.co.nz/sites/all/libraries/InterestHighcharts/images/balloon.jpg)",
width : 5,
y: -33
}],
navigator : {
adaptToUpdatedData: true,
enabled:true,
xAxis: {
labels:
{
enabled: false,
}
},
height: 50,
margin:-2,
series: {
lineColor:'#FF0000',
type : 'area',
fillColor : '#FFFFFF'
}
},
scrollbar: {
liveRedraw: false,
},
});
}
})(jQuery);
</script>
<script src="/sites/all/libraries/InterestHighcharts/jquery_slider/jquery.sliderTabs.min.js"></script>
<script type="text/javascript">
jQuery("#mySliderTabs").sliderTabs();
//jQuery("div#mySliderTabs").sliderTabs();
</script>
</div>"
I am not able to go back to the original state of my charts after I have drilled down to the second level. Point to be noted is that I was able to do that when I was not generating multiple columns(one for open and one for closed state), I was easily able to go back to the original state. This is my code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Team View</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories1 = ['January 2013','February 2013', 'March 2013']
name = 'Issues',
level = 0,
data = [{
y: 23,
color: colors[0],
drilldown: {
type: 'column',
name: 'Open issues for January 2013',
categories: ['A', 'B', 'C', 'D', 'E'],
level: 1,
data1: [3, 2, 4, 0, 1],
color: colors[4],
name1:'Closed issues for January 2013',
data2: [0, 0, 0, 0, 13],
color1: colors[5]
}},
{
y: 15,
color: colors[1],
drilldown: {
type: 'column',
name: 'Open issues for February 2013',
categories: ['A', 'B', 'C', 'D', 'E'],
level: 1,
data1: [4, 0, 7, 0, 1],
color: colors[4],
name1:'Closed issues for February 2013',
data2: [0, 0, 0, 0, 3],
color1: colors[5]
}},
{
y: 2,
color: colors[2],
drilldown: {
type: 'column',
name: 'Open issues for March 2013',
categories: ['A', 'B', 'C', 'D', 'E'],
level: 1,
data1: [1, 0, 1, 0, 0],
color: colors[4],
name1: 'Closed issues for March 2013',
data2: [0, 0, 0, 0, 0],
color1: colors[5]
}}];
function setChart(name, categories, data, color, level, type) {
console.log(name,categories,data,color,level,type);
chart.xAxis[0].setCategories(categories);
while(chart.series.length>0){
chart.series[0].remove(true);
}
for (var i=0;i<data.length;i++){
chart.addSeries({
color: color[i],
name: name[i],
level: level,
data: data[i],
type: type
});
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
backgroundColor: "#F7F7F7"
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: categories1,
labels: {
rotation: -45,
y: 10,
x: 10,
align: "right"
}
},
yAxis: {
title: {
text: 'Issues'
},
min: 0
},
credits: {
enabled: false
},
plotOptions: {
line: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
if (drilldown) {
setChart([drilldown.name,drilldown.name1], drilldown.categories, [drilldown.data1,drilldown.data2], [drilldown.color,drilldown.color1], drilldown.level, drilldown.type);
} else { // restore
setChart(name, categories1, data, null, level, 'line');
}
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y + 'Issues';
}
}
},
column: {
cursor: 'pointer',
point: {
events: {
click: function() {
setChart(name, categories1, data, null, level, 'line');
}
}
},
dataLabels: {
enabled: true,
color: colors[0],
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y + 'Issues';
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = '';
switch (this.series.options.level) {
case 0:
s = this.x + ': ' + this.y + 'Issues';
break;
case 1:
s = this.x + ': ' + this.y + 'Issues';
break;
}
return s;
}
},
series: [{
name: name,
level: level,
data: data,
color: colors[0]}],
exporting: {
enabled: false
}
},
function(chart){
console.log(chart);
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Please let me know what am I doing wrong as the original line graph is not displayed on returning to original state.
You have two main erros in your code, both in that line:
setChart(name, categories1, data, null, level, 'line');
Instead of null you should us any array of colors, the same applies for data - should be an array of series, working code example:
setChart(name, categories1, [data], colors, level, 'line');
setChart(name, categories1, [data], ['blue','red','green'], level, 'line');
Working example: http://jsfiddle.net/JaTjk/11/