B4J Tutorial [ABMaterial] CustomJQPlot

I was curious as to whether I would be able to create my first ABMaterial component. Well, the journey has been very interesting.

This comprises of more than 60 examples of setting the chart options. In your page's BuildPage method, only include the plugin js files applicable to what you want to do and not all. For example if you want a bar chart that will display dates you will need to add barRenderer and dateAxisRenderer. If for example you will have a bubble chart, only include the bubbleRenderer js. I have tried to consolidate these into one js, that distorts the charts.

Reproduction:
1. Download JQPlot from http://www.jqplot.com/
2. Copy the respective javascript files to the www/appname/js/custom and www/appname/css/custom folders of your app. You will find other js files in the plugins folder.
3. For now this is what I have added in my project, added to the BuildPage method of my page.

B4X: 
'save file in www/appname/js/custom
    page.AddExtraJavaScriptFile("custom/excanvas.js")
    page.AddExtraJavaScriptFile("custom/jquery.jqplot.min.js")
    'add plugins for other rendering, these are optional depending on what you want to do.
   page.AddExtraJavaScriptFile("custom/jqplot.barRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.categoryAxisRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.canvasTextRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.canvasAxisLabelRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.logAxisRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.dateAxisRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.cursor.js")
   page.AddExtraJavaScriptFile("custom/jqplot.highlighter.js")
   page.AddExtraJavaScriptFile("custom/jqplot.funnelRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.trendline.js")
   page.AddExtraJavaScriptFile("custom/jqplot.bubbleRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.blockRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.pieRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.donutRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.canvasAxisTickRenderer.js")
   page.AddExtraJavaScriptFile("custom/jqplot.pointLabels.js")
   page.AddExtraJavaScriptFile("custom/jqplot.canvasOverlay.js")
    'save file in www/appname/css/custom
    page.AddExtraCSSFile("custom/jquery.jqplot.min.css")

5. Add the attached CustomJQPlot class to your ABM project and update it accordingly e.g. appname, page name etc.

6. In the Class_Globals, I declared each of my examples to show the features..

B4X: 
Private custJQPlot As CustomJQPlot
    Private jqPlotBar As CustomJQPlot
    Private example3 As CustomJQPlot
    Private example4 As CustomJQPlot
    Private example5 As CustomJQPlot
    Private example6 As CustomJQPlot
    Private example7 As CustomJQPlot
    Private example8 As CustomJQPlot
    Private example9 As CustomJQPlot
    Private example10 As CustomJQPlot
    Private example11 As CustomJQPlot
    Private example12 As CustomJQPlot
    Private example13 As CustomJQPlot
    Private example14 As CustomJQPlot
    Private example15 As CustomJQPlot
    Private example16 As CustomJQPlot
    Private example17 As CustomJQPlot
    Private example18 As CustomJQPlot
    Private example19 As CustomJQPlot
    Private example20 As CustomJQPlot
    Private example21 As CustomJQPlot
    Private example22 As CustomJQPlot
    Private example23 As CustomJQPlot
    Private example24 As CustomJQPlot

7. In ConnectPage, create your custom components, the are comments you can check about how this has been done. I just followed the example to create a component.

