I am making a line chart using highchart and i want to try to make different color on it.
Let me show you my current code :
I have 6 arrays:
var xAxes = ['2021-05-05','2021-05-06','2021-05-07','2021-05-08','2021-05-09']
var Min = [2,2,2,2,2]
var Max = [200,200,200,200,200]
var value = [100,134,156,133,26]
var judge = ['OK','NG','OK','OK','NG']
var boxNo = ['Box1','Box1','Box1','Box2','Box2']
And here is my code for creating the chart :
$('#container5').highcharts({
chart: {
type: 'line',
zoomType: 'x'
},
title: {
text: 'Daily IC Log Data'
},
subtitle: {
text: 'Running Date'
},
xAxis: {
tickInterval: 150,
categories: xAxes,
type: 'datetime',
labels: {
enabled: false
}
},
yAxis: {
title: {
text: 'Value'
},
gridLineWidth: 0,
minorGridLineWidth: 0
},
plotOptions: {
series: {
turboThreshold: 1000000
}
},
tooltip: {
shared: true,
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y} us<br/>'
},
series: [
{
name: 'Value',
data: value,
type: 'spline',
tooltip: {
valueDecimals: 2
}
},
{
name: 'Minimun Std',
data: Min,
color: 'red',
type: 'spline',
line: {
dashStyle: 'longdash'
},
tooltip: {
valueDecimals: 2
}
},
{
name: 'Maximum Std',
data: Max,
type: 'spline',
tooltip: {
valueDecimals: 2
}
}
]
});
From my code above, I want to make differential on my line chart based on boxNo.
The line color on chart should be different based on boxNo. Is it possible?
Any help would be appreciated.
You can create a function to generate zones for a series based on the boxNo array. Example:
var colorsMap = {
Box1: ['blue', 'red', 'black'],
Box2: ['green', 'yellow', 'orange']
};
function getZonesForSeries(seriesIndex) {
var currentZone;
var zones = [];
boxNo.forEach(function(bN, index) {
if (bN !== currentZone) {
currentZone = bN;
if (zones.length) {
zones[zones.length - 1].value = index;
}
zones.push({
color: colorsMap[bN][seriesIndex]
});
}
});
return zones;
}
Live demo: http://jsfiddle.net/BlackLabel/t8hcab7d/
API Reference: https://api.highcharts.com/highcharts/series.line.zones
Related
I'm creating a bar chart in ASP.NET 2.0 using HighCharts JS.
here's how the chart can be do in javascript:
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
i have this in c# code-behind:
public string[] Names = new string[] { "Name1", "Name2", "Name3"};
public string[] Data = new string[] { "[1,0,4]", "[5,7,3]", "[2,3,4]"};
How can I used this string[] Names and Data in javascript to change the value of the chart?
Please help I'm stuck in it. :( Thanks!
--EDIT for ARISTOS--
I tried your answer but that doesn't work. Base on your answer this javascript will be the same with what you do. check this:
$(function () {
var seriesTest = "{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }";
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [seriesTest]
});
});
I tried this already but this not work because I think series.data only accepts integer inside its bracket ([]).
I already check DotNet.HighCharts as suggested by KingCronus but this can't be use in asp.net 2.0 framework. :(
On the most simple form, you just need to render them on the correct format.
Here is a simple example that maybe need a few tweeks...
Run this on code behind, maybe on PageLoad
StringBuilder sb = new StringBuilder();
for(int i = 0 ; i < 3 ; i++)
sb.AppendFormat("{3}{{name: '{0}',data: {1} }}",
Names[i], Data[i],
i>0 ? "," : "" // this is render the comma "," after the first line
);
ScriptData.Text = sb.ToString();
And place them on the script on the page using a Literal control
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [
<asp:Literan id="ScriptData" Runat="server" EnableViewState="off" />
]
});
});?
Here's what my solution for my problem, in case there would someone need this also.
Here's the JS function:
function LoadChart() {
var Names = <%= this.javaSerial.Serialize(this.Names %>;
var Data = <%= this.javaSerial.Serialize(this.Data %>;
var options = {
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apple', 'Banana', 'Orange']
},
yAxis: {
title: {
text: 'fruit eaten'
}
},
series: [{
name: Names[0],
data: [Data[0]]
}]
};
for (var i=1; i<Names.Length; i++)
{
options.series.push({
name: Names[i],
data: [Data[i]]
});
}
var chart = new Highcharts.Chart(options);
}
Here's some part of the code behind:
public JavaScriptSerializer javaSerial = new JavaScriptSerializer();
public string[] Names = new string[] { "Jane", "John", "Mike" };
public string[] Data = new string[] { "1,2,3", "2,4,6", "3,6,9" }
I have implemented Highcharts successfully which is working very good. My highcharts are getting live data at every 1 minute and add points which is doing as expected. But I have certain problem likes
My highcharts is having two series First is line type series and second is area type series. First series will get always 2 points only and second will get more than 200 points. As I told you my data is live, data start coming on 7 AM just for line and blank data for area until 9 AM at exact 9 AM new data will start coming at every 1 minute until 12.30 PM but what happens at 9 AM my chart goes stop and even on new next day 7 AM my chart stop
But if i refresh my browser I get new data and it will start working as we needed.
My code as follows
$(function () {
$('#container').highcharts({
credits: {
enabled: 0
},
title: {
text: null
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
minute: '%H:%M'
},
max: <%= MilliTimeStamp(_closingTime) %> ,
min: <%= MilliTimeStamp(_openingTime) %> ,
tickInterval: 0.5 * 3600 * 1000,
minorTickInterval: 0.1 * 3600 * 1000,
title: {
text: null
},
lineWidth: 1,
minorGridLineWidth: 1,
endOnTick: true,
showLastLabel: true,
gridLineWidth: 1,
labels: {
style: {
font: '7.5pt Trebuchet MS'
}
},
reversed: <%= isArabic %> // true for arabic layout and false for english layout
},
yAxis: {
title: {
text: null
},
max: <%= maxY %> ,
min: <%= minY %> ,
endOnTick: true,
showLastLabel: true,
labels: {
style: {
font: '7.5pt Trebuchet MS'
}
},
opposite: <%= isArabic %> // true for arabic layout and false for english layout
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
},
line: {
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
tooltip: {
formatter: function () {
return '<span style="font-size:7.5pt;">' + Highcharts.dateFormat('%A, %e %B, %H:%M', this.points[0].x) + '</span><br><span style="color:' + this.points[0].series.color + ';">' + this.points[0].series.name + '</span>: <b>' + Highcharts.numberFormat(this.points[0].y, 0) + '</b>';
},
useHTML: true,
shared: true
},
series: [{
type: 'area',
data: []
}, {
type: 'line',
color: 'Red',
data: []
}]
});
<%
if (isArabic == "true") { %> Highcharts.setOptions({
lang: {
months: <%= months %> ,
weekdays: <%= days %>
}
}); <%
} %>
$.ajaxSetup({
cache: false
});
recieveData();
});
function recieveData() {
var pathArray = window.location.pathname.split('/');
var chart = $('#container').highcharts();
$.ajax({
url: '/' + pathArray[1] + '/HomePageChartData.aspx',
dataType: 'json',
cache: false,
data: {
'time': new Date().getSeconds()
},
success: function (data) {
chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true);
chart.series[1].setData([]);
chart.series[1].name = data.lineSeriesName;
chart.series[0].setData([]);
chart.series[0].name = data.areaSeriesName;
for (var x in data.lineSeriesData) {
chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]);
}
for (var x in data.areaSeriesData) {
chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]);
}
setTimeout(recieveData, 60000);
}
}
});
}
my JSON data at 7 AM
{"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[]}
my JSON data after 9 AM
{"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[[1367830831000,7740.01],[1367830897000,7735.61]]}
And it will start getting new data in areaSeriesData every 1 minutes
##Update
I found the problem that at 7 AM and 9 AM I was not getting data I was getting empty string, so it was going to error which I was not handling, now I change it as below which start removing series but now I am not getting series for line at 7 AM which have data.Can somebody tells me what I am missing or doing wrong over here.
function recieveData() {
var pathArray = window.location.pathname.split( '/' );
var chart = $('#container').highcharts();
$.ajax({
url: '/' + pathArray[1] + '/_layouts/KSE.SharePoint/HomePageChartData.aspx',
dataType: 'json',
cache: false,
data:{'time': new Date().getSeconds() },
success: function (data) {
chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true);
chart.series[1].setData([]);
chart.series[1].name = data.lineSeriesName;
chart.series[0].setData([]);
chart.series[0].name = data.areaSeriesName;
for (var x in data.lineSeriesData) {
chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]);
}
for (var x in data.areaSeriesData) {
chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]);
}
setTimeout(recieveData, 60000);
},
error: function() {
setTimeout(recieveData, 60000);
}
});
}
You should parse your json to prepare separate data for series. Morever you need to use data, instead of "lineSeriesData" or "areaSeriesData". So it should looks like:
[{
data:[[1367830800000, 7715.35],
[1367843400000, 7715.35]]
},{
data:[[1367830831000, 7740.01],
[1367830897000, 7735.61]]
}]
I have this graph. I have a grid and I want to insert in each row this graph.
The problem is that as you can see there is a small line in the left, it seems that this line is the graph axis. I need to remove it not only because of the visual aspect but because the axis increases the grid cell height.
Thanks in advance!
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 100px; margin: 0 auto"></div>
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
backgroundColor: null,
renderTo: 'container',
type: 'bar',
},
title: {
text: ''
},
xAxis: {
gridLineWidth: 0,
enabled: false,
categories: [''],
labels: {
enabled: false
}
},
yAxis: {
enabled: false,
gridLineWidth: 0,
lineWidth: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
},
legend: {
enabled: false,
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
credits:
{
enabled: false,
position:
{
align: 'left',
x: 10
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [ {
name: 'Clicks',
data: [2]
}, {
name: 'Distributed Points',
data: [3]
}],
exporting:
{
enabled: false
}
});
});
Is this what you are after?
I set the xAxis lineWidth: 0 and then after the plot is drawn:
$('.highcharts-axis').css('display','none');
EDIT:
If you also set tickWidth: 0, you can remove all traces of the axis lines without using the CSS call.
Revved fiddle here.
I have a chart that looks like this:
I want to remove the text that is under the bars, "ödmjukhet", "engagemang" etc.. but I still want to display the categorie names on the labels when a user hover over the bars. How can I do this?
This is my code in C#
Highcharts chart1 = new Highcharts("Chart")
.SetXAxis(new XAxis { Categories = averageGrades.Select(averageGrade => averageGrade.CoreValue.Name).ToArray(), })
.SetYAxis(new YAxis { Min = 0, Max = 10, TickInterval = 1, Title = new YAxisTitle { Text = "Betygskalan" } })
.SetSeries(new Series { Data = data, Name = "Snittbetyg" })
.SetLegend(new Legend { Enabled = false, Layout = Layouts.Horizontal})
.SetTitle(new Title { Text = "" })
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 300, Width = 200});
And this is the code by javascript output code:
var Chart;
$(document).ready(function() {
Chart = new Highcharts.Chart({
chart: { renderTo:'Chart_container', defaultSeriesType: 'column', height: 300, width: 200 },
legend: { enabled: false, layout: 'horizontal' },
title: { text: '' },
xAxis: { categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'] },
yAxis: { max: 10, min: 0, tickInterval: 1, title: { text: 'Betygskalan' } },
series: [{ data: [{ color: '#FF9980', y: 4 }, { color: '#A6FF80', y: 8 }, { color: '#FF9980', y: 3 }, { color: '#A6FF80', y: 9 }], name: 'Snittbetyg' }]
});
});
Thanks in advance!
remove
xAxis: { categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'] },
from your code
OR
add class into your style, if you want to keep on hover see DEMO
.highcharts-axis{
display: none;
}
The best way of doing this is probably witht he built in label objecton the xaxis.
http://www.highcharts.com/ref/#xAxis-labels--enabled
The following should do the trick without relying on overriding their styles as in Rab's answer. This is obviously preferred since the API is a lot more fixed than their HTML format.
xAxis: {
categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'],
labels: {enabled: false}
},
i am drawing chart using High Chart JS in my web app in which data values are hardcoded as shown below,
function Drawgraph(){
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
},
title: {
text: 'Power to USD '
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
title: {
text: null
}
},
yAxis: {
title: {
text: 'Power rate'
},
min: 0.6,
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, Highcharts.theme.colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'area',
name: 'Power to USD',
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(2011, 0, 01),
data: [
0.8446, 0.8445, 0.8444, 0.8451, 0.8418, 0.8264, 0.8258, 0.8232, 0.8233, 0.8258,
0.8283, 0.8278, 0.8256, 0.8292, 0.8239, 0.8239, 0.8245, 0.8265, 0.8261, 0.8269,
0.7095
]
}]
});
});
};
How would i pass values to the data [] ?? from array [] term ...
Hopes for your reply
Regards,
From your CS code:
Page.ClientScript.RegisterArrayDeclaration("DataArray", "0.8, 0.5, 1.6");