I am a first time user of high charts. I am trying to display table data (from sql server) in through highcharts using zoom-able time-series line chart. I want to plot a value-time line chart which can be zoomable based on the date. Can anyone help me
Table:
tbl_values
columns:
Time datetime,
Value int
JSON data:
[{"Time":"2017-08-17 16:35:28.000","Value":"3.85"},
{"Time":"2017-08-17 17:36:28.000","Value":"3.85"},
{"Time":"2017-08-17 18:35:28.000","Value":"3.86"},
{"Time":"2017-08-17 19:35:28.000","Value":"3.86"},
{"Time":"2017-08-18 07:35:28.000","Value":"3.87"},
{"Time":"2017-08-18 18:35:28.000","Value":"3.86"},
{"Time":"2017-08-18 19:35:28.000","Value":"3.86"},
{"Time":"2017-08-18 20:35:28.000","Value":"3.87"},
{"Time":"2017-09-18 07:35:28.000","Value":"3.87"},
{"Time":"2017-09-19 18:35:28.000","Value":"3.88"},
{"Time":"2017-09-18 19:35:28.000","Value":"3.88"},
{"Time":"2017-09-20 20:35:28.000","Value":"3.88"},
{"Time":"2017-10-18 07:35:28.000","Value":"3.87"},
{"Time":"2017-10-18 16:35:28.000","Value":"3.88"},
{"Time":"2017-10-08 19:39:28.000","Value":"3.89"},
{"Time":"2017-10-18 20:35:28.000","Value":"3.90"},
{"Time":"2017-11-18 07:35:28.000","Value":"3.87"},
{"Time":"2017-11-18 16:35:28.000","Value":"3.85"},
{"Time":"2017-11-19 19:39:28.000","Value":"3.85"},
{"Time":"2017-11-20 20:35:28.000","Value":"3.91"},
{"Time":"2017-12-14 07:35:28.000","Value":"3.90"},
{"Time":"2017-12-15 16:35:28.000","Value":"3.90"},
{"Time":"2017-12-16 19:39:28.000","Value":"3.93"},
{"Time":"2017-12-27 20:35:28.000","Value":"3.91"},
{"Time":"2018-01-14 06:35:28.000","Value":"3.88"},
{"Time":"2018-01-15 17:35:28.000","Value":"3.86"},
{"Time":"2018-01-16 14:39:28.000","Value":"3.86"},
{"Time":"2018-01-27 20:35:28.000","Value":"3.87"}
]
Related
I am using Morris Bar chart with php with data from mysql database
Now it is showing bar graph.
My question is:
There are about 100 rows in mysql database and they are increasing day by day.
My bar graph is displaying date wise data.
Can we fix number of days to display bargraph along with horizontal scroll bar to view previous data ?
Code I am using now is as follows :
<div id="graphdatewise"></div>
<script>
$(function () {
var graphdatewise = {
element: 'graphdatewise',
data: <?php echo json_encode($chartresult);?>,
xkey: 'cur_date',
ykeys: ['counter', 'counter_unique_visit'],
labels: ['PageViews', 'UniqueVisits'],
parseTime: true,
barColors: ['#F4FA58', '#00FFFF'],
xLabels: 'Date',
xLabelAngle: 70
}
bar1 = Morris.Bar(graphdatewise)
});
</script>
Now with this code, bars get resized and whole data is displayed in graph. Instead of that can we show 10 days data in graph with horizontal scroll bar to access rest data ?
It is not possbile to make a x-scroll with Morris chart. But I suppose that if you limit the width of the parent widder than the width of the chart, that should be ok. Something like:
<div id='parent' style='width: 100px;'>
<div id='graphdatewise' style='width: 50px;'></div>
</div>
I am using anychart to draw a chart in my page, My code is like this
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.12.0/anychart-ui.min.css" />
<input id="chart-charitytomoney" value="[["Charity 4",10.00],["Charity 2",20.00],["Charity Donate",100.00],["Donate Your Humanity",5920.00],["Gift your Work",3155.00],["Celebrate Baby Shower",770.00],["Refer Friends",110.00],["Gift Your Friends",200.00],["Celebrate B\u0027day With Us",220.00],["Celebrate Weekend",50.00],["Piggy Bank",4100.00],["Give a Single Gift",4050.00]]">
<div id="chart-container" style="height:550px!important"></div>
<script type="text/javascript">
$(document).ready(function(){
anychart.onDocumentReady(function () {
var data = $("#chart-charitytomoney").val();
// create column chart
chart = anychart.column();
// turn on chart animation
chart.animation(true);
// set chart title text settings
chart.title('Charities by donation');
// create area series with passed data
alert(data);
var series = chart.column(data);
// set series tooltip settings
series.tooltip().titleFormatter(function () {
return this.x
});
series.tooltip().textFormatter(function () {
return '$' + parseInt(this.value).toLocaleString()
});
series.tooltip().position('top').anchor('bottom').offsetX(0).offsetY(5);
// set scale minimum
chart.yScale().minimum(0);
// set yAxis labels formatter
chart.yAxis().labels().textFormatter("${%Value}");
// tooltips position and interactivity settings
chart.tooltip().positionMode('point');
chart.interactivity().hoverMode('byX');
// axes titles
chart.xAxis().title('Product');
chart.yAxis().title('Revenue');
// set container id for the chart
chart.container('chart-container');
// initiate chart drawing
chart.draw();
});
});
</script>
Everything looks okay to me, But chart is not working.
but if I changed this line
var data = $("#chart-charitytomoney").val();
to
var data = [["Charity 4", 10.00], ["Charity 2", 20.00], ["Charity Donate", 100.00], ["Donate Your Humanity", 5920.00], ["Gift your Work", 3155.00], ["Celebrate Baby Shower", 770.00], ["Refer Friends", 110.00], ["Gift Your Friends", 200.00], ["Celebrate B\u0027day With Us", 220.00], ["Celebrate Weekend", 50.00], ["Piggy Bank", 4100.00], ["Give a Single Gift", 4050.00]]
Everything works. Can anyone point out what I am doing wrong here? And How I can overcome it?
It is a peculiar way to pass data but you can do that, just:
Option 1
You should use quotes in the input field:
<input id="chart-charitytomoney" value="[['Charity 4',10.00],['Charity 2',20.00],['Charity Donate',100.00],['Donate Your Humanity',5920.00],['Gift your Work',3155.00],['Celebrate Baby Shower',770.00],['Refer Friends',110.00],['Gift Your Friends',200.00],['Celebrate B\u0027day With Us',220.00],['Celebrate Weekend',50.00],['Piggy Bank',4100.00],['Give a Single Gift',4050.00]]">
And you need to eval() the result:
var data = eval($("#chart-charitytomoney").val());
Here is a sample: http://jsfiddle.net/yr35w6nu/8/
However, eval is no quite secure, if you want to store data in a string in a field like this consider using code like this:
Option 2
var data = JSON.parse($("#chart-charitytomoney").val().replace(/\'/g,'\"'));
shown in this sample: http://jsfiddle.net/yr35w6nu/9/
The same may be applied to your code with "e;:
var data = JSON.parse($("#chart-charitytomoney").val().replace(/\"/g,'\"'));
Sample parsing quotes: http://jsfiddle.net/yr35w6nu/10/
Option 3
There is also a way to store CSV formatted string:
<input id="chart-charitytomoney" value="Charity 4,10.00;Charity 2,20.00;Charity Donate,100.00;Donate Your Humanity,5920.00;Gift your Work,3155.00;Celebrate Baby Shower,770.00\nRefer Friends,110.00;Gift Your Friends,200.00;Celebrate B\u0027day With Us,220.00;Celebrate Weekend,50.00\nPiggy Bank,4100.00\nGive a Single Gift,4050.00">
and then use it:
var data = anychart.data.set($("#chart-charitytomoney").val(),{rowsSeparator: ';'});
http://jsfiddle.net/yr35w6nu/13/
I have this dynamic link.
Every 10 minutes refresh new data from weather station.
I want to sent this data in mysql using php or javascript.
The html link have follow result:
imerominia="26/08/16";
ora="20:22";
sunriseTime=" 06:48";
sunsetTime="20:08";
ForecastStr=" Increasing clouds with little temperature change. Precipitation possible within 24 to 48 hrs.";
tempUnit="°C";
outsideTemp="27.3";
hiOutsideTemp="31.6";
hiOutsideTempAT="18:01";
lowOutsideTemp="20.8";
lowOutsideTempAT="00:32";
hiMonthlyOutsideTemp="36.7";
lowMonthlyOutsideTemp="13.4";
hiYearlyOutsideTemp="38.6";
lowYearlyOutsideTemp="-8.9";
humUnit="% ";
outsideHumidity="39";
hiHumidity="78";
hiHumidityAT=" 00:31";
lowHumidity="32";
lowHumidityAT="12:02";
hiMonthlyHumidity="94";
lowMonthlyHumidity="27";
hiYearlyHumidity="98";
lowYearlyHumidity="20";
outsideDewPt="12.2";
hiDewpoint="17.2";
hiDewpointAT="00:37";
lowDewpoint="10.6";
lowDewpointAT="05:44";
hiMonthlyDewpoint="22.8";
lowMonthlyDewpoint="10.0";
hiYearlyDewpoint="25.0";
lowYearlyDewpoint="-12.2";
windUnit="km/hr";
windSpeed="11.3";
wind10Avg="4.8";
hiWindSpeed="25.7";
hiWindSpeedAT="06:04";
hiMonthlyWindSpeed="53.1";
hiYearlyWindSpeed="61.2";
windDirection="EbS";
moires="96°";
windChill="27.3";
lowWindchill="20.6";
lowWindchillAT="00:32";
lowMonthlyWindchill="13.3";
lowYearlyWindchill="-9.4";
outsideHeatIndex="27.3";
hiHeatindex="31.7";
hiHeatindexAT="18:11";
hiMonthlyHeatindex="42.2";
hiYearlyHeatindex="45.0";
barUnit="hPa";
barometer="1016.7";
BarTrend="Rising Slowly";
hiBarometer="1019.3";
hiBarometerAT=" 09:07";
lowBarometer="1015.6";
lowBarometerAT=" 17:19";
lowMonthlyBarometer="1007.2";
hiMonthlyBarometer="1023.5";
lowYearlyBarometer="993.7";
hiYearlyBarometer="1037.6";
rainUnit="mm";
dailyRain="0.0";
stormRain="0.0";
monthlyRain="16.0";
totalRain="307.6";
rateUnit="mm/hr";
rainRate="0.0";
hiRainRate="0.0";
hiRainRateAT=" n/a";
hiMonthlyRainRate="36.6";
hiYearlyRainRate="1645.8";
solarUnit="W/m²";
solarRad="n/a";
hiSolarRad="0";
hiSolarRadAT="n/a";
hiMonthlySolarRad="0";
hiYearlySolarRad="0";
uvUnit="index";
uv="0.0";
hiUV="0.0";
hiUVAT="n/a";
hiMonthlyUV="0.0";
hiYearlyUV="0.0";
I try some tricks but I can't find the solution.
How can this data insert to mysql database auto every 10 minutes or 1 hour or ... etc?
Scenario:
I need to plot data in Zingchart from a CSV that will have a fixed number of columns (37). This CSV has a header that will define the legend of the graph.
Problem:
If the number of elements I define in the header is less than 10 (including the X - Axis name) then everything is good. The first nine columns get a proper legend, and the others are named using the default Series XX. Link to the gist
In the data I've tried messing around with quotes " and ' but it didn't change the behavior.
Sample graph
Times|Line_1|Line_2|Line_3|Line_4|Line_5|Line_6|Line_7|Line_8|Line_9|"Line_10" "Line_11" Line_12 Line_13 Line_14 Line_15 Line_16 Line_17 Line_18 Line_19 Line_20 Line_21 Line_22 Line_23 Line_24 Line_25 Line_26 Line_27 Line_28 Line_29 Line_30 Line_31 Line_32 Line_33 Line_34 Line_35 Line_36
1218604835|0.0756521739130562|-0.151304347825771|||||||0.122608695652389|||||||-0.130434782608745|0.0443478260868915|0.232173913043425|||||||-0.172173913043707|||||||||||
1218604836|-0.427826086956543|-0.253043478260679|||||||-0.279130434782701|||||||-0.130434782608745|-0.0573913043477887|0.232173913043425|||||||-0.27391304347816|||||||||||
1218604837|-0.229565217391325|0.0469565217390482|||||||-0.0808695652174265|||||||0.0678260869565293|0.242608695652279|-0.169565217391664|||||||0.0260869565217945|||||||||||
1218604838|0.370434782608697|0.34695652173923|||||||-0.482608695652061|||||||0.0678260869565293|-0.159130434782583|-0.169565217391664|||||||0.224347826086841|||||||||||
1218604839|-0.133043478260902|-0.156521739130767|||||||0.117391304347848|||||||0.266086956522031|0.039130434782578|0.4304347826087|||||||-0.279130434782701|||||||||||
However, as soon as I continue including elements in the header using the CSV | separator, things start to go wrong. Ideally, the file should be as this one:
Sample graph
Times|Line_1|Line_2|Line_3|Line_4|Line_5|Line_6|Line_7|Line_8|Line_9|Line_10|Line_11|Line_12|Line_13|Line_14|Line_15|Line_16|Line_17|Line_18|Line_19|Line_20|Line_21|Line_22|Line_23|Line_24|Line_25|Line_26|Line_27|Line_28|Line_29|Line_30|Line_31|Line_32|Line_33|Line_34|Line_35|Line_36
1218604835|0.0756521739130562|-0.151304347825771|||||||0.122608695652389|||||||-0.130434782608745|0.0443478260868915|0.232173913043425|||||||-0.172173913043707|||||||||||
1218604836|-0.427826086956543|-0.253043478260679|||||||-0.279130434782701|||||||-0.130434782608745|-0.0573913043477887|0.232173913043425|||||||-0.27391304347816|||||||||||
1218604837|-0.229565217391325|0.0469565217390482|||||||-0.0808695652174265|||||||0.0678260869565293|0.242608695652279|-0.169565217391664|||||||0.0260869565217945|||||||||||
1218604838|0.370434782608697|0.34695652173923|||||||-0.482608695652061|||||||0.0678260869565293|-0.159130434782583|-0.169565217391664|||||||0.224347826086841|||||||||||
1218604839|-0.133043478260902|-0.156521739130767|||||||0.117391304347848|||||||0.266086956522031|0.039130434782578|0.4304347826087|||||||-0.279130434782701|||||||||||
But then the output is completely messed up. Link to the gist
The HTML code for the graph I'm running in local with the same results:
<!DOCTYPE html>
<html>
<head>
<script src="zingchart_2.3.2/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "zingchart_2.3.2/modules/";
</script>
<style></style>
</head>
<body>
<div id='myChart'></div>
<script>
var myConfig = {
"globals":{
"font-family":"Arial"
},
"legend":{
"layout":"4x",
"adjust-layout":true,
"align":"center",
"background-color":"none",
"shadow":0,
"border-width":0,
"vertical-align":"bottom"
},
"type": "line",
"utc":true,
"csv": {
"url": "zingchart_2.3.2/sample_5lines.dat",
"separator": "|",
"vertical-labels": true,
},
"plot":{
"line-width":2,
"active-area":true,
"shadow":0,
"exact":true,
"marker":{
"size":4
},
"hover-marker":{
"size":3
},
"preview":true,
"spline":false,
"text":"%v",
},
"plotarea":{
"adjust-layout":1,
"width":"100%",
"height":200,
"position":"0% 0%",
"margin-top":60,
"margin-right":60,
"margin-left":70,
"margin-bottom":105
},
"preview":{
"visible":true,
"height":40,
"position":"0 370",
"margin-top":10,
"margin-bottom":15
},
"scale-x":{
"format":"%v",
"zooming":true,
"label":{
"margin-top":100
},
"tick":{
"line-color":"black",
"line-width":"2px",
"size":8,
},
"transform":{
"type":"date",
"all":"%d/%M/%Y\n%H:%i:%s",
}
},
"scale-y":{
"zooming":true,
"decimals":0,
},
"tooltip":{
<!--"js-rule":"myfunc()",-->
"shadow":0,
"font-color":"#000",
"text":"%t - %k<br><br>%v<br>Hz",
"border-radius":"5px",
"sticky":true,
"timeout":500,
"decimals":6
}
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 500,
width: "100%"
});
</script>
</body>
</html>
Question:
What am I doing wrong?
There are a couple issues with the JSON that I found.
1.In the CSV object, you would need to add horizontal-labels:true to set allow ZingChart to pull the appropriate labels from your dataset. In your case, the second row contains the labels for each series.
The text "%v" is no longer necessary inside of the plot object. This essentially assigns a label to each series, but setting horizontal-labels:true fixes this.
I have increased your decimals in the scale-y object to 2 instead of 0 so the scale-y does not appear to have duplicate values. You could also use exponent notation as shown here: http://www.zingchart.com/docs/design-and-styling/formatting-numbers/?q=customizable%20number%20formats
I'm assuming the first column of values in your dat file are UNIX time stamps? These values are converted directly using the Javascript Date object, so `new Date(1218604835) would actually return a date of Wed Jan 14 1970. If they are indeed UNIX time stamps, the values would need to be multiplied by 1000 so that new Date(1218604835000) would return Tue Aug 12 2008.
Plnkr here: http://plnkr.co/edit/jQ0WuMsRBgEwV6s0fKlN?p=preview
Let me know if you need any further help! - ZingChart Member.
In a SAPUI5 application I am using two XML views showing a Chart each with a model bound to an OData service.
On the first view I build the chart using the following code:
<ma:Chart id="idChart" height="90%" width="100%" type="Column"
rows="{/MySet}" tap="onTapEvt">
<ma:category>
<ma:Category column="category" displayName="Category" />
</ma:category>
<ma:series>
<ma:Series column="intervallSeries" displayName="Intervall"/>
</ma:series>
<ma:values>
<ma:Value expression="mValue" displayName="Anzahl" />
</ma:values>
<ma:columns>
<ma:Column name="category" value="{Category}" />
<ma:Column name="intervallSeries" value="{Intervall}" />
<ma:Column name="mValue" value="{Anzahl}" type="number" />
</ma:columns>
</ma:Chart>
Let's assume I have four categories in my example chart named 'A', 'B', 'C' and 'D'.
When I click on the category 'C' in the Chart I would like to show another Chart on the next page using the filtered data from my OData service by filtering on "Category eq 'C'".
Therefore I use the function
onTapEvt: function(oEvent) {
var selectedCategory = oEvent.oSource._selectedCatIdx; // 2 when I select 'C'
// --> How do I get Category value 'C' instead of selectedIndex 2 here <--
app.to("nextPage", "slide", selectedCategory);
}
The object oEvent.oSource has all the MAKit Chart data in it, e.g. the selected index of the category in which I have clicked.
Now I am searching for a way to read the bound value of Category with index 2 from the chart.
Any ideas? In the SAPUI5 SDK I could not find a useful method for this.
You can use the following code to get the selected category :
var myChart = this.getView().byId("idChart");
var cat = myChart.getSelectedCategory();