B4X: 
'define a line chart
    custJQPlot.Initialize(page, "custJQPlot")
    page.Cell(2,1).AddComponent(custJQPlot.ABMComp)
    custJQPlot.SetTitle("Example 1: Simple Chart")
    custJQPlot.AddSeriesData9(100,110,140,130,80,75,120,130,100)
    custJQPlot.IsAnimated(True)

    'define a bar chart
    jqPlotBar.Initialize(page, "jqPlotBar")
    page.Cell(2,2).AddComponent(jqPlotBar.ABMComp)
    jqPlotBar.SetTitle("Example 2: Set YAxis Min (70) Max (150)")
    jqPlotBar.SetWidthHeight("100%","600px")
    jqPlotBar.AddSeriesData5(100,110,140,130,80)
    jqPlotBar.axesDefaults.yAxis.yMin = 70
    jqPlotBar.axesDefaults.yaxis.yMax=150

    example3.Initialize(page, "example3")
    page.Cell(3,1).AddComponent(example3.ABMComp)
    example3.SetTitle("Example 3: No Grid Lines")
    example3.SetWidthHeight("100%","600px")
    example3.AddSeriesData5(100,110,140,130,80)
    example3.drawGridlines = False

    example4.Initialize(page, "example4")
    page.Cell(3,2).AddComponent(example4.ABMComp)
    example4.SetTitle("Example 4: Multiple Series")
    example4.SetWidthHeight("100%","600px")
    example4.AddSeriesData6(1,2,3,2,3,4)
    example4.AddSeriesData6(3,4,5,6,5,7)
    example4.AddSeriesData6(5,6,8,9,7,9)
    example4.AddSeriesData6(7,8,9,11,10,11)

    example5.Initialize(page, "example5")
    page.Cell(4,1).AddComponent(example5.ABMComp)
    example5.SetTitle("Example 5: Axes Defaults Min 0, Max 20")
    example5.SetWidthHeight("100%","600px")
    example5.AddSeriesData9(1,4,8,13,8,7,12,10,5)
    example5.axesDefaults.xyMin = 0
    example5.axesdefaults.xyMax = 20

    example6.Initialize(page, "example6")
    page.Cell(4,2).AddComponent(example6.ABMComp)
    example6.SetTitle("Example 6: Series Defaults ShowMarker: False")
    example6.SetWidthHeight("100%","600px")
    example6.AddSeriesData6(1,2,3,2,3,4)
    example6.AddSeriesData6(3,4,5,6,5,7)
    example6.AddSeriesData6(5,6,8,9,7,9)
    example6.AddSeriesData6(7,8,9,11,10,11)
    example6.seriesDefaults.showMarker = False
    'Log(example6.ToString)

    example7.Initialize(page, "example7")
    page.Cell(5,1).AddComponent(example7.ABMComp)
    example7.SetTitle("Example 7: Bar Chart")
    example7.SetWidthHeight("100%","600px")
    example7.SetChartType(example7.ChartType.bar)
    example7.AddSeriesData6(1,2,3,2,3,4)
    'example8.SaveScript(File.DirApp,example8.ABMComp.ID & ".txt")
    'Log(example7.ToString)

    example8.Initialize(page, "example8")
    page.Cell(5,2).AddComponent(example8.ABMComp)
    example8.SetTitle("Example 8: Bar Chart Vary Colors")
    example8.SetWidthHeight("100%","600px")
    example8.SetChartType(example8.ChartType.bar)
    example8.AddSeriesData6(1,2,3,2,3,4)
    example8.UseVaryingColors(True)
    'example8.SaveScript(File.DirApp,example8.ABMComp.ID & ".txt")
    'Log(example8.ToString)

    example9.Initialize(page, "example9")
    page.Cell(6,1).AddComponent(example9.ABMComp)
    example9.SetTitle("Example 9: Axes Labels/Titles")
    example9.SetWidthHeight("100%","600px")
    example9.AddSeriesData6(1,2,3,2,3,4)
    example9.SetAxisTitles("X Axis","Y Axis")
  
    example10.Initialize(page, "example10")
    page.Cell(6,2).AddComponent(example10.ABMComp)
    example10.SetTitle("Example 10: X Axis Padding (1)")
    example10.SetWidthHeight("100%","600px")
    example10.AddSeriesData6(1,2,3,2,3,4)
    example10.SetAxisTitles("X Axis","Y Axis")
    example10.SetXAxisPadding(1)
    'Log(example10.ToString)

    example11.Initialize(page, "example11")
    page.Cell(7,1).AddComponent(example11.ABMComp)
    example11.SetTitle("Example 11: X Axis Padding (2)")
    example11.SetWidthHeight("100%","600px")
    example11.AddSeriesData6(1,2,3,2,3,4)
    example11.SetAxisTitles("X Axis","Y Axis")
    example11.SetXAxisPadding(2)
    'Log(example11.ToString)

    example12.Initialize(page, "example12")
    page.Cell(7,2).AddComponent(example12.ABMComp)
    example12.SetTitle("Example 12: X Axis Min(1), Max(9)")
    example12.SetWidthHeight("100%","600px")
    example12.AddSeriesData6(1,2,3,2,3,4)
    example12.SetAxisTitles("X Axis","Y Axis")
    example12.SetXAxisMinMax(1,9)
    'Log(example12.ToString)

    example13.Initialize(page, "example13")
    page.Cell(8,1).AddComponent(example13.ABMComp)
    example13.SetTitle("Example 13: X Axis numberTicks(5)")
    example13.SetWidthHeight("100%","600px")
    example13.AddSeriesData9(1,2,3,2,3,4,8,10,12)
    example13.SetAxisTitles("X Axis","Y Axis")
    example13.SetXAxisNumberTicks(5)
    'Log(example13.ToString)

    example14.Initialize(page, "example14")
    page.Cell(8,2).AddComponent(example14.ABMComp)
    example14.SetTitle("Example 14: X Axis Own Ticks")
    example14.SetWidthHeight("100%","600px")
    example14.AddSeriesData9(1,2,3,2,3,4,8,10,12)
    example14.SetAxisTitles("X Axis","Y Axis")
    example14.AddXAxisTick(1)
    example14.AddXAxisTick(2)
    example14.AddXAxisTick(3)
    example14.AddXAxisTick(7)
    example14.AddXAxisTick(9)
    'Log(example14.ToString)

    example15.Initialize(page, "example15")
    page.Cell(9,1).AddComponent(example15.ABMComp)
    example15.SetTitle("Example 15: Log Scale i.e Large Data Sets")
    example15.SetWidthHeight("100%","600px")
    example15.AddSeriesData2(0,1.2)
    example15.AddSeriesData2(10,2.4)
    example15.AddSeriesData2(20,5.6)
    example15.AddSeriesData2(30,12)
    example15.AddSeriesData2(40,23)
    example15.AddSeriesData2(50,60)
    example15.AddSeriesData2(60,120)
    example15.AddSeriesData2(70,270)
    example15.AddSeriesData2(80,800)
    example15.SetYAxisRenderer(example15.Renderer.LogAxisRenderer)
    example15.SingleSeries = True  ' IMPORTANT
    'Log(example15.ToString)

    example16.Initialize(page, "example16")
    page.Cell(9,2).AddComponent(example16.ABMComp)
    example16.SetTitle("Example 16: Series with Hex Colors:")
    example16.SetWidthHeight("100%","600px")
    example16.AddSeries("a", "#105567")
    example16.AddSeries("b", "#805567")
    example16.AddSeries("c", "#bb5567")
    example16.AddSeries("d", "#ff5567")
    example16.AddSeriesData6(1,2,3,2,3,4)
    example16.AddSeriesData6(3,4,5,6,5,7)
    example16.AddSeriesData6(5,6,8,9,7,9)
    example16.AddSeriesData6(7,8,9,11,10,11)
    'Log(example16.ToString)

    example17.Initialize(page, "example17")
    page.Cell(10,1).AddComponent(example17.ABMComp)
    example17.SetTitle("Example 17: Series with RGBA Colors")
    example17.SetWidthHeight("100%","600px")
    example17.AddSeriesrgba("a", 16,85,103,0.2)
    example17.AddSeriesrgba("b", 128,85,103,0.6)
    example17.AddSeriesrgb("c", 187,85,103)
    example17.AddSeriesrgb("d", 250, 85, 103)
    example17.AddSeriesData6(1,2,3,2,3,4)
    example17.AddSeriesData6(3,4,5,6,5,7)
    example17.AddSeriesData6(5,6,8,9,7,9)
    example17.AddSeriesData6(7,8,9,11,10,11)
    'Log(example17.ToString)

    example18.Initialize(page, "example18")
    page.Cell(10,2).AddComponent(example18.ABMComp)
    example18.SetTitle("Example 18: Smooth Lines")
    example18.SetWidthHeight("100%","600px")
    example18.AddSeriesrgba("a", 16,85,103,0.2)
    example18.AddSeriesrgba("b", 128,85,103,0.6)
    example18.AddSeriesrgb("c", 187,85,103)
    example18.AddSeriesrgb("d", 250, 85, 103)
    example18.AddSeriesData6(1,2,3,2,3,4)
    example18.AddSeriesData6(3,4,5,6,5,7)
    example18.AddSeriesData6(5,6,8,9,7,9)
    example18.AddSeriesData6(7,8,9,11,10,11)
    example18.IsSmooth(True)

    example19.Initialize(page, "example19")
    page.Cell(11,1).AddComponent(example19.ABMComp)
    example19.SetTitle("Example 19: Line & Marker Styles")
    example19.SetWidthHeight("100%","600px")
    example19.AddSeriesData6(1,2,3,2,3,4)
    example19.AddSeriesData6(3,4,5,6,5,7)
    example19.AddSeriesData6(5,6,8,9,7,9)
    example19.AddSeriesData6(7,8,9,11,10,11)
    example19.AddSeriesData6(6,3,2,12,13,16)
    example19.AddSeriesOptions("a", "dashed",2,"diamond",0,True)
    example19.AddSeriesOptions("b", "",0,"x",7,False)
    example19.AddSeriesOptions("c","",0,"circle",0,True)
    example19.AddSeriesOptions("d", "dotted", 5,"filledSquare",10,True)
    example19.AddSeriesOptions("e", "-.", 0,"",0,True)
    example19.IsAnimated(True)
    'Log(example19.ToString)

    example20.Initialize(page, "example20")
    page.Cell(11,2).AddComponent(example20.ABMComp)
    example20.SetTitle("Example 20: Series Defaults Marker Options")
    example20.SetWidthHeight("100%","600px")
    example20.AddSeriesData6(1,2,3,2,3,4)
    example20.AddSeriesData6(3,4,5,6,5,7)
    example20.AddSeriesData6(5,6,8,9,7,9)
    example20.AddSeriesData6(7,8,9,11,10,11)
    example20.AddSeriesData6(6,3,2,12,13,16)
    example20.AddSeriesOptions("a", "dashed",2,"diamond",0,True)
    example20.AddSeriesOptions("b", "",0,"x",7,False)
    example20.AddSeriesOptions("c","",0,"circle",0,True)
    example20.AddSeriesOptions("d", "dotted", 5,"filledSquare",10,True)
    example20.AddSeriesOptions("e", "-.", 0,"",0,True)
    example20.SeriesDefaultsMarkerOptionsShow(False)
    example20.IsSmooth(True)

    'note the values inside single quotes
    example21.Initialize(page, "example21")
    page.Cell(12,1).AddComponent(example21.ABMComp)
    example21.SetTitle("Example 21: Handling Date Values")
    example21.SetWidthHeight("100%","600px")
    example21.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
    example21.SetXAxisTickOptionsFormatString("'%d %b'")   ' shows dd MMM
    example21.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
    example21.AddSeriesData2("'14-Oct-2012'",1300.41)
    example21.AddSeriesData2("'2012/10/16'",1322.88)
    example21.AddSeriesData2("'10/18/2012'",1308.16)
    example21.AddSeriesData2("'20-Oct-2012'",1305.01)
    example21.AddSeriesData2("'22-Oct-2012'",1290.67)
    example21.AddSeriesData2("'17 Oct 2012'",1312.41)
    example21.AddSeriesData2("'19-Oct-2012'",1310.71)
    example21.AddSeriesData2("'21-Oct-2012'",1300.85)
    example21.SingleSeries = True  'IMPORTANT

    'note the values inside single quotes
    example22.Initialize(page, "example22")
    page.Cell(12,2).AddComponent(example22.ABMComp)
    example22.SetTitle("Example 22: Handling Time Values")
    example22.SetWidthHeight("100%","600px")
    example22.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
    example22.SetXAxisTickOptionsFormatString("'%R'")   ' shows HH:mm
    example22.AddSeriesData2("'2012-10-14 08:00AM'",30)
    example22.AddSeriesData2("'2012-10-14 18:00AM'",60)
    example22.AddSeriesData2("'2012-10-14 00:00PM'",120)
    example22.AddSeriesData2("'2012-10-14 02:00PM'",60)
    example22.AddSeriesData2("'2012-10-14 04:00PM'",100)
    example22.AddSeriesData2("'2012-10-14 06:00PM'",40)
    example22.SetTitles("Example 22: Museum Visitors","Time","Visitors")
    example22.SingleSeries = True  'IMPORTANT

    example23.Initialize(page, "example23")
    page.Cell(13,1).AddComponent(example23.ABMComp)
    example23.SetTitle("Example 23: Cursor Highlighter")
    example23.SetWidthHeight("100%","600px")
    example23.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
    example23.SetXAxisTickOptionsFormatString("'%b %#d'")   ' MMM dd
    example23.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
    example23.AddSeriesData2("'14-Oct-2012'",1300.41)
    example23.AddSeriesData2("'2012/10/16'",1322.88)
    example23.AddSeriesData2("'10/18/2012'",1308.16)
    example23.AddSeriesData2("'20-Oct-2012'",1305.01)
    example23.AddSeriesData2("'22-Oct-2012'",1290.67)
    example23.AddSeriesData2("'17 Oct 2012'",1312.41)
    example23.AddSeriesData2("'19-Oct-2012'",1310.71)
    example23.AddSeriesData2("'21-Oct-2012'",1300.85)
    example23.SingleSeries = True  'IMPORTANT
    example23.SetHighlighter(True,7.5)
    example23.SetCursor(False,"") ' hide cursor

    example24.Initialize(page, "example24")
    page.Cell(13,2).AddComponent(example24.ABMComp)
    example24.SetTitle("Example 24: Data Points Highlights")
    example24.SetWidthHeight("100%","600px")
    example24.SetXAxisRenderer(example21.Renderer.DateAxisRenderer)
    example24.SetXAxisTickOptionsFormatString("'%b %#d'")   ' MMM dd
    example24.SetYAxisTickOptionsFormatString("'$%d'")        ' show money sign and amount
    example24.AddSeriesData2("'14-Oct-2012'",1300.41)
    example24.AddSeriesData2("'2012/10/16'",1322.88)
    example24.AddSeriesData2("'10/18/2012'",1308.16)
    example24.AddSeriesData2("'20-Oct-2012'",1305.01)
    example24.AddSeriesData2("'22-Oct-2012'",1290.67)
    example24.AddSeriesData2("'17 Oct 2012'",1312.41)
    example24.AddSeriesData2("'19-Oct-2012'",1310.71)
    example24.AddSeriesData2("'21-Oct-2012'",1300.85)
    example24.SingleSeries = True  'IMPORTANT
    example24.SetHighlighter(True,7.5)
    example24.SetCursor(True, "ne")
    Log(example24.ToString)

8. NB: The AddSeriesDataXXX methods will be updated, this has been created whilst learning how the jqplot framework work, thus the series definitions will be tweaked soon enough.

01-02.png


03-06.png


07-10.png


11-14.png


15-18.png


19-22.png
 

Attachments

  • CustomJQPlot.bas
    24 KB · Views: 797
Last edited:
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
When one hovers the mouse over the pointers for example 23 and 24, tooltips are shown. Example 24, shows on top right of the chart.

23-24.png


Whilst the chart can resize themselves after you refresh the page if you change the orientation / resize the view area, the display speed is quite nice for my liking and creating these charts is very simple with a few lines of code too. I like very much.
 
Harris

Harris

Expert
Licensed User
Longtime User
That is much extra JS to load.
Does not seem as simple Google charts.
Can one zoom in?

There are many options in the charting area... The best of which work off-line. Google charts in NOT one of these.
Just saying...

Thanks
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Harris said:
That is much extra JS to load.
Does not seem as simple Google charts.
Can one zoom in?

There are many options in the charting area... The best of which work off-line. Google charts in NOT one of these.
Just saying...

Thanks
Click to expand...
There is a zoom example that I will look at as soon as I'm comfortable with these charts. Each example is meant to highlight a particular section of option settings.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Example 25-40 ConnectPage Source Code..

