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" }
Related
I want to create a graph but I can't send the data from a list, I'm using this library because it allows me to create web links. Can someone help me, I'm using c#. I want to change the months for a list
Chart qc = new Chart();
qc.Width = 500;
qc.Height = 300;
qc.Version = "2.9.4";
qc.Config = #"{
type: 'bar',
data: {
labels: ['January', 'February', 'March', 'April', 'May'],
datasets: [
{ label: 'Dogs', data: [50, 60, 70, 180, 190] },
],
},
options: {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
fontColor: '#00ff00',
fontSize: 20,
fontStyle: 'bold',
labelString: 'Month',
},
},
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: '# Users',
fontColor: '#ff0000',
fontSize: 20,
fontStyle: 'bold',
},
},
]
}
}
}";
You can use string interpolation to dynamically add data to a string, then use String.Join Method to format them to match QuickChart formatting, note that you must use double curly braces to escape the necessary braces
List<string> labels = new List<string>() { "'Jan'", "'Feb'", "'Jul'", "'Nov'" };
List<int> data = new List<int>() { 100, 300, 400, 500 };
Chart qc = new Chart();
qc.Width = 500;
qc.Height = 300;
qc.Version = "2.9.4";
qc.Config = $#"{{
type: 'bar',
data: {{
labels: [ {string.Join(",", labels)} ],
datasets: [{{
label: 'Users',
data: [ {string.Join(",", data)} ]
}}]
}}
}}";
Console.WriteLine(qc.GetUrl());
You might need to create your own method to wrap the string data into required quotes.
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
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 am trying to create the below structure:
"chartData": [
{
label: "Your group",
data: [
[-2, 10],
[2, 20],
[-1, 11],
[-1, -12],
[-1, 5]
],
info: [
{
id: "a1"
},
{
id: "b1"
},
{
id: "c1"
},
{
id: "d1"
},
{
id: "e1"
}
]
},
everything is fine other than the data section. If I create a class to represent each data point, with for example a property for X and a property for Y then the JSON created will look something like this:
"chartData": [
{
label: "Your group",
data: [
{X=-2, Y=10},
{X=-5, Y=17},
{X=-1, Y=13},
{X=-8, Y=8},
{X=-5, Y=13}
],
info: [
{
id: "a1"
},
{
id: "b1"
},
{
id: "c1"
},
{
id: "d1"
},
{
id: "e1"
}
Defining the data type to be a double[,] also doesn't create the same format.
I need to stick to this format as it at the request of an external vendor that the data looks like this. Any ideas?
Your coordinate pairs need to be an array of int or double.
class ChartData {
string label;
int[][] data;
Info[] info;
}
data should be initialized like this:
var cd = new ChartData();
cd.data = new int[100][];
And, each point should be something like:
cd.data[0] = new[] { 1, 1 };
cd.data[1] = new[] { -10, 50};
//etc
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");