B4X: 
example25.Initialize(page, "example25")
    page.Cell(14,1).AddComponent(example25.ABMComp)
    example25.SetTitle("Example 25: Funnel Chart")
    example25.SetWidthHeight("100%","600px")
    example25.SetChartType(example25.ChartType.funnel)
    example25.AddSeriesData2("'Sony'",1)
    example25.AddSeriesData2("'Samsung'",13)
    example25.AddSeriesData2("'LG'",14)
    example25.AddSeriesData2("'Phillips'",5)
    example25.SingleSeries = True  'IMPORTANT
    'Log(example25.ToString)
   
    example26.Initialize(page, "example26")
    page.Cell(14,2).AddComponent(example26.ABMComp)
    example26.SetTitle("Example 26: More Funnel Chart")
    example26.SetWidthHeight("100%","600px")
    example26.SetChartType(example26.ChartType.funnel)
    example26.AddSeriesData2("'Sony'",1)
    example26.AddSeriesData2("'Samsung'",13)
    example26.AddSeriesData2("'LG'",14)
    example26.AddSeriesData2("'Phillips'",5)
    example26.SetDataLabels("percent",True)
    example26.SingleSeries = True  'IMPORTANT
    example26.SetFunnelSectionMargin(0)        ' no spacing between item
    'example26.SetLegend("e",True)
   
    example27.Initialize(page, "example27")
    page.Cell(15,1).AddComponent(example27.ABMComp)
    example27.SetTitle("Example 27: Funnel Fill")
    example27.SetWidthHeight("100%","600px")
    example27.SetChartType(example27.ChartType.funnel)
    example27.AddSeriesData2("'Sony'",1)
    example27.AddSeriesData2("'Samsung'",13)
    example27.AddSeriesData2("'LG'",14)
    example27.AddSeriesData2("'Phillips'",5)
    example27.SetDataLabels("percent",True)
    example27.SingleSeries = True  'IMPORTANT
    'example27.SetLegend("e",True)
    example27.SetFill(False, 4)
   
    example28.Initialize(page, "example28")
    page.Cell(15,2).AddComponent(example28.ABMComp)
    example28.SetTitle("Example 28: Funnel Percentage")
    example28.SetWidthHeight("100%","600px")
    example28.SetChartType(example28.ChartType.funnel)
    example28.AddSeriesData2("'Sony'",1)
    example28.AddSeriesData2("'Samsung'",13)
    example28.AddSeriesData2("'LG'",14)
    example28.AddSeriesData2("'Phillips'",5)
    example28.SetDataLabels("percent",True)
    example28.SingleSeries = True  'IMPORTANT
   
    ' scatter
    example29.Initialize(page, "example29")
    page.Cell(16,1).AddComponent(example29.ABMComp)
    example29.SetTitle("Example 29: Scatter Chart")
    example29.SetWidthHeight("100%","600px")
    example29.AddSeriesData2(400,35)
    example29.AddSeriesData2(402,37)
    example29.AddSeriesData2(650,55)
    example29.AddSeriesData2(653,56)
    example29.AddSeriesData2(650,50)
    example29.AddSeriesData2(700,55)
    example29.AddSeriesData2(600,37)
    example29.AddSeriesData2(601,43)
    example29.AddSeriesData2(450,38)
    example29.AddSeriesData2(473,37)
    example29.SingleSeries = True  'IMPORTANT
    example29.SetChartType(example29.ChartType.scatter)
   
    ' scatter
    example30.Initialize(page, "example30")
    page.Cell(16,2).AddComponent(example30.ABMComp)
    example30.SetTitle("Example 30: Scatter Chart Trends")
    example30.SetWidthHeight("100%","600px")
    example30.AddSeriesData2(400,35)
    example30.AddSeriesData2(402,37)
    example30.AddSeriesData2(650,55)
    example30.AddSeriesData2(653,56)
    example30.AddSeriesData2(650,50)
    example30.AddSeriesData2(700,55)
    example30.AddSeriesData2(600,37)
    example30.AddSeriesData2(601,43)
    example30.AddSeriesData2(450,38)
    example30.AddSeriesData2(473,37)
    example30.SingleSeries = True  'IMPORTANT
    example30.SetChartType(example30.ChartType.scatter)
    example30.AddSeriesTrendLine("a",True, "#000ff", "exponential")
   
    ' bubble
    example31.Initialize(page, "example31")
    page.Cell(17,1).AddComponent(example31.ABMComp)
    example31.SetWidthHeight("100%","600px")
    example31.SingleSeries = True  'IMPORTANT
    example31.SetChartType(example31.ChartType.bubble)
    example31.AddBubbleData(301,60,29392,"Italy")
    example31.AddBubbleData(675,65,34205,"France")
    example31.AddBubbleData(506,46,30625,"Spain")
    example31.AddBubbleData(357,81,37896,"Germany")
    example31.AddBubbleData(450,9,37333,"Sweden")
    example31.SetTitles("Example 31: Bubble Chart with Gradient Fills","Total area [*1000 km3]","Population [million]")
    example31.seriesDefaults.shadow = True
    example31.seriesDefaults.rendererOptions.bubbleGradients = True
   
    ' bubble
    example32.Initialize(page, "example32")
    page.Cell(17,2).AddComponent(example32.ABMComp)
    example32.SetWidthHeight("100%","600px")
    example32.SingleSeries = True  'IMPORTANT
    example32.SetChartType(example32.ChartType.bubble)
    example32.AddBubbleDataWithColor(301,60,29392,"Italy","#b39524")
    example32.AddBubbleDataWithColor(675,65,34205,"France","#a39544")
    example32.AddBubbleDataWithColor(506,46,30625,"Spain","#a39564")
    example32.AddBubbleDataWithColor(357,81,37896,"Germany","#ff2524")
    example32.AddBubbleDataWithColor(450,9,37333,"Sweden","#b39524")
    example32.SetTitles("Example 32: Bubble Chart with Own Colors","Total area [*1000 km3]","Population [million]")
    example32.seriesDefaults.shadow = False
    example32.seriesDefaults.rendererOptions.bubbleGradients = False
   
    ' bubble
    example33.Initialize(page, "example33")
    page.Cell(18,1).AddComponent(example33.ABMComp)
    example33.SetWidthHeight("100%","600px")
    example33.SingleSeries = True  'IMPORTANT
    example33.SetChartType(example33.ChartType.bubble)
    example33.AddBubbleDataWithColor(301,60,29392,"Italy","#b39524")
    example33.AddBubbleDataWithColor(675,65,34205,"France","#a39544")
    example33.AddBubbleDataWithColor(506,46,30625,"Spain","#a39564")
    example33.AddBubbleDataWithColor(357,81,37896,"Germany","#ff2524")
    example33.AddBubbleDataWithColor(450,9,37333,"Sweden","#b39524")
    example33.SetTitles("Example 33: Bubble Chart with Transparency","Total area [*1000 km3]","Population [million]")
    example33.seriesDefaults.shadow = True
    example33.seriesDefaults.rendererOptions.bubbleGradients = True
    example33.seriesDefaults.rendererOptions.bubbleAlpha = 0.6
   
    ' block
    example34.Initialize(page, "example34")
    page.Cell(18,2).AddComponent(example34.ABMComp)
    example34.SetWidthHeight("100%","600px")
    example34.SingleSeries = True  'IMPORTANT
    example34.SetChartType(example34.ChartType.block)
    example34.AddBlockData(10,30,"Copper")
    example34.AddBlockData(100,40,"Gold")
    example34.AddBlockData(50,50,"Silver")
    example34.AddBlockData(12,78,"Lead")
    example34.AddBlockData(44,66,"Brass")
    example34.SetTitle("Example 34: Block Chart")
   
    ' block
    example35.Initialize(page, "example35")
    page.Cell(19,1).AddComponent(example35.ABMComp)
    example35.SetWidthHeight("100%","600px")
    example35.SetChartType(example35.ChartType.block)
    example35.AddBlockData(10,30,"Copper")
    example35.AddBlockData(100,40,"Gold")
    example35.AddBlockData(50,50,"Silver")
    example35.AddBlockData(12,78,"Lead")
    example35.AddBlockData(44,66,"Brass")
    example35.SetTitle("Example 35: Block Chart Multi Series")
   
    ' pie chart
    example36.Initialize(page, "example36")
    page.Cell(19,2).AddComponent(example36.ABMComp)
    example36.SetWidthHeight("100%","600px")
    example36.SetChartType(example36.ChartType.pie)
    example36.AddSeriesData2("'Dairy'",212)
    example36.AddSeriesData2("'Meat'",140)
    example36.AddSeriesData2("'Grains'",276)
    example36.AddSeriesData2("'Fish'",131)
    example36.AddSeriesData2("'Vegetables'",510)
    example36.AddSeriesData2("'Fruit'",325)
    example36.SingleSeries = True  'IMPORTANT
    example36.SetTitle("Example 36: Eating Pies")
    example36.SetDataLabels("",True)
    Log(example36.ToString)
   
    ' pie chart
    example37.Initialize(page, "example37")
    page.Cell(20,1).AddComponent(example37.ABMComp)
    example37.SetWidthHeight("100%","600px")
    example37.SetChartType(example37.ChartType.pie)
    example37.AddSeriesData2("'Dairy'",212)
    example37.AddSeriesData2("'Meat'",140)
    example37.AddSeriesData2("'Grains'",276)
    example37.AddSeriesData2("'Fish'",131)
    example37.AddSeriesData2("'Vegetables'",510)
    example37.AddSeriesData2("'Fruit'",325)
    example37.SingleSeries = True  'IMPORTANT
    example37.SetTitle("Example 37: Eating Pies (Values)")
    example37.SetDataLabels("value",True)
    Log(example37.ToString)
   
    ' pie chart
    example38.Initialize(page, "example38")
    page.Cell(20,2).AddComponent(example38.ABMComp)
    example38.SetWidthHeight("100%","600px")
    example38.SetChartType(example38.ChartType.pie)
    example38.AddSeriesData2("'Dairy'",212)
    example38.AddSeriesData2("'Meat'",140)
    example38.AddSeriesData2("'Grains'",276)
    example38.AddSeriesData2("'Fish'",131)
    example38.AddSeriesData2("'Vegetables'",510)
    example38.AddSeriesData2("'Fruit'",325)
    example38.SingleSeries = True  'IMPORTANT
    example38.SetTitle("Example 38: Eating Pies - Slice Margins")
    example38.SetDataLabels("value",True)
    example38.SetSliceMargin(6)
    Log(example38.ToString)
   
    'SetFill
    example39.Initialize(page, "example39")
    page.Cell(21,1).AddComponent(example39.ABMComp)
    example39.SetWidthHeight("100%","600px")
    example39.SetChartType(example39.ChartType.pie)
    example39.AddSeriesData2("'Dairy'",212)
    example39.AddSeriesData2("'Meat'",140)
    example39.AddSeriesData2("'Grains'",276)
    example39.AddSeriesData2("'Fish'",131)
    example39.AddSeriesData2("'Vegetables'",510)
    example39.AddSeriesData2("'Fruit'",325)
    example39.SingleSeries = True  'IMPORTANT
    example39.SetTitle("Example 39: Eating Sliced Un-Filled Pies")
    example39.SetDataLabels("value",True)
    example39.SetSliceMargin(6)
    example39.SetFill(False,5)
    Log(example39.ToString)
   
    example40.Initialize(page, "example49")
    page.Cell(21,2).AddComponent(example40.ABMComp)
    example40.SetWidthHeight("100%","600px")
    example40.SetChartType(example40.ChartType.donut)
    example40.AddSeriesData2("'Dairy'",212)
    example40.AddSeriesData2("'Meat'",140)
    example40.AddSeriesData2("'Grains'",276)
    example40.AddSeriesData2("'Fish'",131)
    example40.AddSeriesData2("'Vegetables'",510)
    example40.AddSeriesData2("'Fruit'",325)
    example40.SingleSeries = True  'IMPORTANT
    example40.SetTitle("Example 40: Would you like a donut?")
    example40.SetDataLabels("value",True)
    example40.SetSliceMargin(3)
    example40.SetStartAngle(-90)
    Log(example40.ToString)
 

Attachments

  • CustomJQPlot.bas
    31.7 KB · Views: 682
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Known Issues:

1. The Legend has been a little elusive, will see what I can do.
2. Consolidating the js files into one does not work well, tried it, it distorts the displays. Guess will have to pass this up.

B4X: 
    example41.Initialize(page, "example41")
    page.Cell(22,1).AddComponent(example41.ABMComp)
    example41.SetTitle("Example 41: Foreign Customers")
    example41.SetWidthHeight("500px","300px")
    example41.SetChartType(example41.ChartType.bar)
    example41.AddBarData("Germany",12)
    example41.AddBarData("Italy",8)
    example41.AddBarData("Spain",6)
    example41.AddBarData("France",10)
    example41.AddBarData("UK",7)
    example41.SingleSeries = True  'IMPORTANT
    'Log(example41.ToString)
   
    example42.Initialize(page, "example42")
    page.Cell(22,2).AddComponent(example42.ABMComp)
    example42.SetTitle("Example 42: Foreign Customers Rotated XAxis Labels")
    example42.SetWidthHeight("100%","600px")
    example42.SetChartType(example42.ChartType.bar)
    example42.AddBarData("Germany",12)
    example42.AddBarData("Italy",8)
    example42.AddBarData("Spain",6)
    example42.AddBarData("France",10)
    example42.AddBarData("UK",7)
    example42.SingleSeries = True  'IMPORTANT
    example42.RotateXAxisLabels(-30, "10pt")
    'Log(example42.ToString)
   
    example43.Initialize(page, "example43")
    page.Cell(23,1).AddComponent(example43.ABMComp)
    example43.SetTitle("Example 43: Foreign Customers Bar Margins")
    example43.SetWidthHeight("100%","600px")
    example43.SetChartType(example43.ChartType.bar)
    example43.AddBarData("Germany",12)
    example43.AddBarData("Italy",8)
    example43.AddBarData("Spain",6)
    example43.AddBarData("France",10)
    example43.AddBarData("UK",7)
    example43.SingleSeries = True  'IMPORTANT
    example43.RotateXAxisLabels(-30, "10pt")
    example43.SetBarMargins(30)
    'Log(example43.ToString)
   
    example44.Initialize(page, "example44")
    page.Cell(23,2).AddComponent(example44.ABMComp)
    example44.SetTitle("Example 44: Foreign Customers Point Labels")
    example44.SetWidthHeight("100%","600px")
    example44.SetChartType(example44.ChartType.bar)
    example44.AddBarData("Germany",12)
    example44.AddBarData("Italy",8)
    example44.AddBarData("Spain",6)
    example44.AddBarData("France",10)
    example44.AddBarData("UK",7)
    example44.SingleSeries = True  'IMPORTANT
    example44.RotateXAxisLabels(-30, "10pt")
    example44.SetBarMargins(30)
    example44.ShowPointLabels(True,"")
    'Log(example44.ToString)
   
    example45.Initialize(page, "example45")
    page.Cell(24,1).AddComponent(example45.ABMComp)
    example45.SetTitle("Example 45: Foreign Customers Negative Values")
    example45.SetWidthHeight("100%","600px")
    example45.SetChartType(example45.ChartType.bar)
    example45.AddBarData("Germany",-12)
    example45.AddBarData("Italy",-8)
    example45.AddBarData("Spain",-6)
    example45.AddBarData("France",-10)
    example45.AddBarData("UK",-7)
    example45.SingleSeries = True  'IMPORTANT
    example45.RotateXAxisLabels(-30, "10pt")
    example45.SetBarMargins(30)
    example45.ShowPointLabels(True,"")
    example45.DetectNegativeValues(True)  ' IMPORTANT (true by default)
    'Log(example45.ToString)
   
    example46.Initialize(page, "example46")
    page.Cell(24,2).AddComponent(example46.ABMComp)
    example46.SetTitle("Example 46: Foreign Customers +- Values")
    example46.SetWidthHeight("100%","600px")
    example46.SetChartType(example46.ChartType.bar)
    example46.AddBarData("Germany",-12)
    example46.AddBarData("Italy",8)
    example46.AddBarData("Spain",-6)
    example46.AddBarData("France",10)
    example46.AddBarData("UK",-7)
    example46.SingleSeries = True  'IMPORTANT
    example46.RotateXAxisLabels(-30, "10pt")
    example46.SetBarMargins(30)
    example46.ShowPointLabels(True,"")
    'Log(example46.ToString)
   
    example47.Initialize(page, "example47")
    page.Cell(25,1).AddComponent(example47.ABMComp)
    example47.SetTitle("Example 47: Grouped Bar Chart")
    example47.SetWidthHeight("100%","600px")
    example47.SetChartType(example47.ChartType.bar)
    example47.AddCategory("Germany")
    example47.AddCategory("Italy")
    example47.AddCategory("Spain")
    example47.AddCategory("France")
    example47.AddCategory("UK")
    example47.AddSeries("Electronics")
    example47.AddSeries("Software")
    example47.AddSeries("Mechanics")   
    example47.AddSeriesData5(12,8,6,10,7)
    example47.AddSeriesData5(14,12,4,14,11)
    example47.AddSeriesData5(18,10,5,9,9)
    example47.RotateXAxisLabels(-30, "10pt")
    example47.SetBarMargins(30)
    example47.ShowPointLabels(True,"")
    'Log(example47.ToString)
   
    example48.Initialize(page, "example48")
    page.Cell(25,2).AddComponent(example48.ABMComp)
    example48.SetTitle("Example 48: Bar Legend")
    example48.SetWidthHeight("100%","600px")
    example48.SetChartType(example48.ChartType.bar)
    example48.AddCategory("Germany")
    example48.AddCategory("Italy")
    example48.AddCategory("Spain")
    example48.AddCategory("France")
    example48.AddCategory("UK")
    example48.AddSeries("Electronics")
    example48.AddSeries("Software")
    example48.AddSeries("Mechanics")   
    example48.AddSeriesData5(12,8,6,10,7)
    example48.AddSeriesData5(14,12,4,14,11)
    example48.AddSeriesData5(18,10,5,9,9)
    example48.RotateXAxisLabels(-30, "10pt")
    example48.SetBarMargins(30)
    example48.ShowPointLabels(True,"")
    'example48.SetLegend("e", True,"outsideGrid")
    'Log(example48.ToString)
   
    example49.Initialize(page, "example49")
    page.Cell(26,1).AddComponent(example49.ABMComp)
    example49.SetTitle("Example 49: Horizontal Bar Chart")
    example49.SetWidthHeight("100%","900px")
    example49.SetChartType(example49.ChartType.barh)   'IMPORTANT
    example49.AddCategory("Germany")
    example49.AddCategory("Italy")
    example49.AddCategory("Spain")
    example49.AddCategory("France")
    example49.AddCategory("UK")
    example49.AddSeries("Electronics")
    example49.AddSeries("Software")
    example49.AddSeries("Mechanics")
    example49.AddSeriesData5(12,8,6,10,7)
    example49.AddSeriesData5(14,12,4,14,11)
    example49.AddSeriesData5(18,10,5,9,9)
    'example49.SetLegend("e", True,"outsideGrid")
    'Log(example49.ToString)
   
    example50.Initialize(page, "example50")
    page.Cell(26,2).AddComponent(example50.ABMComp)
    example50.SetTitle("Example 50: Stacked Bar Chart")
    example50.SetWidthHeight("100%","900px")
    example50.SetChartType(example50.ChartType.bar)   'IMPORTANT
    example50.AddCategory("Germany")
    example50.AddCategory("Italy")
    example50.AddCategory("Spain")
    example50.AddCategory("France")
    example50.AddCategory("UK")
    example50.AddSeries("Electronics")
    example50.AddSeries("Software")
    example50.AddSeries("Mechanics")
    example50.AddSeriesData5(12,8,6,10,7)
    example50.AddSeriesData5(14,12,4,14,11)
    example50.AddSeriesData5(18,10,5,9,9)
    example50.ShowPointLabels(True,example50.Location.s)
    example50.IsStacked = True
    'example50.SetLegend("e", True,"outsideGrid")
    Log(example50.ToString)
   
    example51.Initialize(page, "example51")
    page.Cell(27,1).AddComponent(example51.ABMComp)
    example51.SetTitle("Example 51: Horizontal Stacked Bar Chart")
    example51.SetWidthHeight("100%","900px")
    example51.SetChartType(example51.ChartType.barh)   'IMPORTANT
    example51.AddCategory("Germany")
    example51.AddCategory("Italy")
    example51.AddCategory("Spain")
    example51.AddCategory("France")
    example51.AddCategory("UK")
    example51.AddSeries("Electronics")
    example51.AddSeries("Software")
    example51.AddSeries("Mechanics")
    example51.AddSeriesData5(12,8,6,10,7)
    example51.AddSeriesData5(14,12,4,14,11)
    example51.AddSeriesData5(18,10,5,9,9)
    example51.ShowPointLabels(True,example51.Location.w)
    example51.IsStacked = True
    'example50.SetLegend("e", True,"outsideGrid")
    Log(example51.ToString)
 

Attachments

  • CustomJQPlot.bas
    42.4 KB · Views: 675
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Here is the zoom functionality, Example 52 and 53.

1.You select, drag and release the area to Zoom, double click will reset the plot area.

Zoom.png


Zoom1.png


We are plotting a large volume of data here using date and value, we set the minimun date to be 1 August 2010 16:00 and with a 6 month interval. By default, jPlot will draw a line chart if you dont specify the chart type.

B4X: 
example52.Initialize(page, "example52")
    page.Cell(28,1).AddComponent(example52.ABMComp)
    example52.SetTitle("Example 52: Zoom Functionality Original")
    example52.SetWidthHeight("100%","900px")
    example52.xAxis.sMin = "'August 1,2010 16:00:00'"
    example52.xAxis.tickInterval = "'6 months'"
    example52.xAxis.tickOptions.formatString = "'%#m/%#d/%Y'"
    example52.AddSeriesNeigborThreshold("-1")
    example52.xAxis.renderer = example52.renderer.DateAxisRenderer
    example52.cursor.show = True
    example52.cursor.zoom = True
    example52.cursor.showToolTip = False
    example52.SingleSeries = True  'IMPORTANT
    example52.AddSeriesDateData("6/22/2012 10:00:00",110.32)
    example52.AddSeriesDateData("6/8/2012 10:00:00",115.84)
   
    example52.AddSeriesDateData("5/26/2012 10:00:00", 121.23)
    example52.AddSeriesDateData("5/11/2012 10:00:00", 122.12)
    example52.AddSeriesDateData("4/27/2012 10:00:00", 120.69)
    example52.AddSeriesDateData("4/13/2012 10:00:00",123.24)
    example52.AddSeriesDateData("3/30/2012 10:00:00", 116.78)
    example52.AddSeriesDateData("3/16/2012 10:00:00", 115.16)
    example52.AddSeriesDateData("3/2/2012 10:00:00", 113.57)
    example52.AddSeriesDateData("2/17/2012 10:00:00", 120.45)
    example52.AddSeriesDateData("2/2/2012 10:00:00", 121.28)
    example52.AddSeriesDateData("1/20/2012 10:00:00", 124.7)
    example52.AddSeriesDateData("1/5/2012 10:00:00", 130.07)
    example52.AddSeriesDateData("12/22/2011 10:00:00", 129.36)
    example52.AddSeriesDateData("12/8/2011 10:00:00", 130.76)
    example52.AddSeriesDateData("11/24/2011 10:00:00", 133.96)
    example52.AddSeriesDateData("11/10/2011 10:00:00", 140.02)
    example52.AddSeriesDateData("10/27/2011 10:00:00", 138.36)
    example52.AddSeriesDateData("10/13/2011 10:00:00", 140.54)
    example52.AddSeriesDateData("9/29/2011 10:00:00", 140.91)
    example52.AddSeriesDateData("9/15/2011 10:00:00", 140.15)
    example52.AddSeriesDateData("9/2/2011 10:00:00", 138.25)
    example52.AddSeriesDateData("8/25/2011 10:00:00", 137.29)
    example52.AddSeriesDateData("8/11/2011 10:00:00", 139.15)
    example52.AddSeriesDateData("7/28/2011 10:00:00", 144.86)
    example52.AddSeriesDateData("7/14/2011 10:00:00", 145.32)
    example52.AddSeriesDateData("6/30/2011 10:00:00", 148.12)
    example52.AddSeriesDateData("6/16/2011 10:00:00", 146.43)
    example52.AddSeriesDateData("6/2/2011 10:00:00", 147)
    example52.AddSeriesDateData("5/19/2011 10:00:00", 144.62)
    example52.AddSeriesDateData("5/5/2011 10:00:00", 143.2)
    example52.AddSeriesDateData("4/21/2011 10:00:00", 144.06)
    example52.AddSeriesDateData("4/7/2011 10:00:00", 137.45)
    example52.AddSeriesDateData("3/24/2011 10:00:00", 138.08)
    example52.AddSeriesDateData("3/10/2011 10:00:00", 137.92)
    example52.AddSeriesDateData("2/25/2011 10:00:00", 131.18)
    example52.AddSeriesDateData("2/11/2011 10:00:00", 129.64)
    example52.AddSeriesDateData("1/28/2011 10:00:00", 133.9)
    example52.AddSeriesDateData("1/14/2011 10:00:00", 134.25)
    example52.AddSeriesDateData("12/31/2010 10:00:00", 137.00)
    example52.AddSeriesDateData("12/17/2010 10:00:00", 136.69)
    example52.AddSeriesDateData("12/3/2010 10:00:00", 144.87)
    example52.AddSeriesDateData("11/19/2010 10:00:00", 146.7)
    example52.AddSeriesDateData("11/5/2010 10:00:00", 143.97)
    example52.AddSeriesDateData("10/22/2010 10:00:00", 139.6)
    example52.AddSeriesDateData("10/8/2010 10:00:00", 133.39)
    example52.AddSeriesDateData("9/24/2010 10:00:00", 130.27)
    example52.AddSeriesDateData("9/10/2010 10:00:00", 132.75)
    example52.AddSeriesDateData("8/27/2010 10:00:00", 130.25)
    Log(example52.ToString)

PS: @Harris
 

Attachments

  • CustomJQPlot.bas
    43.5 KB · Views: 619
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Setting Limits on the Charts...

Add the js file to your page...

page.AddExtraJavaScriptFile("custom/jqplot.canvasOverlay.js")

Upper and Lower Limit: Example 54

B4X: 
example54.Initialize(page, "example54")
    page.Cell(29,1).AddComponent(example54.ABMComp)
    example54.SetTitle("Example 54: Upper & Lower Limits")
    example54.AddSeriesData9(100,110,140,130,80,75,120,130,100)
    example54.SetUpperLimit(145,4,0,0,255,False, "8,16", example54.linecap.sround)
    example54.SetLowerLimit(70,3,255,0,0,True ,example54.linecap.sbutt)
    Log(example54.ToString)

Setting Deadline: Example 55

B4X: 
example55.Initialize(page, "example55")
    page.Cell(29,2).AddComponent(example55.ABMComp)
    example55.SetTitle("Example 55: Setting Deadline")
    example55.AddSeriesData9(100,110,140,130,80,75,120,130,100)
    example55.SetDeadLine("lowLimit",5,3,50,200,50,True,example55.lineCap.sbutt,0)
    Log(example55.ToString)

Limits.png
 

Attachments

  • CustomJQPlot.bas
    50 KB · Views: 644
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Setting up the background of the chart: Example 56 - Example 58

B4X: 
example56.Initialize(page, "example56")
    page.Cell(30,1).AddComponent(example56.ABMComp)
    example56.SetTitle("Example 56: Grid Background")
    example56.AddSeriesData9(100,110,140,130,80,75,120,130,100)
    example56.grid.background = "#000000"
       
   
    example57.Initialize(page, "example57")
    page.Cell(30,2).AddComponent(example57.ABMComp)
    example57.SetTitle("Example 57: Grid LineColor & LineWidth")
    example57.AddSeriesData9(100,110,140,130,80,75,120,130,100)
    example57.grid.background = "#000000"
    example57.grid.gridLineColor = "#ffffff"
    example57.grid.gridLineWidth = 2
   
    example58.Initialize(page, "example58")
    page.Cell(31,1).AddComponent(example58.ABMComp)
    example58.SetTitle("Example 58: Grid Border & Shadow")
    example58.AddSeriesData9(100,110,140,130,80,75,120,130,100)
    example58.grid.gridLineColor = "#000000"
    example58.grid.gridLineWidth = 2
    example58.grid.drawBorder = False
    example58.grid.shadow = False

PS: The drarGridLines property of the chart has been moved to the grid object.

Grid.png
 

Attachments

  • CustomJQPlot.bas
    50.9 KB · Views: 614
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Example 59 & 60: Area Charts

B4X: 
'consider the order of appearance
    example59.Initialize(page, "example59")
    page.Cell(32,1).AddComponent(example59.ABMComp)
    example59.SetTitle("Example 59: Area Chart")
    example59.AddSeriesData6(7,8,9,11,10,11)
    example59.AddSeriesData6(5,6,8,9,7,9)
    example59.AddSeriesData6(3,4,5,6,5,7)
    example59.AddSeriesData6(1,2,3,2,3,4)
    example59.seriesDefaults.showMarker = False
    example59.seriesDefaults.fill = True
    example59.seriesDefaults.rendererOptions.smooth = True
 
    'consider the order of appearance
    example60.Initialize(page, "example60")
    page.Cell(32,2).AddComponent(example60.ABMComp)
    example60.SetTitle("Example 60: Area Chart & Line Chart")
    example60.AddSeriesData6(7,8,9,11,10,11)
    example60.AddSeriesData6(5,6,8,9,7,9)
    example60.AddSeriesData6(3,4,5,6,5,7)
    example60.AddSeriesData6(1,2,3,2,3,4)
    example60.seriesDefaults.showMarker = False
    example60.seriesDefaults.rendererOptions.smooth = True
    example60.AddSeriesFill(False)
    example60.AddSeriesFill(True)
    example60.AddSeriesFill(False)
    example60.AddSeriesFill(True)


NB: At some stage I will refactor the series object for proper code in this object.

Area.png
 

Attachments

  • CustomJQPlot.bas
    51.2 KB · Views: 641
Mashiane

Mashiane

Expert
Licensed User
Longtime User
OHLC / CandleStick Charts: Example 61 - 63

CandleSticks.png



Plugin:

B4X: 
page.AddExtraJavaScriptFile("custom/jqplot.ohlcRenderer.js")

B4X: 
example61.Initialize(page, "example61")
    page.Cell(2,1).AddComponent(example61.ABMComp)
    example61.SetTitle("Example 61: OHLC Charts (Open,High,Low,Close Prices)")
    example61.seriesDefaults.yAxis = "y2axis"
    example61.xAxis.renderer = example61.renderer.DateAxisRenderer
    example61.xAxis.tickOptions.formatString = "%b %e"
    example61.xAxis.sMin = "'08-07-2012 16:00'"
    example61.xAxis.sMax = "'09-12-2012 16:00'"
    example61.xAxis.tickInterval = "'1 weeks'"
    example61.AddSeriesRenderer(example61.renderer.OHLCRenderer, False)
    example61.y2Axis.tickOptions.formatString = "$%.2f"
    example61.SingleSeries = True
   
    example61.AddSeriesDataOHLC("8/08/2012 0:00:01", 1.238485, 1.2327, 1.240245, 1.23721)
example61.AddSeriesDataOHLC("8/09/2012 0:00:01", 1.23721, 1.22671, 1.23873, 1.229295)
example61.AddSeriesDataOHLC("8/10/2012 0:00:01", 1.2293, 1.22417, 1.23168, 1.228975)
example61.AddSeriesDataOHLC("8/12/2012 0:00:01", 1.229075, 1.22747, 1.22921, 1.22747)
example61.AddSeriesDataOHLC("8/13/2012 0:00:01", 1.227505, 1.22608, 1.23737, 1.232627)
example61.AddSeriesDataOHLC("8/14/2012 0:00:01", 1.23262, 1.23167, 1.238555, 1.232385)
example61.AddSeriesDataOHLC("8/15/2012 0:00:01", 1.232385, 1.22641, 1.234355, 1.22886)
example61.AddSeriesDataOHLC("8/16/2012 0:00:01", 1.22887, 1.225625, 1.237305, 1.23573)
example61.AddSeriesDataOHLC("8/17/2012 0:00:01", 1.23574, 1.22891, 1.23824, 1.2333)
example61.AddSeriesDataOHLC("8/19/2012 0:00:01", 1.23522, 1.23291, 1.235275, 1.23323)
example61.AddSeriesDataOHLC("8/20/2012 0:00:01", 1.233215, 1.22954, 1.236885, 1.2351)
example61.AddSeriesDataOHLC("8/21/2012 0:00:01", 1.23513, 1.23465, 1.248785, 1.247655)
example61.AddSeriesDataOHLC("8/22/2012 0:00:01", 1.247655, 1.24315, 1.254415, 1.25338)
example61.AddSeriesDataOHLC("8/23/2012 0:00:01", 1.25339, 1.252465, 1.258965, 1.255995)
example61.AddSeriesDataOHLC("8/24/2012 0:00:01", 1.255995, 1.248175, 1.256665, 1.2512)
example61.AddSeriesDataOHLC("8/26/2012 0:00:01", 1.25133, 1.25042, 1.252415, 1.25054)
example61.AddSeriesDataOHLC("8/27/2012 0:00:01", 1.25058, 1.249025, 1.25356, 1.25012)
example61.AddSeriesDataOHLC("8/28/2012 0:00:01", 1.250115, 1.24656, 1.257695, 1.2571)
example61.AddSeriesDataOHLC("8/29/2012 0:00:01", 1.25709, 1.251895, 1.25736, 1.2530657)
example61.AddSeriesDataOHLC("8/30/2012 0:00:01", 1.253075, 1.248785, 1.25639, 1.25097)
example61.AddSeriesDataOHLC("8/31/2012 0:00:01", 1.25096, 1.249375, 1.263785, 1.25795)
example61.AddSeriesDataOHLC("9/02/2012 0:00:01", 1.257195, 1.256845, 1.258705, 1.257355)
example61.AddSeriesDataOHLC("9/03/2012 0:00:01", 1.25734, 1.25604, 1.261095, 1.258635)
example61.AddSeriesDataOHLC("9/04/2012 0:00:01", 1.25865, 1.25264, 1.262795, 1.25339)
example61.AddSeriesDataOHLC("9/05/2012 0:00:01", 1.2534, 1.250195, 1.26245, 1.26005)
example61.AddSeriesDataOHLC("9/06/2012 0:00:01", 1.26006, 1.256165, 1.26513, 1.26309)
example61.AddSeriesDataOHLC("9/07/2012 0:00:01", 1.26309, 1.262655, 1.281765, 1.281625)
example61.AddSeriesDataOHLC("9/09/2012 0:00:01", 1.28096, 1.27915, 1.281295, 1.279565)
example61.AddSeriesDataOHLC("9/10/2012 0:00:01", 1.27957, 1.27552, 1.28036, 1.27617)
example61.AddSeriesDataOHLC("9/11/2012 0:00:01", 1.27617, 1.2759, 1.28712, 1.28515)
example61.AddSeriesDataOHLC("9/12/2012 0:00:01", 1.28516, 1.281625, 1.29368, 1.290235)
Log(example61.tostring)
   
    example62.Initialize(page, "example62")
    page.Cell(2,2).AddComponent(example62.ABMComp)
    example62.SetTitle("Example 62: OHLC CandleSticks (Open,High,Low,Close Prices)")
    example62.seriesDefaults.yAxis = "y2axis"
    example62.xAxis.renderer = example62.renderer.DateAxisRenderer
    example62.xAxis.tickOptions.formatString = "%b %e"
    example62.xAxis.sMin = "'08-07-2012 16:00'"
    example62.xAxis.sMax = "'09-12-2012 16:00'"
    example62.xAxis.tickInterval = "'1 weeks'"
    example62.AddSeriesRenderer(example61.renderer.OHLCRenderer, True)
    example62.y2Axis.tickOptions.formatString = "$%.2f"
    example62.SingleSeries = True
   
    example62.AddSeriesDataOHLC("8/08/2012 0:00:01", 1.238485, 1.2327, 1.240245, 1.23721)
example62.AddSeriesDataOHLC("8/09/2012 0:00:01", 1.23721, 1.22671, 1.23873, 1.229295)
example62.AddSeriesDataOHLC("8/10/2012 0:00:01", 1.2293, 1.22417, 1.23168, 1.228975)
example62.AddSeriesDataOHLC("8/12/2012 0:00:01", 1.229075, 1.22747, 1.22921, 1.22747)
example62.AddSeriesDataOHLC("8/13/2012 0:00:01", 1.227505, 1.22608, 1.23737, 1.232627)
example62.AddSeriesDataOHLC("8/14/2012 0:00:01", 1.23262, 1.23167, 1.238555, 1.232385)
example62.AddSeriesDataOHLC("8/15/2012 0:00:01", 1.232385, 1.22641, 1.234355, 1.22886)
example62.AddSeriesDataOHLC("8/16/2012 0:00:01", 1.22887, 1.225625, 1.237305, 1.23573)
example62.AddSeriesDataOHLC("8/17/2012 0:00:01", 1.23574, 1.22891, 1.23824, 1.2333)
example62.AddSeriesDataOHLC("8/19/2012 0:00:01", 1.23522, 1.23291, 1.235275, 1.23323)
example62.AddSeriesDataOHLC("8/20/2012 0:00:01", 1.233215, 1.22954, 1.236885, 1.2351)
example62.AddSeriesDataOHLC("8/21/2012 0:00:01", 1.23513, 1.23465, 1.248785, 1.247655)
example62.AddSeriesDataOHLC("8/22/2012 0:00:01", 1.247655, 1.24315, 1.254415, 1.25338)
example62.AddSeriesDataOHLC("8/23/2012 0:00:01", 1.25339, 1.252465, 1.258965, 1.255995)
example62.AddSeriesDataOHLC("8/24/2012 0:00:01", 1.255995, 1.248175, 1.256665, 1.2512)
example62.AddSeriesDataOHLC("8/26/2012 0:00:01", 1.25133, 1.25042, 1.252415, 1.25054)
example62.AddSeriesDataOHLC("8/27/2012 0:00:01", 1.25058, 1.249025, 1.25356, 1.25012)
example62.AddSeriesDataOHLC("8/28/2012 0:00:01", 1.250115, 1.24656, 1.257695, 1.2571)
example62.AddSeriesDataOHLC("8/29/2012 0:00:01", 1.25709, 1.251895, 1.25736, 1.2530657)
example62.AddSeriesDataOHLC("8/30/2012 0:00:01", 1.253075, 1.248785, 1.25639, 1.25097)
example62.AddSeriesDataOHLC("8/31/2012 0:00:01", 1.25096, 1.249375, 1.263785, 1.25795)
example62.AddSeriesDataOHLC("9/02/2012 0:00:01", 1.257195, 1.256845, 1.258705, 1.257355)
example62.AddSeriesDataOHLC("9/03/2012 0:00:01", 1.25734, 1.25604, 1.261095, 1.258635)
example62.AddSeriesDataOHLC("9/04/2012 0:00:01", 1.25865, 1.25264, 1.262795, 1.25339)
example62.AddSeriesDataOHLC("9/05/2012 0:00:01", 1.2534, 1.250195, 1.26245, 1.26005)
example62.AddSeriesDataOHLC("9/06/2012 0:00:01", 1.26006, 1.256165, 1.26513, 1.26309)
example62.AddSeriesDataOHLC("9/07/2012 0:00:01", 1.26309, 1.262655, 1.281765, 1.281625)
example62.AddSeriesDataOHLC("9/09/2012 0:00:01", 1.28096, 1.27915, 1.281295, 1.279565)
example62.AddSeriesDataOHLC("9/10/2012 0:00:01", 1.27957, 1.27552, 1.28036, 1.27617)
example62.AddSeriesDataOHLC("9/11/2012 0:00:01", 1.27617, 1.2759, 1.28712, 1.28515)
example62.AddSeriesDataOHLC("9/12/2012 0:00:01", 1.28516, 1.281625, 1.29368, 1.290235)
Log(example62.tostring)
   
    example63.Initialize(page, "example63")
    page.Cell(3,1).AddComponent(example63.ABMComp)
    example63.SetTitle("Example 63: OHLC Comparison (Open,High,Low,Close Prices)")
    example63.xAxis.renderer = example63.renderer.CategoryAxisRenderer
    example63.AddSeriesRenderer(example61.renderer.OHLCRenderer, True)
    example63.SingleSeries = True
    example63.AddSeriesDataOHLCCompare(1,75,80,40,44)
    example63.AddSeriesDataOHLCCompare(2,30,60,15,20)
    example63.AddSeriesDataOHLCCompare(3,64,75,48,50)
    example63.AddSeriesDataOHLCCompare(4,67,78,20,36)
    example63.AddCategory("Apple")
    example63.AddCategory("Ubuntu")
    example63.AddCategory("Microsoft")
    example63.AddCategory("Android")
 

Attachments

  • CustomJQPlot.bas
    55 KB · Views: 643
Harris

Harris

Expert
Licensed User
Longtime User
Mashiane said:
Here is the zoom functionality, Example 52 and 53.

1.You select, drag and release the area to Zoom, double click will reset the plot area.

View attachment 50544

View attachment 50545

We are plotting a large volume of data here using date and value, we set the minimun date to be 1 August 2010 16:00 and with a 6 month interval. By default, jPlot will draw a line chart if you dont specify the chart type.

B4X: 
example52.Initialize(page, "example52")
    page.Cell(28,1).AddComponent(example52.ABMComp)
    example52.SetTitle("Example 52: Zoom Functionality Original")
    example52.SetWidthHeight("100%","900px")
    example52.xAxis.sMin = "'August 1,2010 16:00:00'"
    example52.xAxis.tickInterval = "'6 months'"
    example52.xAxis.tickOptions.formatString = "'%#m/%#d/%Y'"
    example52.AddSeriesNeigborThreshold("-1")
    example52.xAxis.renderer = example52.renderer.DateAxisRenderer
    example52.cursor.show = True
    example52.cursor.zoom = True
    example52.cursor.showToolTip = False
    example52.SingleSeries = True  'IMPORTANT
    example52.AddSeriesDateData("6/22/2012 10:00:00",110.32)
    example52.AddSeriesDateData("6/8/2012 10:00:00",115.84)
  
    example52.AddSeriesDateData("5/26/2012 10:00:00", 121.23)
    example52.AddSeriesDateData("5/11/2012 10:00:00", 122.12)
    example52.AddSeriesDateData("4/27/2012 10:00:00", 120.69)
    example52.AddSeriesDateData("4/13/2012 10:00:00",123.24)
    example52.AddSeriesDateData("3/30/2012 10:00:00", 116.78)
    example52.AddSeriesDateData("3/16/2012 10:00:00", 115.16)
    example52.AddSeriesDateData("3/2/2012 10:00:00", 113.57)
    example52.AddSeriesDateData("2/17/2012 10:00:00", 120.45)
    example52.AddSeriesDateData("2/2/2012 10:00:00", 121.28)
    example52.AddSeriesDateData("1/20/2012 10:00:00", 124.7)
    example52.AddSeriesDateData("1/5/2012 10:00:00", 130.07)
    example52.AddSeriesDateData("12/22/2011 10:00:00", 129.36)
    example52.AddSeriesDateData("12/8/2011 10:00:00", 130.76)
    example52.AddSeriesDateData("11/24/2011 10:00:00", 133.96)
    example52.AddSeriesDateData("11/10/2011 10:00:00", 140.02)
    example52.AddSeriesDateData("10/27/2011 10:00:00", 138.36)
    example52.AddSeriesDateData("10/13/2011 10:00:00", 140.54)
    example52.AddSeriesDateData("9/29/2011 10:00:00", 140.91)
    example52.AddSeriesDateData("9/15/2011 10:00:00", 140.15)
    example52.AddSeriesDateData("9/2/2011 10:00:00", 138.25)
    example52.AddSeriesDateData("8/25/2011 10:00:00", 137.29)
    example52.AddSeriesDateData("8/11/2011 10:00:00", 139.15)
    example52.AddSeriesDateData("7/28/2011 10:00:00", 144.86)
    example52.AddSeriesDateData("7/14/2011 10:00:00", 145.32)
    example52.AddSeriesDateData("6/30/2011 10:00:00", 148.12)
    example52.AddSeriesDateData("6/16/2011 10:00:00", 146.43)
    example52.AddSeriesDateData("6/2/2011 10:00:00", 147)
    example52.AddSeriesDateData("5/19/2011 10:00:00", 144.62)
    example52.AddSeriesDateData("5/5/2011 10:00:00", 143.2)
    example52.AddSeriesDateData("4/21/2011 10:00:00", 144.06)
    example52.AddSeriesDateData("4/7/2011 10:00:00", 137.45)
    example52.AddSeriesDateData("3/24/2011 10:00:00", 138.08)
    example52.AddSeriesDateData("3/10/2011 10:00:00", 137.92)
    example52.AddSeriesDateData("2/25/2011 10:00:00", 131.18)
    example52.AddSeriesDateData("2/11/2011 10:00:00", 129.64)
    example52.AddSeriesDateData("1/28/2011 10:00:00", 133.9)
    example52.AddSeriesDateData("1/14/2011 10:00:00", 134.25)
    example52.AddSeriesDateData("12/31/2010 10:00:00", 137.00)
    example52.AddSeriesDateData("12/17/2010 10:00:00", 136.69)
    example52.AddSeriesDateData("12/3/2010 10:00:00", 144.87)
    example52.AddSeriesDateData("11/19/2010 10:00:00", 146.7)
    example52.AddSeriesDateData("11/5/2010 10:00:00", 143.97)
    example52.AddSeriesDateData("10/22/2010 10:00:00", 139.6)
    example52.AddSeriesDateData("10/8/2010 10:00:00", 133.39)
    example52.AddSeriesDateData("9/24/2010 10:00:00", 130.27)
    example52.AddSeriesDateData("9/10/2010 10:00:00", 132.75)
    example52.AddSeriesDateData("8/27/2010 10:00:00", 130.25)
    Log(example52.ToString)

PS: @Harris
Click to expand...
Will the AddSeriesDateData accept a long value or must all date / times be formatted as this string (day/month/year h:m:s)?

What actually draws the chart ( as in - chart.draw(data, options); with google charts...)?

This framework seems to cover all forms of charting very well.
I shall have to try it soon and check performance. I have tried and learned Chartist, jCharts and Google charts. So far, the latter is easiest to learn and implement - however it requires an internet connection to function, since only the loader.js is resident on your server. Amazing how fast this is thou.

ABMCustomComponent makes adding other functionality (almost) trivial. Thanks!
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Harris said:
Will the AddSeriesDateData accept a long value or must all date / times be formatted as this string (day/month/year h:m:s)?

What actually draws the chart ( as in - chart.draw(data, options); with google charts...)?

This framework seems to cover all forms of charting very well.
I shall have to try it soon and check performance. I have tried and learned Chartist, jCharts and Google charts. So far, the latter is easiest to learn and implement - however it requires an internet connection to function, since only the loader.js is resident on your server. Amazing how fast this is thou.

ABMCustomComponent makes adding other functionality (almost) trivial. Thanks!
Click to expand...
I would think any date/time acceptable value, see example 23-25, the crucial thing I'm of the opinion is the formatstring of the output.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Gauges, example 64 - 68.

In buildpage add

B4X: 
page.AddExtraJavaScriptFile("custom/jqplot.meterGaugeRenderer.js")

64-68.png


In ConnectPage


B4X: 
example65.Initialize(page, "example65")
    page.Cell(2,1).AddComponent(example65.ABMComp)
    example65.SetTitle("Example 64: Gauge: Network Speed")
    example65.seriesDefaults.renderer = example65.renderer.MeterGaugeRenderer
    example65.seriesDefaults.rendererOptions.label = "MB/s"
    example65.AddSeriesData1(1)

    example66.Initialize(page, "example66")
    page.Cell(2,2).AddComponent(example66.ABMComp)
    example66.SetTitle("Example 66: Gauge Intervals")
    example66.seriesDefaults.renderer = example66.renderer.MeterGaugeRenderer
    example66.AddSeriesData1(1)
    example66.AddSeriesDefaultsInterval(2, "#66cc66")
    example66.AddSeriesDefaultsInterval(3, "#E7E658")
    example66.AddSeriesDefaultsInterval(4, "#cc6666")
    'example66.seriesDefaults.rendererOptions.showTickLabels = False

    example67.Initialize(page, "example67")
    page.Cell(3,1).AddComponent(example67.ABMComp)
    example67.SetTitle("Example 67: Gauge Min Max")
    example67.seriesDefaults.renderer = example67.renderer.MeterGaugeRenderer
    example67.AddSeriesData1(322)
    example67.seriesDefaults.rendererOptions.sMin = 100
    example67.seriesDefaults.rendererOptions.smax = 500
    example67.AddSeriesDefaultsInterval(200, "#66cc66")
    example67.AddSeriesDefaultsInterval(300, "#93b75f")
    example67.AddSeriesDefaultsInterval(400, "#E7E658")
    example67.AddSeriesDefaultsInterval(500, "#cc6666")


    example68.Initialize(page, "example68")
    page.Cell(3,2).AddComponent(example68.ABMComp)
    example68.SetTitle("Example 68: Gauge Options")
    example68.seriesDefaults.renderer = example68.renderer.MeterGaugeRenderer
    example68.AddSeriesData1(52200)
    example68.AddSeriesDefaultTicks(10000)
    example68.AddSeriesDefaultTicks(30000)
    example68.AddSeriesDefaultTicks(50000)
    example68.AddSeriesDefaultTicks(70000)
    example68.AddSeriesDefaultsInterval(22000, "#66cc66")
    example68.AddSeriesDefaultsInterval(55000, "#E7E658")
    example68.AddSeriesDefaultsInterval(70000, "#cc6666")
    example68.seriesDefaults.rendererOptions.label = "Metric Tons Per Year"
    example68.seriesDefaults.rendereroptions.labelPosition = "bottom"
    example68.seriesDefaults.rendererOptions.labelHeightAdjust = -5
    example68.seriesDefaults.rendererOptions.intervalOuterRadius = 85
 

Attachments

  • CustomJQPlot.bas
    64 KB · Views: 609
Mashiane

Mashiane

Expert
Licensed User
Longtime User
I have started cleaning up the code. There have been a lot of similaries between the objects so it was proper to create methods to just pass objects for rendering, for example,the x axis, axesdefaults, y axis, y2 axis and x2axis, these are all based from the AxisObject now.

Also the seriesDefaults and the series object are similar so a method to render them has been passed. The output in terms of the js scripts to render the chart has also been nicely profiled to only render the needed details.

10 series objects have been defined internally in this component however you need to add them with

example1.addseries1..n to ensure that they are used in the plotting. There is no need to initialize them as they are already initialized. If however you want to create your own series you can create it like

B4X: 
dim myseries as seriesobject
example12.InitializeSeries(myseries)
myseries.label = "my series" and then
example12.addseries(myseries)

The graphics below show the newest additions and usage

.
6.1.png


B4X: 
example0.Initialize(page, "example0")
    page.Cell(2,1).AddComponent(example0.ABMComp)
    example0.SetTitle("Example 6.1: Series Defaults Hide 1 Marker")
    example0.SetWidthHeight("100%","600px")
    example0.AddSeriesData6(1,2,3,2,3,4)
    example0.AddSeriesData6(3,4,5,6,5,7)
    example0.AddSeriesData6(5,6,8,9,7,9)
    example0.AddSeriesData6(7,8,9,11,10,11)
    example0.s1.showMarker = False
    example0.addseries1

Now let's look at example 70 below.

B4X: 
example70.Initialize(page, "example70")
    page.Cell(2,2).AddComponent(example70.ABMComp)
    example70.SetWidthHeight("100%","600px")
    example70.SetTitle("Example 70: Another Line Chart")
    example70.AddColumn("May")
    example70.AddColumn("June")
    example70.AddColumn("July")
    example70.AddColumn("August")
    example70.SetSeriesLabel(example70.s1, "Hotel")
    example70.SetSeriesLabel(example70.s2, "Event Registration")
    example70.SetSeriesLabel(example70.s3, "Airfare")
    example70.AddSeries1
    example70.AddSeries2
    example70.AddSeries3
    example70.AddSeriesData4(200, 600, 700, 1000)
    example70.AddSeriesData4(460, -210, 690, 820)
    example70.AddSeriesData4(-260, -440, 320, 200)
    'example70.SetLegendPlacement(example70.placement.outsideGrid)
    example70.xAxis.renderer = example70.renderer.CategoryAxisRenderer  'optional set with AddColumn
    example70.yAxis.pad = 1.05
    example70.yAxis.tickOptions.formatString = "$%d"
    example70.seriesDefaults.rendererOptions.fillToZero = True

AddColumn is the same as AddCategory, just added in case one forgets. For this chart we have 3 series. We define their labels with SetSeriesLabel and we then run AddSeries1..3 for each, and this produces this.

70.png


The js (javascript) code for both chart is....

B4X: 
var data = [];
data.push([1, 2, 3, 2, 3, 4]);
data.push([3, 4, 5, 6, 5, 7]);
data.push([5, 6, 8, 9, 7, 9]);
data.push([7, 8, 9, 11, 10, 11]);
var sOptions = [];
sOptions.push({
rendererOptions:{
},
showMarker: false,
shadow: false,
});
var options = {
title: 'Example 6.1: Series Defaults Hide 1 Marker',
series: sOptions,
seriesDefaults: {
rendererOptions:{
},
shadow: false,
},
axesDefaults:{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
axes:{
xaxis:{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
yaxis:{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
},
highlighter:{
},
cursor:{
},
};
example0plot = $.jqplot('example0', data, options);

and

B4X: 
var data = [];
data.push([200, 600, 700, 1000]);
data.push([460, -210, 690, 820]);
data.push([-260, -440, 320, 200]);
var xticks = [];
xticks.push('May');
xticks.push('June');
xticks.push('July');
xticks.push('August');
var sOptions = [];
sOptions.push({
label: 'Hotel',
rendererOptions:{
},
shadow: false,
});
sOptions.push({
label: 'Event Registration',
rendererOptions:{
},
shadow: false,
});
sOptions.push({
label: 'Airfare',
rendererOptions:{
},
shadow: false,
});
var options = {
title: 'Example 70: Another Line Chart',
series: sOptions,
seriesDefaults: {
rendererOptions:{
fillToZero: true,
},
shadow: false,
},
axesDefaults:{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
ticks: xticks,
},
yaxis:{
tickOptions:{
formatString: '$%d',
},
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
pad: 1.05,
},
},
highlighter:{
},
cursor:{
},
};
example70plot = $.jqplot('example70', data, options);
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Looking at the latest developments again....

Another example of a horizontal bar chart, note the sequencing from 1...4. In most cases when defining charts, one will use x and y and thus, AddData2Series2 passing the series to add the data to. The sequences of how the series are added to the chart with AddSeries1, AddSeries2 or AddSeriesX will generate an array in that order.

B4X: 
example71.Initialize(page, "example71")
    page.Cell(2,1).AddComponent(example71.ABMComp)
    example71.SetWidthHeight("100%","900px")
    example71.SetTitle("Example 71: A Simpler Bar Chart")
    example71.seriesDefaults.renderer = example71.renderer.BarRenderer
    example71.seriesDefaults.pointLabels.Show = True
    example71.seriesDefaults.pointLabels.location = example71.Location.e
    example71.seriesDefaults.showAngle = 135
    example71.seriesDefaults.pointLabels.edgeTolerance = -15
    example71.seriesDefaults.rendererOptions.barDirection = example71.barDirection.horizontal
    example71.yAxis.renderer = example71.renderer.CategoryAxisRenderer
    example71.AddData2Series2(example71.s1, 2,1)
    example71.AddData2Series2(example71.s1, 4,2)
    example71.AddData2Series2(example71.s1, 6,3)
    example71.AddData2Series2(example71.s1, 3,4)

    example71.AddData2Series2(example71.s2, 5,1)
    example71.AddData2Series2(example71.s2, 1,2)
    example71.AddData2Series2(example71.s2, 3,3)
    example71.AddData2Series2(example71.s2, 4,4)

    example71.AddData2Series2(example71.s3, 4,1)
    example71.AddData2Series2(example71.s3, 7,2)
    example71.AddData2Series2(example71.s3, 1,3)
    example71.AddData2Series2(example71.s4, 2,4)

    example71.AddSeries1
    example71.AddSeries2
    example71.AddSeries3
example71.AddSeries4

71.png


Let's also work on another chart type, the step chart.

69.png



B4X: 
example69.Initialize(page, "example69")
    page.Cell(2,1).AddComponent(example69.ABMComp)
    example69.SetWidthHeight("100%","600px")
    example69.SetTitle("Example 69: Step Chart")
    example69.axesDefaults.labelRenderer = example69.renderer.CanvasAxisLabelRenderer
    example69.seriesDefaults.rendererOptions.smooth = True
    example69.seriesDefaults.bstep = True
    example69.seriesDefaults.markerOptions.Show = False
    example69.AddSeriesData9(3,7,9,1,5,3,8,2,5)
    example69.xAxis.pad = 0
    example69.xAxis.label = "X Axis"
    example69.yAxis.label = "Y Axis"

NB: SeriesDefaults apply to all series in the chart. This object holds the same definition as series1..10, thus you can be series specific if you want leaving out series defaults.

Example 71: JavaScript

B4X: 
var data = [];
data.push([2, 1],[4, 2],[6, 3],[3, 4]);
data.push([5, 1],[1, 2],[3, 3],[4, 4]);
data.push([4, 1],[7, 2],[1, 3],[2, 4]);
var sOptions = [];
sOptions.push({
rendererOptions:{
},
shadow: false,
});
sOptions.push({
rendererOptions:{
},
shadow: false,
});
sOptions.push({
rendererOptions:{
},
shadow: false,
});
var options = {
title: 'Example 71: A Simpler Bar Chart',
series: sOptions,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions:{
barDirection: 'horizontal',
},
pointLabels:{
show: true,
location: 'e',
edgeTolerance: -15,
},
shadow: false,
showAngle: 135,
},
axesDefaults:{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
axes:{
xaxis:{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
yaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
},
highlighter:{
},
cursor:{
},
};
example71plot = $.jqplot('example71', data, options);
 

Attachments

  • CustomJQPlot.bas
    71.1 KB · Views: 625
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
About to close off this custom component, just some final charting using AddData2Series

Additional.png


B4X: 
example1.Initialize(page, "example1")
    page.Cell(2,1).AddComponent(example1.ABMComp)
    example1.SetTitle("Figure 4.2")
    example1.SetWidthHeight("100%","600px")
    example1.AddData2Series2(example1.s1,10,100)
    example1.AddData2Series2(example1.s1,80,130)
    example1.AddData2Series2(example1.s1,65,75)
    example1.AddData2Series2(example1.s1,40,130)
    example1.AddData2Series2(example1.s1,60,80)
    example1.AddData2Series2(example1.s1,30,140)
    example1.AddData2Series2(example1.s1,70,120)
    example1.AddData2Series2(example1.s1,20,110)
    example1.AddData2Series2(example1.s1,95,100)
    example1.AddSeries1

example2.Initialize(page, "example2")
   page.Cell(2,2).AddComponent(example2.ABMComp)
   example2.SetTitle("Figure 4.14")
   example2.SetWidthHeight("100%","600px")
   example2.AddData2Series2(example2.s1,0,1.2)
   example2.AddData2Series2(example2.s1,10,2.4)
   example2.AddData2Series2(example2.s1,20,5.6)
   example2.AddData2Series2(example2.s1,30,12)
   example2.AddData2Series2(example2.s1,40,23)
   example2.AddData2Series2(example2.s1,50,60)
   example2.AddData2Series2(example2.s1,60,120)
   example2.AddData2Series2(example2.s1,70,270)
   example2.AddData2Series2(example2.s1,80,800)
   example2.AddSeries1
   example2.yAxis.renderer = example2.renderer.LogAxisRenderer
   'Log(example2.ToString)
     
   example3.Initialize(page, "example3")
   page.Cell(2,1).AddComponent(example3.ABMComp)
   example3.SetTitle("Figure 4.21")
   example3.SetWidthHeight("100%","600px")
   example3.AddData2Series6(example3.s1, 1,2,3,2,3,4)
   example3.AddData2Series6(example3.s2,3,4,5,6,5,7)
   example3.AddData2Series6(example3.s3,5,6,8,8,7,9)
   example3.AddData2Series6(example3.s4,7,8,9,9,10,11)
   example3.AddSeries1
   example3.AddSeries2
   example3.AddSeries3
   example3.AddSeries4
   example3.Smoothen
   example3.HideMarkers
   example3.Animated
   'Log(example3.ToString)
   
   example4.Initialize(page, "example4")
   page.Cell(2,2).AddComponent(example4.ABMComp)
   example4.SetTitle("Figure 4.22")
   example4.SetWidthHeight("100%","600px")
   example4.AddData2Series2(example4.s1, 10,200)
   example4.AddData2Series2(example4.s1, 20,230)
   example4.AddData2Series2(example4.s1, 30,214)
   example4.AddData2Series2(example4.s1, 40,212)
   example4.AddData2Series2(example4.s1, 50,225)
   example4.AddData2Series2(example4.s1, 60,234)
   
   example4.AddData2Series2(example4.s2, 10,455)
   example4.AddData2Series2(example4.s2, 20,470)
   example4.AddData2Series2(example4.s2, 30,465)
   example4.AddData2Series2(example4.s2, 40,432)
   example4.AddData2Series2(example4.s2, 50,455)
   example4.AddData2Series2(example4.s2, 60,464)
   
   example4.AddData2Series2(example4.s3, 10,40)
   example4.AddData2Series2(example4.s3, 20,60)
   example4.AddData2Series2(example4.s3, 30,54)
   example4.AddData2Series2(example4.s3, 40,52)
   example4.AddData2Series2(example4.s3, 50,65)
   example4.AddData2Series2(example4.s3, 60,54)
   
   example4.axesDefaults.useSeriesColor = True
   
   example4.s2.yAxis = "y2axis"
   example4.s3.yAxis = "y3axis"
   
   example4.s1.IsDataArray = True
   example4.s2.IsDataArray = True
   example4.s3.IsDataArray = True
   
   example4.AddSeries1
   example4.AddSeries2
   example4.AddSeries3
   
   example4.SetXAxisMinMax(0,70)
   example4.SetYAxisMinMax(190,240)
   example4.SetY2AxisMinMax(430,480)
   example4.SetY3AxisMinMax(35,80)
 
You must log in or register to reply here.

Similar Threads

P
B4X Buttons grid example
Replies
2
Views
3K
PaulMeuris
P
Erel
  • Article
Android Tutorial [B4X][B4XPages] SQL + xCLV Example
Replies
3
Views
7K
TILogistic
TILogistic
prbmjr
  • Question
B4J Question [BANanoWebix] - How to implement multiple series on same chart
Replies
3
Views
1K
prbmjr
prbmjr
Erel
  • Locked
  • Article
Android Tutorial [B4X] B4XPages - Cross platform and simple framework for managing multiple pages
Replies
12
Views
81K
Erel
Erel
klaus
  • Article
B4J Library [B4X] [XUI] xChart Class and b4xlib
33 34 35
Replies
685
Views
190K
klaus
klaus
Top